Upto 40% OFF ! Limited Time Deal

Days
Hours
Minutes
Seconds

Use Coupon Code: BFCM2023

How To Configure Elementor Form To Capture Leads

Incorporating a contact form or a lead capturing form is a must-have need for every website. No matter what type of form you have, they are among the most effective sources for a business to establish relationships with clients.

When creating a Contact Form for a WordPress website things are much more sorted. There are plugins available through which you can create Forms easily.

Elementor Pro provides you with one such feature to add a Contact Form to your WordPress website. Here in this tutorial, we will show you how to create a Contact Form in Elementor using the Form widget. Moreover, then, in the end, we will see a solution to save the submissions in the database.

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

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

Configure Elementor Form

 Step 2:  Configure Elementor Form widget

Form Fields:

Elementor From

By default, Elementor Form provides you with three basic fields

  • Name
  • Email
  • Message

To add more fields click on the Add Item button. This will give you options to set the new field

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  what 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 form is submitted.

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

Buttons :

Here you will get all the settings to configure your form submit button.

Form - Buttons

Actions After Submit  

Here is you define what actions happen after the user enters in 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.

Action After Submit

Email Action 

Form 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 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 meta data’s that is 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). 

Step 3: Styling Form 

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

Elementor Form - Style

How To Capture The Form Leads  

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. and, 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 shortcoming 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 Form Vibes.

Form Vibes is a simple plug-and-play plugin. Once installed on the site it will automatically start capturing the form submissions.

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

Share this post

Leave a Comment

Subscribe to our newsletter

Get latest product updates and tips