How to Add Contact Form 7 in Elementor

Contact Form 7 has been the go-to free contact form plugin for WordPress for many years, and for good reason. It is free, lightweight, and actively maintained with regular security updates. It integrates with services like Mailchimp, HubSpot, and the free Flamingo plugin for managing form submissions, and it lets you create forms with multiple field types, file uploads, and custom validation messages.

The plugin generates a shortcode for each form you create. With Elementor, you don’t need to paste that shortcode manually — you just drop in the CF7 widget, select your form from a dropdown, and it appears instantly. For sites that don’t have Elementor Pro’s built-in form widget, Contact Form 7 is one of the best free alternatives.

Before adding Contact Form 7 to an Elementor page, make sure you have the following in place:

• A WordPress site with admin access
• The Contact Form 7 plugin installed and activated (available free from the WordPress plugin directory)
• Elementor free or Pro active on the page you are editing
• At least one contact form already created inside Contact Form 7

If you haven’t created a form yet, go to Contact > Add New in your WordPress dashboard. Give the form a name, set up your fields, and click Save. You’ll see a shortcode appear at the top of the saved form — you won’t need to paste it manually in Elementor, but it’s good to know it’s there.

Log into your WordPress dashboard and navigate to the page where you want the contact form to appear. Click Edit with Elementor to open the page builder. If you are creating a new page, go to Pages > Add New, give it a title, and click Edit with Elementor.

Once you’re inside the Elementor editor, find the section of your layout where the form should go. If you are working with an existing section, click into it. If you need a new section, click the blue “+” icon to add a section or container, then choose your column layout.

In the Elementor left sidebar, type “Contact Form 7” or “CF7” into the search box at the top of the widget panel. The Contact Form 7 widget will appear in the results. Drag it from the sidebar and drop it into the section on your page where you want the form to sit.

Once placed, look at the Content tab in the left panel. You’ll see a dropdown labeled “Select Your Form.” Click it and choose the contact form you created earlier. The form will render on the Elementor canvas right away.

If the widget shows a blank area or a 404 message instead of the form, check that you have selected a form from the dropdown. If no forms appear in the dropdown, go to Contact > Add New in your dashboard and create a Contact Form 7 form first, then return to Elementor.

With the CF7 widget selected, click the Style tab in the left panel to access typography options. Under the Typography or Text section, you can adjust the font family, size, weight, line height, and letter spacing for the form labels, input field text, and placeholder text.

Match the font to the rest of your page for a consistent look. These settings apply only to this widget and won’t affect other areas of your site. The form stays fully responsive across devices regardless of what font settings you choose here.

Still in the Style tab, look for the Field or “Input and Textarea” section. Here you can adjust the padding inside input boxes, border width and color, border radius (to round the corners), and background color of the fields.

A subtle border radius of 4 to 6 pixels gives input fields a clean, modern appearance. Setting a background color that clearly contrasts with your page background — for example, white inputs on a gray page — makes the form easier to fill out and reduces friction for visitors.

If you want the contact form to sit inside a visual container — such as a white card on a colored section — the best approach is to add a background to the section or column that contains the CF7 widget, rather than to the widget itself.

Select the section by clicking its handle, then go to the Style tab and set a background color, gradient, or image. You can also add a border radius and box shadow to give the form area a card-style look that makes it stand out from the rest of the page.

The submit button inherits its default appearance from your active theme’s CSS and the Contact Form 7 plugin styles. To customize it in Elementor, select the CF7 widget and look for the “Submit Button” section in the Style tab. Depending on your Elementor version, you may be able to set a background color, text color, padding, border radius, and hover state directly from this panel.

If those options are not visible in the free version of Elementor, you can add custom CSS under the Advanced tab of the widget. Set a selector of `.wpcf7 input[type=”submit”]` and apply your desired colors and padding from there. This gives you full control without needing any premium add-ons.

When you’re satisfied with the form placement and styling, click the green Publish or Update button at the bottom of the Elementor panel. Then visit the page on the front end to confirm the form is rendering correctly.

Send yourself a test submission to check that the form works and that you receive the notification email. If the test email doesn’t arrive, check your spam folder first. If it’s not there, consider installing a WordPress SMTP plugin such as WP Mail SMTP, which improves email deliverability from your hosting server.