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

Editorial Note: We may earn a commission when you visit links on our website.

Do you want to create a free Elementor contact form?

A contact form is vital for all kinds of websites. You can collect the exact information you need for your leads by including appropriate fields within your form, ensuring effective communication.

Elementor allows you to build a contact us page very easily, but you’ll need more than just Elementor to add a contact form for free on your site.

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

Create Your Elementor Contact Form

Does Elementor Have a Contact Form?

Yes, Elementor has a contact form block available in the Pro version. You can use this block to easily add a form to your page while you’re editing the page in Elementor. While Elementor’s form block is only available for paid users, you can use the WPForms block for free. You’ll need to have both WPForms and Elementor installed to access the WPForms block in Elementor.

In the steps below, we’ll walk you step-by-step through the process of creating a contact form in Elementor without paying a penny.

How to Make a Free Elementor Contact Form

We’ll start by installing the needed plugin first.

Step 1: Install the WPForms Plugin

The first thing you’ll want to do is install the WPForms plugin. To do this, open your WordPress dashboard and navigate to Plugins » Add New.

Add new plugin

Now, search for WPForms and click on Install when you find it.

Installing WPForms

The installation will take only a few seconds. Once that’s done, the Install button will now read Activate. Press Activate to finish setting up WPForms on your site. It’s that simple!

Activate WPForms

Great! WPForms is now ready to use on your site.

Before proceeding to create your first form, let’s also install Elementor.

Step 2: Install Elementor

You can install Elementor by following the exact same steps as highlighted above. Simply go to Plugins » Add New, look for Elementor, and install it.

Install Elementor

With the installations out of the way, you can now go ahead and create your contact form, as we show in the next step.

Step 3: Make Your Elementor Contact Form

You can immediately start creating your contact form by navigating to WPForms » Add New.

Add new form

This will load up the WPForm builder in a few seconds. Start by naming your form so you can easily identify it if you later need to make any edits.

Naming your form

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

If you’re using WPForms Lite, you’ll have dozens of free templates you can choose from to make form-building super quick and easy. Later on, you can upgrade to Pro to access 1,644 WordPress form templates. These templates include ready-made forms for customer service, marketing, and various other categories.

Because we need a contact form, the free Simple Contact Form Template is ideal for our purposes in this post. You can search for this template in the search box and click on the Use Template button when it appears on your screen.

Use simple contact form template

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

Simple contact form

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.

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.

Creating a signup form instead? We’ve got a separate tutorial for creating a custom Elementor signup form.

There’s all sorts of conveniences you can enjoy with WPForms. For instance, you can even use it as a gateway to connect Elementor Forms with Google Sheets!

Step 4: Set Up Elementor Form Confirmation Email & Message

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.

Accessing a form's notifications settings

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.

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.

Confirmation settings in WPForms

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 page to put it on.

Step 6: Create Your Elementor Contact Us Page

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

From the WordPress dashboard, click on Pages on the sidebar and then press the Add New button.

Add Contact Us page for Elementor contact form

Go ahead and type your page title at the top.

After that, click on the blue Edit with Elementor button to launch the Elementor page builder interface, where you can add a contact form and customize other elements of the page.

Editing 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. Look under the Basic section to find the WPForms block.

Use the WPForms widget in Elementor

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

Selecting an existing form from the WPForms Elementor widget

As soon as you select the form, it will appear on the page.

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

Step 7: Style and Publish Your Elementor Contact Us Page

Publishing the contact page is a breeze with Elementor. But did you know that you can also style your form using Elementor’s WPForms block options?

To do that, click on the area around the embedded form on your page to open block options on the left-hand pane. Then click on the Style tab.

Opening the Style options for the WPForms widget in Elementor

Under the Style menu, you’ll find several settings associated with different aspects of your form design. You can use these options to change your field, label, or button styles.

For instance, we used the Button Styles settings to increase the size, border radius, and color of the button in just a few clicks.

Button colors options in Style tab

You can access even more advanced options by clicking the Advanced tab. This includes settings for form layouts, motion effects, page backgrounds, and more.

Opening the Advanced options for the WPForms widget in Elementor

You can learn more about styling forms in Elementor in our dedicated guide.

When you’re done with customizing the form styles, it’s time to publish your form. Simply click on the Publish button at the bottom toolbar.

Publish Elementor page button

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

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

WPForms published with Elementor

Create Your Elementor Contact Form

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.

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.

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.