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. It is free, lightweight, and actively maintained with regular security updates. It integrates with services like Mailchimp, HubSpot, and the free Flamingo plugin for storing form submissions locally. It supports multiple field types, file uploads, and custom validation messages.

The plugin generates a shortcode for each form you create. With Elementor, you do not need to paste that shortcode manually. You drop in the CF7 widget, select your form from a dropdown, and it renders on the canvas immediately.

When CF7 is the right choice: simple contact forms, inquiry forms, newsletter sign-ups, and any site that wants a proven free option without complex requirements.

When CF7 is NOT the right choice: if you need multi-step forms, conditional logic (show or hide fields based on user input), payment processing, or a visual drag-and-drop form builder with a point-and-click interface. For those use cases, WPForms (free/paid) or Gravity Forms (paid) are better options. If you have Elementor Pro, its built-in Form widget handles conditional logic natively and saves you adding another plugin entirely.

CF7’s one weakness is its email reliability. Like all WordPress plugins, it sends email via your server’s PHP mail function by default, which most hosting providers do not authenticate. This means emails land in spam or go missing. The fix is a free SMTP plugin, covered in the testing step below.

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

Both Elementor Free and Elementor Pro include the CF7 widget built-in. You do not need any extra add-on plugin. The CF7 widget appears in Elementor’s widget panel as soon as the Contact Form 7 plugin is active.

If you have not 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 will see a shortcode appear at the top of the saved form. You will not need to paste it manually in Elementor, but knowing it exists is useful if you ever want to embed the form in a text block or widget area instead.

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 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. A single-column layout works well for contact forms because it gives the form full width to breathe.

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 will 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.

Troubleshooting: widget not appearing in the panel

• If no CF7 widget appears in Elementor’s search results, the most likely cause is that the Contact Form 7 plugin is not installed or not activated. Go to Plugins > Installed Plugins and confirm CF7 is active.
• If CF7 is active but the widget is still missing, try deactivating and reactivating the plugin to force Elementor to re-register the widget.
• In rare cases with older Elementor versions, you may need a bridge plugin such as “CF7 Widget For Elementor” to surface the widget. This is uncommon with current Elementor versions.

Troubleshooting: dropdown shows no forms
If the widget appears but the form dropdown is empty, you have not yet created any forms inside CF7. Go to Contact > Add New, create at least one form, save it, then return to Elementor and refresh the dropdown.

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.

For readability, aim for a font size between 14px and 16px for body text in forms. Smaller than 14px is hard to read on mobile; larger than 16px can make a simple form feel oversized. Set line height to around 1.5 to give the label and field text room to breathe.

Match the font family to the rest of your page for a consistent look. These settings apply only to this widget and will not 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 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.

If Elementor’s built-in style controls do not give you enough options, you can apply custom CSS directly using the widget’s CSS classes:

• .wpcf7-form input[type="text"] — targets all text inputs
• .wpcf7-form input[type="email"] — targets email fields
• .wpcf7-form textarea — targets the message textarea
• .wpcf7-form .wpcf7-submit — targets the submit button

Add custom CSS under the Advanced tab of the CF7 widget in Elementor, or in your theme’s Additional CSS section (Appearance > Customize > Additional CSS).

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.

Adding padding to the section (in the Layout tab) keeps the form from touching the edges of the card. A padding of 40px on all sides is a good starting point for a clean, spacious feel.

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. Use the selector .wpcf7 input[type="submit"] and apply your desired colors and padding from there. This gives you full control without needing any premium add-ons.

Example custom CSS for a styled button:

.wpcf7 input[type="submit"] {
  background-color: #0073aa;
  color: #ffffff;
  padding: 12px 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
  background-color: #005a87;
}

When you are 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. If the confirmation message appears on screen, the form itself is working. Now check your inbox for the notification email.

If the test email never arrives:

This is the most common Contact Form 7 problem, and it has nothing to do with CF7 itself. WordPress sends email through your server’s PHP mail function by default. Most hosting providers do not authenticate PHP mail, so the emails either go straight to spam or get silently dropped by your recipient’s mail server.

The fix is to install an SMTP plugin. WP Mail SMTP is the most widely used option and has a free tier that covers all standard use cases. Here is what to do:

1. Install and activate WP Mail SMTP from the WordPress plugin directory.
2. Go to WP Mail SMTP > Settings in your dashboard.
3. Under the Mailer section, choose a provider. Gmail (via OAuth) is the easiest for most sites. If you have a transactional email account (Mailgun, SendGrid, Brevo), use that instead for higher deliverability.
4. Follow the setup wizard to connect your chosen mailer.
5. Use the Email Test tab to send a test message and confirm delivery.

Once SMTP is configured, CF7 notifications will route through your authenticated email account and arrive reliably. Check the CF7 form’s Mail tab (Contact > your form name > Mail) to confirm the “To” address matches where you want notifications sent.

An unprotected Contact Form 7 form will attract spam submissions within days of going live. Bots constantly scan the web for open forms, and without any protection, your inbox fills with junk quickly. Here are the main options, from simplest to most thorough.

1. Akismet (easiest, works automatically)
If Akismet is installed and active on your WordPress site, CF7 automatically routes submissions through Akismet’s spam filter before they reach your inbox. No extra configuration needed inside CF7. Akismet is free for personal sites and available from the WordPress plugin directory.

