Elementor Form Builder Tutorial

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

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:

https://elementor.com/

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.

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:

• Send

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.

Form name

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:

• Text
• Email
• Textarea
• URL
• Tel
• Radio
• Select
• Checkbox
• Acceptance
• Number
• Date
• Time
• File Upload
• Password
• HTML
• Hidden
• Step
• reCAPTCHA (and version 3)
• Honeypot

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)

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.

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:

• Typography
• 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.

Click the Actions After Submit tab, and you will be shown the Add Action options.

Add these three actions:

• Email
• Email 2
• Redirect

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:

• Webhook
• Mailchimp – Refer to Mailchimp tutorial
• Drip
• ActiveCampaign – Refer to ActiveCampaign tutorial
• GetResponse
• ConvertKit
• MailerLite
• Slack
• Discord
• Popup

Email

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 xxx@gordonchoi.com.
• 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.

Email 2

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.

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.

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

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.

• Woocommerce Setup Tutorial (WordPress)
• Switch to Classic Editor (WordPress Plugin)
• Install Google Analytics on WordPress (with 3 methods)
• Enable Wordfence 2 Factor Authentication
• Deactivate WordPress Plugins