It’s no secret that we like Elementor here at WPLift. In fact, we use Elementor to power everything from our home page down to our contact forms. That latter feature is what I’m going to focus on in this post – the Elementor forms builder.
Did you know that, with Elementor Pro, you probably don’t need a third-party form plugin? Elementor Pro’s form widget lets you set up flexible forms (with integrations) right from the Elementor interface.
In our hybrid Elementor forms builder review/tutorial, we’ll take you through everything this widget offers and show you how to use it.
Elementor Forms Builder Features
Before going hands-on with Elementor forms builder, let’s quickly run over some of its key features.
First off, one of the most defining features is that it’s integrated into the Elementor interface, which also means that you get access to the many, many Elementor design/style/layout options. I don’t think you’ll find any standalone form plugin with as robust of a design system.
From there, you can add 18+ different field types:
- Text area
- Telephone number
- Radio buttons
- Select list (drop-down)
- Checkbox lists
- Single checkbox (acceptance)
- File upload
- Honeypot (prevents spam)
You can also divide your forms into multiple pages to create multi-step forms, which is great for lengthy forms.
To help you use your forms in useful ways, Elementor Pro has 12+ integrations with popular email marketing services and CRMs. If your tool isn’t covered, there’s also a catchall Zapier integration that lets you connect to any one of the thousands of tools on Zapier.
There are also some other interesting options. For example, you can receive notifications via Slack or Discord when someone fills out your form.
Speaking of notifications, you can also customize the email notifications that both you and form submitters receive. You can also redirect people to a custom thank you page after they submit the form.
Article Continues Below
Finally, Elementor forms builder includes some useful tools to protect your forms from spam. You can add invisible honeypot fields to catch bots. And if you want even more protection, you can add reCAPTCHA.
Let’s go hands-on and I’ll show you how it works…
How to Use Elementor Forms Builder
In this section, I’ll show you how you can set up the Elementor forms widget. I’ll assume that you’ve already created the page where you want to add your form and opened the Elementor editor, but I’ll show you all the other steps.
1. Add the Form Widget
To get started, drag the Elementor forms widget to the location where you want your form to appear. By default, it will create a simple contact form with three fields:
2. Customize the Form Fields and Buttons
Next, use the Form Fields area in the widget’s settings to control which fields appear in your form.
You can choose from 18+ different field types and use drag-and-drop to control the order of the fields. If you expand a field’s settings, you’ll get options to customize the field type, label, whether it’s required, and more.
You can also use this area to set up multi-column forms. For example, if you set the “First Name” column width to 50% and the “Last Name” column width to 50%, you can have them on the same line:
For a single-step form, all you need to do is arrange the fields in the order that you want them to appear. However, if you have a lengthy form, you might want to break it up into multiple steps. To do that, you can add a Step field where you want to break your form into multiple parts. Fields above the step field will appear on the first page while fields below will appear on the second page. You can also add multiple-step fields to break your form into even more pages:
Below that, you can also use the Buttons settings to customize the submit button. For a multi-step form, you can also use the Step Settings area to configure how the multi-step behavior functions.
3. Customize the Design of Your Form
Next, you can use the regular Elementor style options to control the design of your form. Just as with any other Elementor widget, you’ll get a ton of options to create a pixel-perfect design. You can also use the Advanced tab to set up features like motion effects and custom positioning:
4. Configure After-Submit Actions
Now, we’re getting into one of the most flexible parts of the Elementor forms builder – the Actions After Submit settings in the Content tab. This is what lets you control what happens after a user submits your form.
You’ll be able to:
- Configure one or more email notifications.
- Set up integrations with email marketing services/CRMs.
- Connect to Zapier.
- Set up custom redirects after a user submits the form.
- Send notifications to Slack or Discord.
- Open a popup (that you can design with Elementor Pro’s popup builder).
To get started, click into the Actions After Submit box to expand the list of actions:
Then, select the action that you want to add.
Once you add the action, you’ll get a new settings area where you can configure that action. For example, here you can see that I’ve added five actions and that gives me five new settings areas underneath that:
Each type of action will have different settings. For example, when customizing an email action, you can configure the email text, from email, which field information to include, etc.
Once you’ve configured all of your actions, you’re pretty much finished! Publish the page and start enjoying your new form.
Best of all, you were able to set everything up without ever having to leave the Elementor interface.
Elementor Forms Pricing
Elementor Forms is part of the core Elementor Pro plugin. You get it at no extra charge and you also get access to all the other useful Elementor Pro features.
Elementor Pro has three license plans:
- 1 site – $49
- 3 sites – $99
- 1,000 sites (essentially unlimited) – $199
To learn more about everything that Elementor Pro offers, check out our full Elementor review.
Overall, I think that Elementor form builder is a great tool for several reasons:
- It can do everything most people need, especially if you pair it with the Zapier integration.
- If you’re already using/interested in using Elementor, it eliminates the need to purchase and/or install a separate form plugin. This saves you money and helps you simplify your install/avoid compatibility issues.
- You can create your forms without leaving the Elementor interface, which is really convenient.
It is missing a few things that advanced form builders offer (e.g. conditional logic). However, for the ways in which most people use forms, it’s got everything you need in a really convenient package.
If you’re already using Elementor Pro, try out the form widget today. And if you’re not, click below to purchase Elementor Pro and get started.