Add A Contact Form With Elementor: 3 Easy Ways To Do It

Ok, so you are using Elementor to create your stunning new website, but now you are stuck trying to add a contact form!

I have been building quite a few of my client’s new sites with Elementor, so I had exactly the same problem and asked myself

“How Can I Add A Contact Form Using Elementor?”

Ready for 3 different options to do this. All of them are easy but depend on if you want or need extra plugins. Including Elementor Pro

1. Elementor Pro: The Simplest & Cleanest Solution

I am always teaching my clients best practices and trying to hold them back from blowing up their websites.

And one of my biggest mantras is “less plugins”. The less plugins you need to use, the fewer updates you will have. The less hacking potential, the fewer conflicts, the fewer problems.

So, when faced with the option of more plugins or less, I always go with less.

And if you are using Elementor, the obvious, most compatible plugin option you have is Elementor Pro.

If you want to seriously and completely design your website (header, footer, blog pages, and add lots of stunning elements) then this is an easy choice. It is quite cheap for what you get and you get Elementor Forms.

This enables you to add anything from a simple contact form to a more complex email signup form and more.

Check Out Elementor Pro 2.0 Here

Let’s jump straight to where I the Elementor team show you how simple a Contact Form is to make and customize:

2. WPForms Plugin – Integrates Easily With Elementor

Another option I have been checking out is WPForms. One of my clients loves this form builder over the usual Contact Form 7 (more on that below – as it is probably the number one plugin for such things).

Although they have a lame bear as a mascot (just seems cheesy to me) their builder and integration is really powerful.

1. First let me show you what their simple contact form (A default template they have) looks like:

WPforms simple contact form (default out of the box in the plugin)

You can load this from their starting page and then just name your form (or accept the default) and then hit Save in the top right (orange button).

2. You can also easily set up the message that goes to your email via the form (something I find really complex and confusing in Contact Form 7).

Below is what that looks like out of the box, which should be about right for 99% of you. But you can easily customize it (change the subject, the email – which defaults to the WordPress Admin email in the Settings page).

Customizing the email in WPForms

3. Now you have the form created and are ok with all the settings. All you need to do is add it to the Elementor Page.

Just choose the WPForms element in Elementor and drag it into place.

Elementor WPforms widget

Note: Yes! There is a built-in Element from WPForms, not always the case with other plugins.

4. With the element in place, now choose your contact form from the dropdown list (it will have the name you gave it when you created it.

Now click Apply below the dropdown. Easy as pie! You have a contact form.

I know, it seems like a lot of steps, but if you accept the defaults (which are normally fine) it’s dead simple.

Here is what it looks like:

3. Contact Form 7 – The Hardest Option

Is this option impossible. No.

It’s just not the simplest. So, unless you absolutely have to use Contact Form 7, I don’t suggest going down this path as it requires either messy shortcodes or another plugin.

And even then it’s not the cleanest or simplest plugin to use. I use it a lot, so I should know. But remember, I am a programmer by trade, so messy is something I am used to :>

1. First thing you need to do is grab the plugin

2. Now you need to create your first form.

This is what it looks like – a simple contact form with name, email, subject and message.

It’s probably enough for most people, but if you need to add elements, you can use the buttons at the top of the text field. And then cut and paste them into the right spot.

The problem with this form builder is that it is text based, messy and prone to error. Unlike WPForms above, which is a visual builder and far easier to work with. Unless you are down with HTML that is :>

3. If you are happy with the form, I recommend you now check the Mail tab to ensure the email and other mail settings are fine. Especially the To Email.

4. Now you have to paste the shortcode into an Elementor text element. This is the cleanest way of adding your form.

You will find your shortcode in the blue bar above the form editing area (see below). Copy this and then paste it in the elementor element.

Optional: Contact Form 7 Plugin For Editing The Form in Elementor

Because this method above is so messy and hard to edit, there are some plugin developers out there helping us. They have created a plugin to connect Elementor with Contact Form 7.

Rather than walk you through them all and how to use them, I am just going to list the ones that I have found below. You can then investigate and work out if you want to use them. They are not necessary, but are helpful if you want to style your form.

1. Contact Form7 Widget Plugin (Void Themes)
2. Contact Form 7 Styler Plugin (Elementor Addons)
3. Contact Form 7 Widget Plugin (Premium Addons)

There might be a whole lot more but just be aware that not all of them are always maintained, so be sure to check the Last Updated date on the right (if you are on the WordPress plugin page) to see when it was last updated. Why? Because unmaintained plugins can be bad for the health of your website :>