How to Add Contact Form 7 to Elementor Easily in 2025

When I first tried to figure out how to add Contact Form 7 to Elementor, I thought it’d be a quick five-minute task, but it wasn’t. I had the form ready, Elementor open, and zero clue what to do next. If you’ve ever been stuck like that, trust me you’re not alone.

This guide is for anyone, especially if you’re using the free version of Elementor, and want a simple, clean way to add a contact form that actually works. I’ve gone through trial and error so you don’t have to. In just a few steps, I’ll show you exactly how to connect Contact Form 7 to Elementor without the overwhelm. Let’s make your form live and stress-free!

Why Add Contact Form 7 to Elementor Instead of Using Elementor Forms?

I first tried Elementor’s builtin form—only to learn it’s locked behind Pro. That left me asking, can you use Contact Form 7 with the Elementor free version? The answer: absolutely. CF7 is free, rock‑solid, and works via a simple shortcode.

You can use Contact Form 7 with the Elementor free version by dropping its shortcode into the Shortcode widget.

Feature	CF7 (Free)	Elementor Forms (Pro)
Cost	Free	Paid
Styling	Shortcode + plugin	Drag‑and‑drop controls
Best For	Lean, budget builds	Visual form design

You can use Contact Form 7 with the Elementor free version by dropping its shortcode into the Shortcode widget.I stick with CF7 for its simplicity and speed. Once you know how to add Contact Form 7 to Elementor, you get a flexible form without paying for Pro.

What You Need Before You Start

Before we dive into the steps, let’s make sure you’ve got the right tools. You’ll need two plugins:

• Elementor (the free version is fine)
• Contact Form 7

You only need Elementor (free) and Contact Form 7 to get started. For easier styling, a plugin like ElementsKit or PowerPack helps too.

If you want more design control without writing CSS, I recommend adding a plugin that includes an Elementor widget for Contact Form 7. I’ve had good results with PowerPack and ElementsKit, but feel free to pick the one that fits your workflow.

Also, a quick tip from experience: keep all your plugins updated. One time, my form just stopped showing up and it turned out the CF7 plugin needed an update. Now, I make plugin updates part of my regular routine.

Personally, I stick with CF7 and ElementsKit on most of my client sites. It’s a combo that balances freedom and simplicity plus it plays nicely with the free version of Elementor.

Step-by-Step: How to Add Contact Form 7 to Elementor

I used to think adding a form in Elementor would be plug-and-play. But when I tried to use Contact Form 7, I quickly learned it wasn’t as obvious as dragging in a widget. If you’re feeling stuck too, don’t worry—these quick steps will show you exactly how to add Contact Form 7 to Elementor, even if you’re using the free version.

The easiest way is to use the Contact Form 7 shortcode inside Elementor’s Shortcode widget.

Step 1: Create a Form in Contact Form 7

In your WordPress dashboard, go to Contact → Add New. Give your form a name and add the fields you need. For most sites, a simple Name, Email, Subject, and Message works great.

Tips for beginner: Use placeholders like [text* your-name placeholder “Your Name”] to make it user-friendly.

Step 2: Copy the Shortcode

After saving your form, you’ll see a shortcode at the top of the page something like [contact-form-7 id=”1234″ title=”Contact form 1″]. Copy that shortcode. You’ll need it in the next step.

Step 3: Paste the Shortcode in Elementor Using the Shortcode Widget

Now go to the page you want the form on and edit it with Elementor.

• Search for “Shortcode” in the Elementor panel.
• Drag the Shortcode widget into your layout.
• Paste the CF7 shortcode you copied earlier.

Boom, your form appears instantly! To display Contact Form 7 in Elementor, paste its shortcode into the Shortcode widget.

Step 4: Adjust Spacing and Layout in Elementor

Your form is in, but it might look a bit plain or squished. Use Elementor’s padding and margin controls to add space. You can also center the form or add a background section to make it pop.

Mistake to avoid: I once skipped spacing and my form looked like a wall of text. Always preview on mobile!

How to Style Contact Form 7 in Elementor (No CSS Needed)

Okay, so your form is live—but let’s be honest, it probably looks… plain. That was my first reaction too. Luckily, you don’t need to write any CSS to make it look good. You’ve got two easy options.

You can style Contact Form 7 in Elementor using either a wrapper section or a plugin with an Elementor widget for Contact Form 7.

Option 1: Use Elementor’s Styling with a Wrapper

This is the fastest way. Just wrap your form inside a nicely styled section.

• In Elementor, add a section with your preferred background color or image.
• Add padding and spacing to create breathing room.
• Drop your Shortcode widget (with the CF7 form) inside this section.

