### [How to Make a Free Elementor Contact Form (The Easy Way)](https://wpforms.com/how-to-elementor-contact-form/)

**Published:** August 30, 2023
**Author:** Hamza Shahid

**Excerpt:** Do you want to create a free Elementor contact form?

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

In this tutorial, I'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'!

**Content:**

Do you want to create a free Elementor contact form?

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

In this tutorial, I’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’!

## How to Make a Free Elementor Contact Form

Elementor makes it easy to design a contact page, but it won’t give you a working contact form for free on its own. You’ll pair it with a free form plugin to handle the form itself, and the whole setup takes about five minutes from start to finish.

The reason you need a second plugin comes down to cost. Elementor’s built-in form widget is locked behind Elementor Pro, the paid version, and free Elementor doesn’t include a contact form at all.

So instead of upgrading just to collect messages, you’ll add one for free with WPForms, which works with every version of Elementor. If you want the full breakdown, here’s [how Elementor Forms compares to WPForms](https://wpforms.com/elementor-forms-vs-wpforms).

- [Step 1: Install and Activate WPForms](#install-plugin)
- [Step 2: Get the Elementor WordPress Plugin](#step-2-get-the-elementor-wordpress-plugin)
- [Step 3: Make Your Elementor Contact Form](#step-3-make-your-elementor-contact-form)
- [Step 4: Set Up Form Confirmation Email & Message](#step-4-set-up-form-confirmation-email-message)
- [Step 5: Create Your Elementor Contact Us Page](#step-5-create-your-elementor-contact-us-page)
- [Step 6: Style and Publish Your Elementor Contact Us Page](#step-6-style-and-publish-your-elementor-contact-us-page)
- [Make Your Elementor Contact Form Spam-Proof](#make-your-elementor-contact-form-spam-proof)

### Step 1: Install and Activate WPForms

To add a contact form to Elementor for free, you’ll pair it with a form plugin, and [WPForms](https://wpforms.com/pricing/) is the one I reach for every time.

It’s the most beginner-friendly form builder for WordPress, and the drag-and-drop builder makes sense the moment you open it.

What I like most is that the free WPForms Lite version is more than enough for a contact form. The [WPForms Elementor integration](https://wpforms.com/integrations/elementor) then lets you drop any form you build straight onto an Elementor page.

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](https://wpforms.com/wp-content/uploads/2023/05/add-new-plugn-1.png)Now, search for WPForms and click on **Install** when you find it. The installation will take only a few seconds.

![Installing WPForms](https://wpforms.com/wp-content/uploads/2020/09/installing-wpforms.png)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](https://wpforms.com/wp-content/uploads/2020/09/activate-wpforms.png)Great! WPForms is now ready to use on your site. Before creating your first form, let’s install Elementor.

[Try WPForms for Free](https://wpforms.com/pricing/)

### Step 2: Get the Elementor WordPress Plugin

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](https://wpforms.com/wp-content/uploads/2020/09/installing-elementor.png)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](https://wpforms.com/wp-content/uploads/2023/05/add-new-form-updated.png)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](https://wpforms.com/wp-content/uploads/2020/09/name-your-form.png)Scroll down a little, and you’ll see the form templates. If you’re using WPForms Lite, you’ll have dozens of free templates to choose from.

Later on, you can [upgrade to Pro](https://wpforms.com/pricing/) to access [2,100+ WordPress form templates](https://wpforms.com/templates/) for [customer service](https://wpforms.com/templates/category/customer-service/), marketing, and various other categories.

Because we need a contact form, the free [Simple Contact Form Template](https://wpforms.com/templates/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](https://wpforms.com/wp-content/uploads/2023/11/Use-simple-contact-form-template.png)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](https://wpforms.com/wp-content/uploads/2020/09/simple-contact-form-.png)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 and multiple-choice questions and 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. The settings will appear next to the form preview in the left-hand panel.

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.

![Save form](https://wpforms.com/wp-content/uploads/2024/04/save-form.png)Creating a signup form instead? We’ve got a separate tutorial for [creating a custom Elementor signup form](https://wpforms.com/how-to-create-a-custom-signup-form-in-elementor/).

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](https://wpforms.com/how-to-connect-elementor-forms-to-google-sheets-without-zapier/)!

### Step 4: Set Up 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](https://wpforms.com/wp-content/uploads/2018/09/notifications-settings.png)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](https://wpforms.com/how-to-setup-a-free-business-email-address/) here, or [change the admin email address in WordPress](https://www.wpbeginner.com/beginners-guide/how-to-change-the-wordpress-admin-email/) 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](https://wpforms.com/wp-content/uploads/2023/02/WPForms-Confirmations.png)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 to publish it to make it go live and start collecting information.

### Step 5: Create Your Elementor Contact Us Page

In this step, we will build a custom Contact Us page using Elementor. From the WordPress dashboard, click on **Pages** and then press the **Add New** button.

![Add Contact Us page for Elementor contact form](https://wpforms.com/wp-content/uploads/2020/09/elementor-contact-form-add-contact-page.png)Go ahead and type your page title at the top. After that, click on the blue **Edit with Elementor** button.

This will launch the Elementor page builder interface, where you can add a contact form and customize other elements of the page.

![Editing with Elementor](https://wpforms.com/wp-content/uploads/2020/09/editing-with-elementor.png)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, which you can use to add the form you’ve created earlier.

![Use the WPForms widget in Elementor](https://wpforms.com/wp-content/uploads/2020/08/elementor-add-wpforms-widget-3.png)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](https://wpforms.com/wp-content/uploads/2020/08/elementor-widget-select-form-4.png)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 6: 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](https://wpforms.com/wp-content/uploads/2020/08/elementor-wpforms-widget-style-options-2.png)Under this tab, you’ll see the many **Themes** provided that have the background image, colors, and other styling options ready-made for you.

![](https://wpforms.com/wp-content/uploads/2023/08/Elementor_StyleThemes-1024x426.png)Or, you can use the options below it to manually change the styles of your field, label, or button.

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](https://wpforms.com/wp-content/uploads/2020/08/button-color-elementor-1.png)You can access even [more advanced options](https://wpforms.com/how-to-customize-wordpress-forms-in-elementor/) 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](https://wpforms.com/wp-content/uploads/2020/08/elementor-wpforms-widget-advanced-options-5.png)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](https://wpforms.com/wp-content/uploads/2020/08/publish-elementor-form-page-2.png)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](https://wpforms.com/wp-content/uploads/2020/09/wpforms-published-with-elementor.png)[Create Your Free Elementor Contact Form](https://wpforms.com/pricing/)

### Make Your Elementor Contact Form Spam-Proof

A public contact form will attract spam sooner or later, so locking it down before the bots find it saves you a cleanup later. The good news is that every WPForms form comes with [built-in spam protection](https://wpforms.com/features/spam-protection) turned on by default.

This includes a hidden anti-spam honeypot that catches basic bots without making your visitors solve an annoying puzzle. If your form starts pulling in more spam than the default protection can handle, you can add another layer.

WPForms also supports a modern anti-spam token, reCAPTCHA, hCaptcha, and Cloudflare Turnstile on its paid plans, so you can pick the method that fits your audience.

That protection from day one is a big reason to go with WPForms here. A contact form is one of the easiest targets on your site for bots, and the honeypot quietly handles most of them in the background.

For Elementor users specifically, here’s how to [block spam on your Elementor forms](https://wpforms.com/how-to-use-akismet-with-elementor-forms) with Akismet.

### FAQs about Creating an Elementor Contact Form

Elementor contact forms come up a lot in our comments and support requests. Here are answers to the questions readers ask most.

#### Does Elementor have a contact form?

Yes, but only in the paid version. Elementor’s form block is part of Elementor Pro, so the free plugin on its own won’t let you build a contact form.

The good news is you can add one for free using the WPForms block instead. You’ll need to have both [WPForms and Elementor](https://wpforms.com/how-to-make-a-multi-step-form-in-elementor/) installed to access the WPForms block while editing your page in Elementor.

#### How do I add a contact form in Elementor for free?

To add a contact form using the free version of Elementor, you integrate a plugin like WPForms. First, install and activate the WPForms plugin from your WordPress dashboard. Once activated, create a form using the WPForms builder, then drag the WPForms block onto your Elementor page and select your form.

#### How do I create a form in Elementor?

Creating a form in Elementor can be easily done with the WPForms plugin. Install WPForms from your WordPress plugin section and activate it. Then use the WPForms drag-and-drop interface to build your form before adding it to any Elementor page.

#### How do I create a custom contact form in Elementor?

WPForms is a great option for creating a custom contact form in Elementor because of its flexibility and ease of use. After installing and activating WPForms, open the plugin and select **Add New** to create your custom form.

Customize your form by adding or removing fields according to your needs. Once you’re done, save the form. In Elementor, add the WPForms block on the page you’d like the form on, select your form, and publish the page.

### 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](https://wpmailsmtp.com/elementor-form-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](https://wpforms.com/best-contact-form-plugins-for-elementor/) to improve user engagement on forms and eventually your lead generation.

[Get WPForms for Free](https://wpforms.com/pricing/)

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** contact form, elementor

---