Elementor contact form

How to Make a Free Elementor Contact Form (The Easy Way)

Do you want to create a free Elementor contact form? A contact form will let your visitors get in touch even if they don’t know your email address.

In this tutorial, we’ll show you the best way to add a contact form to your Elementor page. This option works great with all versions of Elementor, and it’s completely ‘no-code’!

Create Your Elementor Contact Form Now

How Do I Set Up an Elementor Contact Form?

The easiest way to set up an Elementor contact form is with the WPForms plugin. The free version of Elementor doesn’t include form-building capabilities.

However, WPForms Lite integrates with Elementor, allowing you to build and add forms to your landing pages for free.

That means you can create an Elementor ‘contact us’ page with a few clicks.

elementor add a wpforms contact form

To add a contact form with Elementor, you can use the free WPForms plugin, or upgrade to the paid version to get a ton more features!

The Pro version of the WPForms form builder plugin lets you:

If you want to know exactly what you’ll get in each version, you can learn the differences between WPForms Lite vs Pro.

Elementor also lets you build forms, but you need to get the Pro version for that. You can learn more about building forms in Elementor vs WPForms in our detailed comparison.

Now, let’s go ahead and walk through the process of creating a contact form with WPForms and Elementor.

How to Make a Free Elementor Contact Form

This tutorial will show you how to create an Elementor form using WPForms Lite or Pro. Here are the steps we’re going to work through:

Let’s get the plugin set up first.

Step 1: Install the WPForms Plugin

The first thing you’ll want to do is install the WPForms plugin. If you need help with this, check out this easy tutorial on how to install a WordPress plugin. You don’t need to pay anything to enable the WPForms Elementor integration.

Now that WPForms is installed be sure to click the Activate button. If you’re using WPForms Lite, you can click Activate on the plugins page to start.

Active your Elementor contact form plugin

And if the Elementor page builder’s already installed, you’re ready to make your 1st contact form (in less than 5 minutes!).

Step 2: Make Your Elementor Contact Form

The simple contact form template has all of the fields you need to get messages from your website. If you want, you can add extra functionality like dropdowns and checkboxes in the user-friendly form builder.

First, in the WPForms setup screen, type in a name for your form at the top.

Name your Elementor contact form

Scroll down a little, and you’ll see the form templates.

If you have WPForms Lite, you’ll have a few templates to choose from to get you started. Upgrade to Pro if you want to add 100s of extra form templates to your site. These templates include ready-made forms for customer service, marketing, and other

For now, let’s use the simple contact form template. Click on it to open it in your browser.

Elementor contact form template

Now you’ve chosen a template, the WPForms builder will open.

The WPForms user interface is designed to be super easy for anyone to use. On the left, you can see all of the fields that are available to add to your contact form. On the right, you can see a live preview of your form.

Elementor contact form builder

If you want to customize the template, just drag any form field from the left hand panel to the form on the right. You can add dropdown lists, multiple-choice questions, and more.

You can also drag fields up and down to move them around on your form.

If you want to open the field settings, click on the field once in the builder. When you look to the left hand panel, you’ll see the settings next to the form preview.

Customize your Elementor contact form fields

Go ahead and click on each field to set it up the way you want it. When you’re done, click Save at the top.

Step 3: Set up Elementor Form Notifications

Now let’s check the messages that will be sent when the form is submitted. In the form builder, click Settings, and then click the Notifications menu item on the left.

On the right, you can see the notification email that will be sent to you when your form is submitted. You can customize the email here if you want to.

Elementor contact form notifications

Did you notice that the email will be sent to {admin_email}? That’s a placeholder for the Administrator email address in WordPress.

You can delete {admin_email} and type in your business email address here, or change the admin email address in WordPress if it’s wrong.

Step 4: Set up Elementor Form Confirmation Messages

Next, click Confirmations. On this screen, we can customize the message that shows up on the front end when the form is submitted.

This is optional, so you can just leave the default message if you’re happy with it.

Elementor form builder confirmation message

And that’s it! It’s time to click the Save button at the top. You can close the form builder by clicking the X at the top-right of the form builder window.

Great job! Your Elementor form is ready, and we just need a place to put it.

Step 5: Create Your Elementor Contact Us Page

In this step, we’re going to build a custom Contact Us page for your Elementor website.

From the WordPress dashboard, click Pages and click the Add New button.

Add Contact Us page for Elementor contact form

Go ahead and type your title at the top.

add the contact page title in elementor wpforms

Now let’s switch to Elementor. Click the blue Edit with Elementor button at the top of the screen.

edit wpforms contact page with elementor

Wait a few seconds for Elementor to load up in your browser.

On the left, you’ll see different elements that you can add to your page. In the Basic section, you’ll see an icon labeled WPForms.

Go ahead and drag it onto your page, then click on the dropdown to select the form you just created.

add wpforms into elementor form

Great job! And we’re done using the form builder. All we need to do now is publish the Contact page.

Step 6: Publish Your Elementor Contact Us Page

Are you wondering how to add a contact form page with Elementor?

It’s simple: you can publish your Contact page in exactly the same way that you publish regular pages in Elementor.

All you need to do is click the green Publish button at the bottom.

Publish your Elementor contact form

Finally, click Have a Look to see your contact form on your website.

View Elementor contact form page

And that’s it! Your Elementor contact us page is live and ready to get responses.

Published Elementor contact form

Customize Your Elementor Contact Forms

So now that you know all about the awesome Elementor widget WPForms has, you can check out some of the other things the plugin can do to help your site’s forms.

If you want to customize your form, WPForms lets you easily change the text color, typography, and background color using CSS.

If you’d like more info, check out these articles on contact form design and styling:

And that’s it! Now you know how to make Elementor contact forms the easy way.

Next, explore the features in WPForms Pro to learn how to make advanced forms like:

Create Your Elementor Contact Form Now

Fix Elementor Contact Form Notification Emails

Are you having trouble receiving Elementor contact form submissions by email? It’s easy to fix this problem so you always get your email notifications.

Check out this guide to fix Elementor contact forms not sending email.

Don’t forget! Now you’ve made an Elementor form, you’ll also want to make a form that connects to your favorite email marketing service. You can do that easily in WPForms Pro, which comes with addons for:

  • Drip
  • Mailchimp
  • Constant Contact
  • AWeber
  • And more.

And if you want to learn about some additional form builders for Elementor, check out this article on contact form plugins that work well with Elementor.

Ready to build your form? Get started today with the easiest WordPress contact form plugin. WPForms Pro includes tons of premium addons and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Following these instructions, I created a form, but it doesn’t appear in the dropdown menu in elementor once I am adding it to the webpage. How can I fix this issue?

    1. Hi Maria- Sorry to hear about the trouble you are facing here! This would require some troubleshooting and additional information.

      If you are a paid user, you can create a ticket here or if you are using Lite version we provide complimentary support here

      Thanks!

  2. I have successfully gotten email notifications from my form to direct to another email address I have that isn’t affiliated with the domain name that the form is on, but when I try to point the notifications to the email address for my domain it never shows up. I am able to receive other emails at that address just not notifications from the form. I have the WP Mail SMTP plugin set up, and I absolutely can’t figure out why the email notifications won’t show up in my domain’s email account. Could it have anything to do with the sending and receiving email addresses having the same domain name (even if they’re different addresses)? Any troubleshooting advice is greatly appreciated.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.