2. CF7’s built-in honeypot field
A honeypot is a hidden form field that humans never see or fill in, but bots fill in automatically. When CF7 detects a submission where the honeypot field has a value, it discards the message silently. To add it, open your CF7 form editor (Contact > your form name), add [quiz "What is 2+2?" "4"] or, for a real honeypot, the Flamingo or the official CF7 Honeypot add-on. This catches a large share of basic bots without any friction for real visitors.

3. reCAPTCHA v3 (invisible, no user friction)
Google reCAPTCHA v3 runs silently in the background and assigns a score to each submission based on behavior. No checkbox or image puzzle for users. To set it up:

1. Go to the Google reCAPTCHA site (search “Google reCAPTCHA admin console”) and register your domain for reCAPTCHA v3. You will get a Site Key and Secret Key.
2. In your WordPress dashboard, go to Contact > Integration > reCAPTCHA.
3. Enter your Site Key and Secret Key, then click Save Changes.
4. CF7 will now add an invisible reCAPTCHA check to every form on your site.

4. reCAPTCHA v2 (if v3 causes false positives)
If reCAPTCHA v3 incorrectly blocks real visitors (more common on sites with low traffic, where the scoring model has less data), switch to v2. This shows the “I am not a robot” checkbox. It adds one step for users but is more predictable. Set it up the same way in CF7 > Integration, but register for v2 instead.

For most sites, reCAPTCHA v3 plus Akismet is sufficient. If you still get through spam after that, add the quiz field or the Honeypot add-on as a third layer.

Most CF7 problems in Elementor come down to a small set of repeatable causes. Here are the ones that come up most often, and how to fix each one.

The CF7 widget shows a blank or empty space in Elementor
Cause: Elementor’s live canvas sometimes does not render the form preview if the form has no content yet, or if there is a plugin conflict.
Fix: Make sure you have selected a form from the dropdown in the Content tab. If the canvas still shows nothing, save and preview the page on the front end. The form usually renders correctly on the published page even when the editor preview is blank.

Form submits but no email arrives
Cause: WordPress is using PHP mail, which most servers do not authenticate.
Fix: Install WP Mail SMTP and connect it to an authenticated email provider (Gmail, Mailgun, SendGrid, or similar). See the testing step above for details.

The form shows “There was an error trying to send your message. Please try again later.”
Cause: The server-side mail function failed. This is almost always an email delivery issue, not a CF7 configuration problem.
Fix: Same as above. Install WP Mail SMTP and configure a proper SMTP mailer. After setup, use the Email Test tab to confirm delivery before testing the form again.

The CF7 dropdown in Elementor shows no forms
Cause: No forms have been created inside Contact Form 7 yet.
Fix: Go to Contact > Add New in your WordPress dashboard, create a form, and save it. Return to Elementor and refresh. Your form will appear in the dropdown.

The CF7 widget does not appear in Elementor’s widget panel at all
Cause: The Contact Form 7 plugin is not installed or not active.
Fix: Go to Plugins > Installed Plugins and verify CF7 is activated. If it is active and the widget is still missing, deactivate and reactivate CF7. If the issue persists on an older Elementor version, install the “CF7 Widget For Elementor” bridge plugin from the plugin directory.

Styling changes in Elementor do not appear on the front end
Cause: Your theme or another plugin is loading conflicting CSS with higher specificity.
Fix: Use more specific CSS selectors in Elementor’s custom CSS or your theme’s Additional CSS (for example, use .elementor-widget-shortcode .wpcf7-form input instead of just .wpcf7-form input). You can also check your browser’s developer tools (right-click the element and select Inspect) to see which CSS rule is winning.

If you are setting up a contact form for the first time and wondering whether CF7 is the right choice, here is a plain comparison of the main options.

Contact Form 7 (free)
Best for simple contact and inquiry forms where you just need Name, Email, Message, and a Submit button. Lightweight, no bloat, and works with Elementor without any add-ons. The main limitation is the lack of a visual form builder (you edit fields using tag syntax) and poor email deliverability out of the box.

Elementor Pro built-in Form widget
If you already pay for Elementor Pro, use this instead of CF7. It is built directly into Elementor, so you get full visual control over the form layout in the same editor you are already using. It supports conditional logic, multi-step forms, and direct integrations with email services. No separate plugin needed.

WPForms (free / paid)
Better user experience than CF7 for building the form itself. The free version (WPForms Lite) includes a drag-and-drop visual builder and covers most basic contact form needs. The paid tiers add conditional logic, multi-page forms, and payment fields. A good middle ground if you want an easier setup experience than CF7 but do not have Elementor Pro.

Gravity Forms (paid only)
The best option for complex requirements: multi-step forms, conditional logic, calculated fields, payment processing, and advanced integrations. Not necessary for a simple contact form, but worth it if your forms need to do real work.

Which one to choose

• Using Elementor Free and want a basic contact form: use CF7
• Have Elementor Pro: use the built-in Form widget
• Want an easier setup than CF7 without Elementor Pro: use WPForms Lite
• Need complex logic, payments, or multi-step forms: use Gravity Forms