The Complete Guide To Creating Elementor Contact Forms

How To Create Contact Forms With Elementor

Contact forms are needed on every website! No matter what type of site you have contact forms can generate leads, build connections, relationships, let users notify you of issues with your site, and everything else in-between. 

Creating contact forms in WordPress doesn’t need to be complicated. In fact, with the Elementor page builder, it’s easier than ever!

In this article, we’ll show how to create contact forms with Elementor, look at the various options, and explore everything there is to know about contact forms within Elementor. 

Without further ado, let’s get started!

How To Create A Contact Form With Elementor

Now before we show what you need to do first, you need to ensure you have both Elementor and Elementor Pro installed. 

Wait! What? I need the paid version of Elementor? Yes, and no. First, we’re going to show you with the core Elementor contact widget, which is only available in Elementor Pro, and then we’ll show you alternative options, including free ones. 

Step 1: Adding the Elementor Contact Widget to Your Page

First of all, open the page you want to use the Elementor Contact Form on. Your homepage and about page make an excellent place for a contact form if you aren’t sure where to put the contact form on your site. 

Once you have opened your page in Elementor in the editor pane you should use the contact form widget like so:

Elementor contact form widget

You may be thinking, but where is the contact form widget? In Elementor, this is the widget called “Form.” 

Drag the form widget onto your page, and you’ll see the basic output of a contact form like this:

basic contact form widget sample for elementor

Step 2: Setting Up Your Contact Form Fields

There’s a myriad of settings for the form widget in Elementor, and we’ll explore every one of those in-depth later on in the article, first let’s focus on the basics.

As you can see Elementor pre-populates your form with the necessary fields that any contact form should have and those are:

  • Name.
  • Email (after all, you’ll need this to reply!).
  • Message.

These are all you really need for a basic contact form. But how about if you want more fields? 

Do you want to know the client’s budget? Or ask pre-qualifying questions, so when you receive the message, you can quickly narrow down the leads that are suitable and the leads that aren’t? Let’s explore those in the next step. 

Step 3: Adding Fields to Your Elementor Contact Form 

To add a field to your Elementor form click “Add Item“:

adding fields to elementor contact form widget

This will create a new item in your contact form like so:

adding fields to contact form widget on elementor

As you can see, there’s a range of settings so let’s take a look at those:

  • Type — this is the type of field that you want to add to the form, there are multiple different field types including:
    • Text.
    • Email
    • Textarea.
    • URL.
    • Tel.
    • Radio.
    • Select.
    • Checkbox.
    • Acceptance.
    • Number.
    • Date.
    • Time. 
    • File Upload. 
    • Password. 
    • HTML. 
    • Hidden.
    • reCAPTCHA.
    • reCAPTCHA V3.
    • Honeypot. 

Phew! That’s a lot of field types. Most are self-explanatory, but there may be some there you’re thinking well what are they? Don’t worry, we’ll explain everything. 🙂

Next up is the “Label” option. The label is what shows above the form field on the public-facing contact form, so ensure it’s something you’re happy for everyone to see!

Then there’s the “Placeholder” setting. The placeholder is what shows in the form field when a user hasn’t entered any data. It’s useful to set the placeholder text as an example of what information you want the user to enter. 

The penultimate setting is “Required.” This is a simple toggle switch that, when enabled, won’t allow the user to submit the form without filling in the field. 

Lastly is the column width setting. Setting the column width allows you to align and stack your fields as required. For example, if you set the width to 50% and then add another field at 50%, the fields will display side-by-side. Giving you freedom in how you design your contact form with Elementor

Advanced Tab

Next are the options within the “Advanced Tab” part of the new field settings. 

setting up the contact form advanced tab

There aren’t as many options on this tab, but if anything, they are more confusing, aren’t they?

  • Default Value — This is the default value of the field, different from the placeholder. This is the value sent in the submission if no other value is set. 
  • ID — The field ID is used to save that field’s data. You don’t need to modify this. 
  • Shortcode — The shortcode can be used to retrieve the field anywhere on your page. Generally, you don’t need to use this. 

Wow! That was a lot of options, but now you know how to add a field to your Elementor contact form easily. 

Step 3: Setting Where Your Form Submissions go

In the Elementor editor, go ahead and click on “Email” to display the available options:

There are a lot of fields for the email action! Out of the box, everything is pre-filled in, so if you don’t need anything specific, you can breeze right past this and save your page. 

If, however, you want to understand more about the possibilities of the settings for your Elementor contact form submissions, read on. 🙂

Here are all the options and what they do:

  • To — The email address of which the form submission is sent to. Can be sent to multiple email addresses, enter email addresses separated by commas. 
  • Subject — The subject of the sent email with the submission, displayed in your email client. 
  • Message — Here, you can set what fields are sent from your contact form. Using the shortcodes we explored earlier when creating fields, you can set only some of these to send or to receive all fields from the submission. 
  • From Email — The email that is used for sending yourself the form submission. Ensure you whitelist the email address, so you receive all your submissions!
  • From Name — The name that is sent as the from name with your form submission. 
  • Reply-to — This field is the one that when you click “reply” in your email client that the reply goes to. By default, this is the website’s admin email, but you’ll want to change this! Click in the dropdown box and set it to the “Email field.” 
  • CC — Want anyone in the CC of the email? Enter their email address here, send to multiple email addresses (separated with commas). 
  • BCC — Need to send to a BCC? Enter their email address here, send to multiple email addresses (separated with commas). 

Next, you’ll see there’s a meta box field that contains metadata, which you can set to be sent with the form submission. 