You can also add a heading or a short intro to match your page design. It’s clean, flexible, and free. I usually set the section to max-width 600px and center it—it looks great on mobile.

Option 2: Use an Elementor Widget for Contact Form 7

If you want more control—like changing input styles, button colors, or field spacing—use a plugin that adds an Elementor widget for CF7.

Some popular options:

• PowerPack Lite
• ElementsKit
• Essential Addons for Elementor

These plugins give you drag-and-drop styling options right inside the Elementor editor—no code needed.

My pick? I’ve had the best results with ElementsKit. It’s lightweight, beginner-friendly, and works great with the free version of Elementor.

Which One Should You Use?

Method	Pros	Cons
Elementor Section Wrapper	Free, simple, no extra plugin	Basic styling only
Elementor Widget Plugin	Full visual control, easy styling	Adds another plugin

To style Contact Form 7 in Elementor without CSS, use a plugin that offers a CF7 widget like ElementsKit or PowerPack.

How to Fix Contact Form 7 Not Working in Elementor

Let me tell you nothing’s more frustrating than a form that looks perfect but won’t work. I remember launching a site for a client, feeling great… until I tested the form and got nothing. No email, no confirmation—just silence. It turned out to be a simple fix, but only after hours of head-scratching.

If Contact Form 7 isn’t working in Elementor, check your email settings, shortcode placement, plugin conflicts, or missing reCAPTCHA.

Here’s what to look for (and how to fix it fast):

Common Issues & Fixes

1. Emails Not Sending

This is the most common issue—and usually, it’s not Contact Form 7’s fault.

Fix:
Install an SMTP plugin like WP Mail SMTP. It forces WordPress to send emails through proper authentication, not the unreliable default method.

Use WP Mail SMTP with Gmail on most client sites—it’s free and reliable.

2. Form Not Showing in Elementor

You’ve added the shortcode, but the form’s just not there?

Fix:

• Double-check you used the correct shortcode: [contact-form-7 id=”123″ title=”Contact form”]
• Make sure it’s pasted into Elementor’s Shortcode widget, not a text box.

To fix a missing CF7 form in Elementor, always place the correct shortcode inside a Shortcode widget—not a text block.

3. Styling Not Applying

Sometimes your form shows up, but it looks broken or unstyled.

Fix:

• Clear your cache (browser + any caching plugin).
• Try using a plugin like ElementsKit to gain better style control.
• Or use a wrapper section in Elementor to isolate design.

4. reCAPTCHA Issues

Using reCAPTCHA with CF7? It might block submissions if set up wrong.

Fix:

• Go to CF7 → Integration and double-check your site keys.
• If you’re using v3, try v2 (checkbox style)—it’s easier to troubleshoot.

I once lost two hours to a reCAPTCHA issue because I had a typo in the site key. Double-checking it saved the day.

Quick Troubleshooting Checklist

• Is your shortcode placed in the Shortcode widget?
• Are both Elementor and CF7 updated to the latest version?
• Using SMTP plugin to send email reliably?
• Have you cleared the browser and site cache?
• Checked reCAPTCHA keys if enabled?

To fix Contact Form 7 not working in Elementor, update your plugins, use SMTP for email, and check shortcode placement and reCAPTCHA settings.

My Personal Experience and Final Tips

I’ve set up over 30 WordPress sites, and Contact Form 7 is still my go-to especially when working with the free version of Elementor. It’s reliable, lightweight, and just works.

If you’re wondering what combo I trust the most: it’s CF7 plus the ElementsKit plugin. It gives me styling freedom without writing a single line of CSS. For layout, I keep it simple, center the form in a styled section with enough padding. Clean, mobile-friendly, and effective.

Here are three quick tips I’ve learned the hard way:

• Always paste the shortcode into the Shortcode widget, not a text box.
• Keep your plugins updated—once, a missed update caused a form to vanish on launch day.
• Don’t chase perfection. A simple layout with clear labels works better than over-design.

This setup saves time and keeps clients happy every single time.

FAQs — about How to Add Contact Form 7 to Elementor

You’re All Set: Now Add Contact Form 7 to Elementor Like a Pro

Adding Contact Form 7 to Elementor might feel tricky at first—but once you know the steps, it’s honestly simple. Just drop in the shortcode, style it a bit, and you’re good to go. Whether you’re building a basic contact page or setting up client sites, this method works every time.

If you’re using the free version of Elementor, this is hands down the easiest way to get a working, styled contact form without paying extra.

My advice? Give it a try. Follow the steps above, test your form, and tweak the design until it feels right. And if something doesn’t work, don’t stress—you’re not alone. Just check the troubleshooting section, or drop your question in the comments.