Elementor Form Builder Tutorial
What Is Elementor Forms?
In this Elementor Form Builder Tutorial, we will explain how to create Elementor contact forms (for your WordPress website) with the Elementor Pro plugin.
Elementor is a powerful visual based website builder for WordPress sites.
Before going through the explanations in this Elementor form builder tutorial, Elementor Pro (i.e. paid version) must first be installed as a plugin on your WordPress website.
Elementor Forms is one of the widgets that is available with the Elementor plugin.
With Elementor Forms, we can create different types of online/web forms which can be placed on your websites as contact form, newsletter subscription form, etc.
This Elementor Form Builder Tutorial consists of the topics below:
- Install Elementor and Elementor Pro
- Create Elementor Page
- Create Elementor Form
- Elementor Form Button
- Elementor Form Styles
- Actions After Elementor Form Submission
- Create Auto Send and Auto Reply Emails
- Enable Redirect Page URL
- Complete Elementor Form Settings
- Compatibility Between Elementor Plugin and WordPress Themes
Install Elementor and Elementor Pro
Before using Elementor Forms on your website, you will first have to install two WordPress plugins (that are WordPress site builder):
- Elementor (free version)
- Elementor Pro (paid version)
Download Elementor plugin
Elementor is a free plugin.
You can search for, download, and install this free Elementor plugin from the Plugins page of your WordPress site.
Download Elementor Pro plugin
Elementor Pro is a paid plugin that provides a Form widget for you to create web forms for your WordPress site, and you can display the web forms on your WP pages/posts.
You can purchase Elementor Pro from the Elementor official website:
Create Elementor Page
You will first have to create a new Elementor page for your WordPress website.
Log in to the admin area of your WordPress site. Select Pages (from the left side menu), and click Add New.
Enter a new subject (or page title) for your new page, and click the Publish button.
Now click the Edit with Elementor button.
Next, you will start creating your first Elementor form.
Create Elementor Form
After clicking the Edit with Elementor button, it will open the Elementor page builder of your page.
Drag-and-drop to create your first form
Under the Elements tab (from the left side menu), enter form into the keyword search function.
When the Form widget appears, drag-and-drop the Form widget to the Section area (i.e. right side of the Elementor page builder).
Now you start with a default Elementor form with three fields:
- Name (field type: Text)
- Email (field type: Email)
- Message (field type: Textarea)
The form has one button that is labeled:
Click the Update button at the bottom of the left side menu, and this will save all the changes that you have made to your Elementor page and form.
Enter a name for your form.
Other fields for the form
Other than the 3 default fields, you can click the + Add Item button to add more fields, including:
- File Upload
- reCAPTCHA (and version 3)
Other settings of the form
You can make changes to the Elementor form, including:
- Input size (of the fields)
- Display (or not display) the Label of each field
- Display (or not display) the * symbol (to indicate whether the field is compulsory to input)
Elementor Form Button
Button size, width, and alignment
You can adjust the Elementor form button, including:
- Size: Options include Extra Small, Small, Medium, Large, Extra Large
- Column Width: For example, 100%
- Alignment: Align the button center, left, or right
Button display text and icon
By default, the label text of the button is Send, but you can change the button label text to something else, such as Submit.
You can select an icon for your button, or you can leave the Icon selection blank.
You can choose to enter an ID for your button, or you can leave the Button ID field blank.
Elementor Form Styles
Under the Style tab (of the Elementor form), you can set the styles of your form.
You can adjust:
- Spacing (or gap size) between input fields
- Spacing of label text
- Spacing in HTML
You can adjust the text color in the placeholder of the input fields, typography, text size, background color, and border size and color of the input fields.
For the button, you can set the text size, font type, text color, and background color.
You can also adjust the border type and border radius (of the 4 corners) of the button.
After visitors (on your site) have clicked the Submit button to submit the form, they may be shown a message (on your page). You can adjust the following for the message:
- Success message color
- Error message color
- Inline message color
If you are to redirect the visitors (after Elementor form submission) to a different page (e.g. thank you page), then you will not be required to make the above changes.
Actions After Elementor Form Submission
Click the Actions After Submit tab, and you will be shown the Add Action options.
Add these three actions:
- Email 2
Do the following settings:
- Provide an auto-send email address. Enter your own email address, so you will be notified with a message when a visitor has submitted the Elementor form.
- Provide an auto-reply email address. An email will be automatically sent to the visitor who have submitted the Elementor form.
- Enter a web address URL (for redirection).
Options under Actions After Submit
Other options that are available after the submission of the Elementor form:
- Mailchimp – Refer to Mailchimp tutorial
- ActiveCampaign – Refer to ActiveCampaign tutorial
Create Auto Send and Auto Reply Emails
When a visitor (of your website) has submitted the Elementor form, an automated email will be sent to your email address. This is a message to notify you about a successful form submission.
Under Email, you can fill in the following information for the fields.
- To Email: Enter your email address.
- Subject: Give the email a subject.
- Message: This is the content in the body of the email. Enter [all-fields].
- From Email: This field lets the email recipient to see from which email address the message was sent. The best practice is to use an email address that contains your website domain name. In my case, this should be firstname.lastname@example.org.
- From Name: This field allows the email recipient to see who has sent the message. Enter your name, or your website name.
- Reply-To: When the recipient replies to your automated email, the message will be sent to this Reply-To email address. The best practice is to use an email address that contains your website domain name.
- Cc: Leave it blank.
- Bcc: Leave it blank.
This is an email that will be automatically sent to the visitor who have submitted the Elementor form.
Under Email 2, you can enter similar information that you have entered with Email.
Enable Redirect Page URL
You can redirect the visitor to a different page URL, after he/she has submitted the Elementor form.
Under Redirect section, enter an URL in the Redirect To field.
Usually, the redirected URL will be a thank you page URL.
Complete Elementor Form Settings
You can hide the label text of the Elementor form. This gives your form a cleaner look.
Under the Content tab, click to open the Form Fields section.
Click Name, which is the first input field of your form.
Clear everything in the Label field.
Do the same to clear the Label field of all other input fields (of your Elementor form).
The above is how your Elementor form will appear. Now the form displays no label (for each field).
Compatibility Between Elementor Plugin and WordPress Themes
Many different WordPress themes can be installed with the Elementor plugin (including Elementor Pro), and they are compatible. One of the very powerful WP themes is OceanWP.
Refer to this OceanWP Theme tutorial.
Regarding this Elementor Form Builder tutorial, I have written a Chinese version article of this topic.