How To Configure Elementor Form To Capture Leads

December 14, 2020Tutorial

Incorporating a form into your WordPress website is crucial. No matter what type of form you have, they are among the most effective sources for a business to establish relationships with clients. Luckily, there’s a plugin called Elementor that offers a Form widget, allowing you to add customizable forms to your site easily.

With the Form widget, you can create personalized forms tailored to your specific needs. You have the flexibility to customize various aspects, such as form fields and where users are directed after submitting the form.

In this tutorial, we’ll guide you through the process of creating a contact form and integrating it into your website using Elementor. We’ll cover the steps from adding the form to your desired page to customizing it to match your website’s design and functionality.

Towards the end of the tutorial, we’ll also explore a solution for capturing and storing the form submission data in a database. This ensures that you have access to valuable information provided by users through the form, allowing you to effectively manage and utilize the data for your business or website needs.

Key Takeaways

  • Explore adding an Elementor form widget to improve user interaction and website performance.
  • Learn to configure Elementor form according to your specific needs and customize various aspects such as form fields, submission actions, and more.
  • Discover creating and integrating a contact form using Elementor, covering steps from adding it to your page to customizing its design.
  • Additionally, style the Elementor form to match your website’s design and functionality, ensuring it suits your needs perfectly.
  • Towards the end, you will explore a solution for capturing and storing form submission data in a database, ensuring access to valuable user information for business or website needs.

How To Create an Elementor Form 

Before beginning, you need to ensure that you have installed and activated both Elementor and Elementor Pro plugins.

Step 1: Adding Elementor Form Builder Widget to your Page

First of all, open the page where you want to add the form, let’s say a Contact Form. Next, edit the page using the Elementor Editor and then drag the Form Widget from the widget panel.

Elementor Form
Elementor Form

Once you add the form widget on the page, you will see a basic output like this:

Configure Elementor Form
Configure Elementor Form

 Step 2: Configure Elementor Form Widget

Form Fields

By default, Elementor Form provides you with three basic fields: Name, Email, and Message. To add more fields, click on the Add Item button. This will give you options to set the new field.

Elementor Form Fields
Elementor Form Fields

Under the Type option, Select the type of field that you want to add to the form; there are multiple different field types, including Text, Number, TextArea, and many more.

Next, add the label for the form field.

Then, in the Placeholder settings, enter the text that shows in the form field when a user hasn’t entered any data.

Enable the Required option to mark the field not to be left empty when the form is submitted.

Lastly is the column width setting. Set the column width to align your fields.

Elementor Form: Content Fields
Elementor Form: Content Fields


Here, you’ll find options to adjust your form’s submit button settings, such as its size and column width. You can also customize the text for the submit button and any step buttons and even select icons to accompany them.

Elementor Form: Buttons Settings
Elementor Form: Buttons Settings

Please check our detailed article on How to Create a Post using Elementor Form?

Actions After Submit  

Here, you define what actions happen after the user enters their details and hits the submit button.

After a new action is added, you will see an additional drop-down below the “Actions After Submit” section to further define the actions. In this article, we will go through the Email option.

Elementor Form: Action After Submit Settings
Elementor Form: Action After Submit Settings

Email Action 

After selecting Email as an Action After Submit, you will get an option to configure the mail settings.

  • To: Enter the email address to which the form submission is sent. To send to multiple email addresses, enter email addresses separated by commas.
  • Subject:  this is the subject heading for the email
  • Message: This is the body of the email. Enter the shortcode of the fields to display.
  • From Email: Enter the email if you wish to send the submissions to yourself.
  • From Name: This will be the name that the recipient sees as the sender’s name.
  • Reply-To: If the recipient clicks “Reply” on the email, then this is the default address that will be entered in the reply.
  • Cc: This is the usual Carbon Copy Field; enter the email address here.
  • Bcc: This is the usual Black Carbon Copy Field; enter the email address here.

Next, you will see the metadata that was sent with the mail.

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

Elementor Form Action: Email
Elementor Form Action: Email

Step 3: Style Your Elementor Form 

After you are done setting up the form, you need to apply some styling to it. Who likes a simple, plain-looking form? You can style the form under the style tab. You will get all the style settings to apply styling to each element of the form.

Elementor Form - Style Settings
Elementor Form – Style Settings

How To Capture The Form Leads in WordPress

Once you deploy the form on the live site, it will start taking the submissions. The Elementor Pro Form does allow you to save the form submissions in the database. It does send you an email notification on submissions, too.

But, you might find the need to analyze and view the captured submission all in one place. Therefore, there has to be a way to overcome the shortcomings of using the Elementor Form.

So, I am here with a simple and smart solution to save the leads captured through the Elementor Form using a plugin called Form Vibes.

Form Vibes is an easy-to-use plugin that you can install on your website with a simple click. Once it’s on your site, it automatically begins collecting information from the forms you have. Not only does it capture the form submissions, but it also shows you reports with analytics about those submissions. Plus, you have the option to export the submissions into a CSV file for your records. The plugin comes with various features that allow you to analyze the reports and display the form submissions conveniently.

To know more about Form Vibes usage, check out this article on How To Save Elementor Form Submissions In Database.

FAQs on Configure Elementor Form

Can I customize the success message displayed after form submission?

Yes, after submitting a form, you can personalize the success message to say whatever you like. Just head to the Form Widget settings in Elementor, find the Custom Message option, and craft your message there. It’s a great way to make your users feel appreciated and informed!

How do I redirect users to a specific page after form submission in WordPress?

Elementor allows you to set up a redirection after form submission. Simply choose the redirect option and enter the URL of the page you want them to go to after submission. Additionally, various other actions can be performed based on your preferences.

Why is my Elementor Form Redirect not working?

If your form redirect isn’t working, double-check that you’ve entered the correct URL without any extra spaces. Make sure the URL is complete and properly formatted.

What if I want to save contact form submissions in a database?

To save submissions in a database, consider Form Vibes plugin. It will automatically capture and store form submissions. You can conveniently view submission details in the analytics form, apply filters, and more for efficient management.

Can I export form submission data for further analysis or backup?

Yes, you can export form submission data easily with Form Vibes. This feature lets you save the data in formats like CSV so you can analyze it elsewhere, create backups, or integrate with other platforms as per your requirements. It’s convenient for further analysis or to keep your data safe.

How can I create a post using Elementor’s Form directly from the frontend?

To create a post using Elementor’s Form directly from the frontend, you need to download the Elementor Addon Elements plugin. Once installed, follow our article and video tutorial for step-by-step guidance.


In conclusion, creating a form with Elementor Pro is seamless, offering customization and email notifications. However, for comprehensive lead management, consider using the Form Vibes plugin to store submissions in a database. This ensures easy access and analysis of captured leads, enhancing your website’s functionality and client interactions.


Leave a Comment