Elementor contact form

How to Make a Free Elementor Contact Form (The BEST 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 an Elementor contact form to your website, even if you don’t have Elementor Pro.

This is a ‘no code’ method – everything is built using drag and drop. We’ll walk you through the easy steps below.

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.

You can use WPForms Lite with Elementor, or upgrade to the paid version for a ton more features.

WPForms is the best WordPress Form Builder plugin. Get it for free!

WPForms lets you stop contact form spam on your WordPress website. It stops spambots with secret form tokens, which is a lot more effective than the old-fashioned honeypot method. You can also add reCAPTCHA or hCaptcha for free if you want to make your form totally spam-proof.

The Pro version of WPForms also lets you:

Now you know why WPForms is the best contact form plugin for Elementor, let’s walk through the process of creating a contact form on your WordPress site.

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:

  1. Install the WPForms Plugin
  2. Create Your Contact Page
  3. Make Your Elementor Contact Form
  4. Publish Your Elementor Contact Form

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.

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

If the Elementor page builder’s already installed, you’re ready to make your 1st contact form.

Step 2: Create Your Contact 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 contact page title in Elementor

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

Edit 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 where you want the form to appear. It’s that easy!

New Elementor contact form

Now we’re ready to make your form. This will take less than 5 minutes.

Step 3: Make Your Elementor Contact Form

Next up, we’re going to make a form using a contact form template in WPForms.

If you’re considering WPForms Lite vs Contact Form 7, keep in mind that WPForms Lite is a lot easier to use. It also has a ton more functionality, so you can make complex forms in a few minutes.

All set? Let’s start building our form!

In the WPForms panel on your page, click the Create a Form button.

Elementor create a form

The WPForms form builder will pop up. Now you can type in a name 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. You can upgrade to Pro if you want to add 100+ extra form templates to your site.

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

If you want to change the settings for a field, click on it once and look to the left hand panel.

Customize your Elementor contact form fields

Go ahead and click on each field to set it up the way you want it.

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.

Elementor Form Confirmation Message

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.

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

Step 4: Publish Your Elementor Contact Form

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! Now made a custom Elementor contact form without writing any HTML or shortcodes.

Published Elementor contact form

And that’s it! You made a free contact form for your site with Elementor!

You can change the text color, typography, and background color using CSS. If you’d like some more help with styling your page, check out these articles:

These guides will help you get your Elementor contact form looking exactly the way you want it.

Create Your Elementor Contact Form Now

Next Step: Fix Your Contact Form Emails

Elementor contact form not working? Sometimes there can be problems with email delivery when using a contact form. This can be a problem with all websites, not just sites built with Elementor.

Here’s the good news: this is an easy problem to fix. Check out how to fix Elementor contact forms not sending email.

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes Elementor integration 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

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.