There are a wide range of form types found on websites existing on the internet. From a very simple contact form to a complex form like job application to a registration form. In WordPress, you can create a form using a plugin, whereby the options are massive. But if you have an emphasis on design, you can put Elementor on the top place of your consideration list. You can use it to create a stunning form using its drag-and-drop editor. With Elementor, you have limitless options to style up your form. Your form can then be added to Gutenberg, widget areas of WordPress, or Elementor-powered page itself.
Haven’t heard about Elementor?
Well, it’s quite weird as Elementor is the most-talking WordPress plugin since its initial release back in 2016. Elementor is basically a page builder plugin, but you can also use it as a marketing plugin and other needs. Elementor (the pro version) comes with a form builder feature that you can use to integrate your website with services like MailChimp, ActiveCampaign, and MailerLite. You can also use the form builder to create a file upload form, contact form, and other form types according to your need. Read on to learn more about Elementor form builder.
Elementor Form Builder: In a Nutshell
You have just read it above that Elementor is a versatile WordPress plugin rather than merely a page builder plugin. The pro version of Elementor (read: Elementor Free vs Elementor Pro) comes with a form builder that you can use to create a wide range of forms on your WordPress website. The form builder is available in a form of widget. If you have Elementor Pro installed on your website, you will be able to add the Form widget to the canvas area of the Elementor editor by simply dragging it.
Yes! You can then go the settings panel on the left side to make the settings. and customizations. You can add or remove the form fields, set the form action, and so on.
The best part when creating a form using Elementor is that you have more styling options thanks Elementor’s visual editor. Also, you have several options to use the form on your website. Not only you can use the form on an Elementor-powered page, but you can also use the form you created on Gutenberg or widget areas of WordPress as we have mentioned above.
Elementor Form Builder: The Features
Just for your information, at the time of writing (August 13, 2021), Elementor already has over 8 million users, making it the most popular page builder plugin for WordPress. We haven’t conducted a survey yet, but we are pretty sure that its intuitive editor is the main reason many WordPress users love using Elementor on their website. Unlike Divi Builder which tends to suitable for intermediate to advanced users, Elementor is a friendly page builder for everyone (read: Elementor vs Divi).
As we have demonstrated above. In Elementor, you can create a form by simply adding the Form widget to the canvas area. You can add the element whether when you are creating a regular page or a custom template. To style up the form, you can go to the Style tab on the settings panel. There are 5 blocks you can open here.
You can open this block to set the gap between rows as well as columns of the form. You can also set the typography (font family, font size, font style) as well as the text color of the form labels.
From this block, you can style up the form fields. You can set things like the text color, typography, background color, border width, border radius, and border color.
This block is dedicated to style up the form button. You can set the typography of the button text, background color, border radius, and so on. You can style up the button on each state (normal and hover).
There are three messages associated with Elementor form: success message, error message, and inline message. You can open the Messages block on the Style tab to set the typography as well as the text color of these messages.
Elementor form builder allows you to create a multi-step form. You can open the Steps block to style up the elements on the multi-step form such as typography and divider.
20 Field Types
Field type is the crucial aspect you need to consider when choosing a form builder plugin. It determines the type of data that can be submitted. In Elementor, you can accept data types like text, number, media (image), date, and so on. There are 20 field types supported by Elementor form builder total as follows:
- Text area
- File upload
- reCaptcha c3
With those fields, you can create form types like a survey, file upload form, you name it. It is also possible to create a user registration form using the Form widget of Elementor although it takes extra steps, including a new function addition.
There is one downside though. Elementor form builder doesn’t support conditional logic to allow you to hide/show a field based on certain parameters.
The Ability to Create a Multi-Step Form
One of the field types supported Elementor form builder is Step. Instead of used to accept a certain data type, this field type is intended to create a multi-step form. Yes, Elementor allows you to create a multi-step form, which is great if you want to create a long form, yet there no space available on your page. You can use this field type to split your form into two parts or more. Splitting your form into parts can also make it more interactive.
A Wide Range of Actions
On the opening section, we said that Elementor can also play a role as a marketing plugin. The reason is that you can use the form builder feature of Elementor to create an email opt-in form to collect email subscribers, regardless of the email marketing service you use. Elementor form builder supports popular email marketing services as follows:
The Redirect action can be used for the following scenario:
Your users are required to enter their email address before being to download file or access a page.
If you plan to use your form to collect a massive amount of data, you can connect your form to a form backend service to cultivate the data to lighten up the load of your server.
You can also integrate Elementor form builder with Elementor popup builder via the Popup form action. Furthermore, Elementor popup builder also supports email in case you want to create a contact form and want the form data to be sent to your email address.
Built-in Form Data Manager
Another handy feature offered by Elementor is submission/data manager. This feature is worth mentioning as not all form builder plugins have one. With this feature, you can manage the form data submitted by your users right from the WordPress dashboard. You can access this feature by going to Elementor -> Submissons on your WordPress dashboard. From here, you can view the content of each form submission and delete it. You can filter the submissions by date and form. There is also a handy search field you can make use of.
If you want to cultivate the form submissions using a tool like Microsoft Excel or LibreOffice Calc, you can also export them form submissions into a CSV file.
Almost forget. To use the built-in form submission feature of Elementor, you need to set the form action to Collect Submissons.
Spam is a scourge for all web forms. Well, you may can’t one hundred percent free from spammer, but you can at least add a security feature to your form to minimize spam on your form. In Elementor, you can protect your form with reCaptcha and Honeypot. No need to install an additional plugin to protect your form.
Flexibility of Use
Although the form is created using the Elementor editor, not only you can use the form on an Elementor-powered page. Instead, you can also use the form on Gutenberg (the default editor of WordPress) or site areas that are possible to add a widget (e.g., sidebar). To do so, you can create a section template in which you can add the Form widget to it. Elementor offers an official plugin to use an Elementor library — including section template — on Gutenberg or widget area. You can read our previous article to learn more.
The ability to use an Elementor form on Gutenberg is especially great if you want to add the form to a blog post or any content you create with Gutenberg.
Most WordPress users will use Contact Form 7 every time they need to create a contact form on their WordPress site because it is free to use. If you use Elementor on your WordPress site, you don’t need to install an additional plugin anymore as it (the pro version) already has the form builder feature. The form builder feature of Elementor is capable enough to create a complex form like a survey form, job application form, and so on. As you have read above, there are some field types you can use on your form, including data, number, text, and so on.
The input types like radio, select, checkbox, and acceptance also give you more options to design your form for the sake of user experience. When it comes to design, Elementor is second to none thanks to its intuitive visual editor. There are some areas that can be improved, though. For instance, it would be great if we could add conditional logic to show/hide a certain field. Also, it would be nice to see Elementor has a native integration with a cloud storage service like Dropbox or Google Drive.
- Ease of use: