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

elementor contact form

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 the same problem and asked myself

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

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

1. Elementor Pro Contact Form: The Simplest & Cleanest Solution

It is not surprising that I would tell you to use Elementor Pro Contact Form because it means less plugins.

I always teach my clients best practices and try to hold them back from blowing up their websites.

And one of my biggest mantras is “fewer plugins.” The fewer 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 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 thoughtfully and thoroughly design your website (header, footer, blog pages, and add lots of stunning elements) then this is an easy choice. It is pretty 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.

Check Out Elementor Pro 2.0 Here

The Elementor Pro Contact Form includes an insane range of features, starting with the simple contact form and taking it to the next level from there.

You can adjust all the usual Elementorsettings like:

  • Style
  • Layout
  • Size

But on top of that, you can do the following with the Contact Form from Elementor Pro:

  • Add custom fields to your contact form
  • After form submit actions
  • Collecting the form data on your website
  • Analysing your form data
  • Submitting your form data to an email service
  • Multi column forms
  • Multi-step forms

Savings With Elementor Pro

This list is quite extensive. So, you can forget about having to buy another form like Ninja Forms (which you normally need for many of these features) and you might not even have to buy a specific email conversion package like OptinMonster or Thrive Leads.

It is quite an amazing set of features for a page builder plugin!

The Elementor team show you how great the Elementor Pro Contact Form is in the video below:

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

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

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

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.

contact form 7 menu

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 :>

contact form 7 default form

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.

contact form 7 email settings


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

contact form 7 shortcode

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.

elementor text element with contact form 7 shortcode

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 :>

About the Author Ashley Faulkes

Ashley is obsessed with SEO and WordPress. He is also the founder of Mad Lemmings. When he is not busy helping clients get higher on Google he can be found doing crazy sports in the Swiss Alps (or eating too much chocolate - a habit he is trying to break).

follow me on:
Malcare WordPress Security