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.
Once you add the form widget on the page you will see a basic output like this:
Step 2: Configure Elementor Form widget
Form Fields:
By default, Elementor Form provides you with three basic fields
- Name
- Message
To add more fields click on the Add Item button. This will give you options to set the new field
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.
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.
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 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.
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 not allow you to save the form submissions in the database. Yes, it does send you an email notification on submissions.
However, 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.