Overall you don’t need to modify or edit this.

Then finally there’s the “Send as” option. The send option allows you to select whether to send the submitted entry as plain text or HTML (defaults to HTML). Again you don’t need to change this.

Step 4: Setting Elementor Contact Form Messaging 

Elementor’s form editor is more powerful than it initially seems to many, and one of the more advanced features is the ability to modify the messaging on a per form basis. 

Modifying the form messages allows for a more personalized feedback process to the end-user filling in your form, rather than sounding like a boring robot. But just what messages can you customize for your Elementor contact form?

First, you have to enable custom messaging, click on “Additional Options” and then click the toggle switch for “Custom Messaging” to “Yes.” 

adding custom messages to the elementor contact form widget

As you can see, there are four different messages you can edit, including:

  • Success Message — displays to an end-user once they have submitted the form, and the form was filled in correctly (e.g., no missing required fields, etc.).
  • Error Message — display to an end-user when an unknown error has occurred with submitting the form. 
  • Required Message — displays when a form field that is required hasn’t been filled in, and the form is submitted.
  • Invalid Message — displays to an end-user when something within the form submission is incorrect and can’t be sent. 

By being able to edit the messages, you can have some fun and be quirky, or if you run a corporate site, you can be more business-like, the best thing is as they are entirely editable, you can do what you want!

Step 5: Styling Your Elementor Contact Form 

You don’t want your contact form to look bland or not match your website’s branding, do you? Luckily in Elementor, custom styling couldn’t be easier. 

In the editor, if you click on the “Style tab“:

editing the contact form style tab

You’ll find a wide array of options and settings to personalize your contact form just as you need, from spacing, padding, and colors, to the size of fields, labels, inputs, buttons, and everything else. 

We’ll let you explore these options yourself, needless to say, it couldn’t be easier to use them for example if we want to change the Elementor button color we click on the “Button” drop-down to show the settings like so:

elementor contact form field button options

And you can quickly set both the background color of the button, the text color of the button, the hover color, and a whole assortment of options and settings. 

Once you’re happy with how your form is styled, it’s time for the final step! Publishing your form. 

Step 6: Publishing Your Elementor Contact Form

Now everything is set up with your contact form just the way you want it, it’s time to publish your form to the world!

It couldn’t be easier; at the bottom of the Elementor editor, click on the green “Update” and your page will be updated with your brand new contact form. 

elementor contact form updated button

Congratulations! You’ve successfully built and published a contact form with Elementor

There’s a problem though; the above only works if you’re using Elementor Pro and Elementor Pro costs from $49, which, while a bargain for what is included, not everyone has $49 to spend on a plugin. 

Luckily there’s a range of free alternative contact form solutions you can use alongside Elementor

Top 4 Elementor Friendly Contact Form Plugins 

1. Contact Form 7

Contact form 7 plugin in wordpress.org

Contact Form 7 is one of the most popular contact form solutions for WordPress. Completely free and with over 5 million active installs! It’s maintained and supported by its developer and is often updated. 

While simple in terms of functionality, if all you need is a simple contact form, it’s well worth checking out.

You can use the built-in shortcodes to place any created form on your Elementor form quickly and easily. 

If you want more control over the styling, our very own Ultimate Addons for Elementor has a Contact Form 7 Styler Widget.

Price: Free

2. WPForms

wp forms download page

WPForms is one of the newest players in the market and yet already has a mighty impressive 3+ million active installs. 

A freemium plugin which means that the base version is free and then there is a premium version available. While the free version offers a lot of the features you’d want and is fine for creating a basic contact form, many features are locked out to the Pro version. 

Just like Contact Form 7, you can use the WPForm shortcodes for placing your contact form on an Elementor page (or any page for that matter on your site). 

And Ultimate Addons for Elementor also has a custom styling widget for WPForms as well! 

Price: Free version and Pro version from $79. 

3. Caldera Forms

caldera forms homepage

Caldera Forms is like WPForms, a freemium WordPress forms plugin. With 200,000+ active installs, it offers a vast array of options in the free version, with even more in the premium version. 

The user interface isn’t the simplest to follow for less advanced users. However, its robust feature set offered for free more than makes up for this. 

Like the other plugins mentioned here, your Caldera Forms form can easily be placed on your Elementor Contact Forms page quickly and easily. 

And you’ll be pleased to know our very own Ultimate Addons for Elementor also has a Caldera Forms Styler, perfect for making your form match your brand. 

Price: Free version and Pro version from $99. 

4. Forminator

forminator pro homepage screenshot

Forminator is a freemium WordPress forms plugin by WPMU DEV, the developers of the popular Smush plugin, which has over 2 million active installs!

With an easy to use user interface, Forminator makes a great alternative to more well-known form plugins. And did we mention it comes with built-in PayPal and Stripe support? 

Like the other plugins we mention here, it’s a breeze to add Forminator to your Elemenetor powered page. 

What’s more, if you purchase the Pro version of Forminator, you’ll also get access to hosting for 3 websites, Smush Pro, Backups, and a whole host of other features for unlimited websites! Crazy good value at just $49/month. 

Price: Free version and Forminator Pro from $49/month, including access to other plugins and hosting. 

Summary

Building a contact form with Elementor doesn’t have to be complicated or take hours; thanks to either Elementor Pro or a range of free plugins creating a contact form with Elementor is both quick and straightforward.

Do you have a preferred contact form plugin? Perhaps you’ve built your own contact forms in Elementor already? Let us know in the comments below.

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Like what you read? Leave a comment