Elementor Form Builder Tutorial

Home » WordPress Tutorials » 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:

Elementor Form Builder Tutorial (for WordPress sites)

200+ Free Traffic Sources – The Complete List
Promote Your Website with Free Traffic
guide-free-traffic-sources
Get the Complete List as a PDF Document
fts-pdf-subscribe-form

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:

https://elementor.com/

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.

Edit with Elementor

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.

Elements Form Drag and Drop (Elementor)

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

Elementor Form Sample

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

Fields Name - Elementor Forms

Enter a name for your form.

Other fields for the form

Elementor Form Fields Default

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

Field input size, label, required mark - Elementor Forms

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

Button size, width alignment (Elementor Forms)

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

Submit button text icon ID (Elementor Forms)

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.

Elementor Forms Form Style

You can adjust:

  • Spacing (or gap size) between input fields
  • Spacing of label text
  • Spacing in HTML

Elementor Forms Field Style

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.

Elementor Forms Buttons Style

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.

Message Style (Elementor Forms)

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.

Actions After Elementor Form Submission

Actions after submit (Elementor Forms)

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:

Create Auto Send and Auto Reply Emails

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.

Email auto notification (Elementor Form)

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.

Enable Redirect Page URL

Redirect to page URL (Elementor Form)

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.

Elementor Form Name Field Switch to Required

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

Elementor Form - Simple Form Example

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.

Conclusions

Regarding this Elementor Form Builder tutorial, I have written a Chinese version article of this topic.

Articles on WordPress Topics

More on WordPress Topics