Forms are an essential part of your website, but with so many options how can you choose the right form for you? This guide will give you a clear idea about how to combine forms and Elementor.
There are many uses for forms. Whether you want to add a contact form to your site, accept online bookings, let your visitors upload files, or you need to publish an online calculator or quote form, WordPress forms is a topic web professionals need to contend with.
However, with so many great (and not so great) options out there, how should you go about adding forms to your Elementor page designs?
By the end of this guide, you’ll have a clear idea of whether the core Elementor form functionality is enough for your project, or if you’ll need to install one of the free or paid form tools covered in this article.
Comparing the Top 5 Free and Premium Forms to Use With Elementor
To help you decide how to add forms to Elementor, you must first be sure which features you need and which properties are important to you.
Some points to consider while reading this guide include whether you’re prepared to invest in a premium tool or would rather use a free solution, and if you’re happy to rely on third-party extensions to add extra features.
Useful form-related features include a good set of form fields, the ability to create multi-step or multi-page forms, forms integration with third-party services, and an ability to display and hide form fields using conditional logic. These features are all available from the best WordPress form plugins, although, with some, these features are reserved for paying users.
It’s also worth pointing out that while you can easily add the forms from these plugins to your Elementor page designs, you can’t always customize their appearance with the Elementor visual editor. That is unless, you’re prepared to install a third-party add-on for Elementor, such as the free version of Elementor Essential Add-ons, which supports all of the forms covered in this guide.
With that in mind, let’s get started and check out the best ways to add forms to pages created with Elementor.
Top 5 Free and Premium Forms to Use With Elementor
Let’s get started covering the different forms and their capabilities.
First up, let’s take a look at the built-in form functionality of Elementor. Elementor Pro users can add the Form module to their custom page designs. They can also use a selection of pre-designed page Templates and Blocks that include ready-made Forms.
One of the highlights of Elementor is its intuitive interface, and thanks to this, you can easily create custom form designs — something that’s not possible with standalone WordPress form plugins. Not only that, but the Form module has some impressive form-related features that compare well to those found in the best premium WordPress form plugins available today.
Furthermore, you can use the features of the Elementor visual interface to ensure your forms are mobile friendly. Thanks to the ability to define the properties of page elements based on what device the visitor is using, you can easily change the form field width, for example, for users viewing your site via smartphone. Now you no longer have to worry about mobile users being unable to access your forms.
With a good selection of form field types, including checkboxes, file uploads, a password field, acceptance fields, date and time fields, HTML fields, hidden fields, and more, you can do a lot more than just create basic contact forms with Elementor Pro and its Form module.
Any forms you create with Elementor can also be integrated with a range of email marketing services, including ActiveCampaign, ConvertKit, Drip, GetResponse, HubSpot, MailChimp, MailPoet, and SalesForce. You can also integrate Elementor forms with Zapier and then connect to any other services you might be using.
The Elementor Pro Form module should be powerful enough for most users. However, if you want to use features like conditional fields and payment integrations, as well as create multi-step forms, you need to integrate Elementor with a WordPress forms plugin. Let’s look at the best options:
Contact Form 7
Contact Form 7 is the most popular WordPress forms plugin with over 5 million active installations on websites around the world. When it comes to adding contact forms to a WordPress website, Contact Form 7 is widely recommended for its ease of use and simplicity.
Thanks to a handful of free extensions that integrate Contact Form 7 with Elementor, any forms you create with this plugin can be quickly inserted into your page designs. Depending on your choice of theme, the forms take on the styling of your website.
Although Contact Form 7 is a hugely popular plugin and is one of the fastest ways to add a contact form to a WordPress website, its feature list is limited. However, by using free third-party extensions, you can add the ability to create multi-step forms, work with conditional fields, and integrate Contact Form 7 with PayPal and Stripe as well as with email marketing services like MailChimp and AWeber.
If you don’t mind assembling a collection of third-party add-ons and extensions, there’s a lot you can do with Contact Form 7 and Elementor, beyond the core functionality of this popular free forms plugin. Although compared to Elementor and its Form module, the interface for customizing the form designs is lacking. So with all of this in mind, you might find using a feature-rich WordPress forms plugin — like the ones we’re about to explore — with Elementor more satisfactory.
WPForms is a freemium WordPress forms plugin that can do much more than just add contact forms to a WordPress website. Unlike Contact Form 7, even the free version of WPForms includes a drag-and-drop builder that makes it easy to design custom forms for your website. If you’re already using Elementor, then the modern drag-and-drop interface of WPForms will be familiar.
However, although the WPForms interface looks good, unlike Elementor, it isn’t a true front-end form builder. The work takes place in the back-end of your website, rather than directly on the page you’re adding the form to. Because of this, you don’t get the easy visual workflow that’s provided by Elementor and its Form module, where the design work takes place right in the page you’re adding the form to. While the form builder interface is easy to use, the features of the free version of WPForms are lacking. For example, the form field types of the free version are limited to just the basics.
However, unlike Contact Form 7, WPForms does have more form templates than just an option for a contact form. This includes a basic newsletter sign up form and a suggestion form template. Although the free version of WPForms limits email marketing service integration to just Constant Contact and no others.
When it comes to adding forms created with WPForms to pages designed with Elementor, the main option is using the WPForms widget. As Elementor lets you add any widgets that are active on your site to your custom content designs, the WPForms widget can be dragged and dropped right into your page layout. Then it’s just a matter of selecting which form you want to display from the drop-down menu on the WPForms widget.
If you’re using a well-coded WordPress theme, the form will pick up the styling of the theme to help it integrate with the design of your site.
Upgrading to the paid version of WPForms changes the situation completely. Not only can you add more types of fields to your forms, as well as integrate your forms with many of the best email marketing services, but you can also use features like conditional logic and multi-page form support to create advanced forms for your WordPress website.
Other high-level features like PayPal and Stripe integration for accepting online payments through your forms can be enabled too, by upgrading to one of the WPForms paid plans.
With a slick interface and a useful set of features — at least in the premium version — WPForms is a good WordPress forms plugin to use with Elementor. Unlocking all the premium features of WPForms isn’t cheap though, so it might not be for everyone.
Gravity Forms is a well-established premium WordPress forms plugin that can be used to add almost any type of form to your website. The Gravity Forms feature list has been constantly growing over the years, making this possibly the most powerful forms plugin for WordPress websites.
Features like conditional logic and multi-page forms are included as standard, and there are also over 30 form fields to make use of. However, while Gravity Forms has a drag-and-drop user interface, it isn’t quite as slick as the WPForms builder.
Gravity Forms integrates with a range of third-party services including project management tools, email marketing services, communication tools, and payment processors including Stripe and PayPal.
Again, Elementor’s ability to allow users to add any widgets that are active on their site to their custom page designs makes inserting forms created with Gravity Forms very straightforward.
Although the Gravity Forms widget doesn’t display the actual form in the Elementor page builder, previewing or publishing your page makes the form visible and ready to receive data from your visitors. Like the other top 5 free and premium form plugins to use with Elementor, the forms from Gravity Forms take on the styling of your theme when published.
Unfortunately, there’s no free version of Gravity Forms, however, there is an online demo you can try to see how this plugin works. The full cost of the plugin will depend on which features and add-ons you want access to, with three pricing options to choose from. But when it comes to WordPress form plugin features and functionality, Gravity Forms is hard to beat.
The free version of Caldera Forms is currently running on a respectable 100,000+ WordPress websites. Aside from the standard form fields, such as text fields and a range of different selectors, the free Caldera Forms plugin also has e-commerce credit card verification, star rating, and Gravatar live preview fields. Users of the free version get access to conditional logic for controlling the visibility of form fields as well.
Setting up the forms is straightforward, thanks to the drag-and-drop interface. Again, like Gravity Forms, the UI doesn’t look as slick as WPForms or Elementor, but it is functional. A nice feature of the Caldera Forms builder is how easy it makes creating multi-column forms as well as multi-page forms, even when using the free version of the plugin.
When you’re ready to add a form to your Elementor page design, you can simply drag and drop the Caldera Forms widget onto your layout. As is the case with the other top 5 free and premium forms to use with Elementor, you can also use the shortcode widget and paste in the shortcode for the form you wish to display.
Once you preview the page, you should see that your form has taken on the formatting and styling of your theme.
Although the free version of Caldera Forms has a competitive set of features, upgrading to the paid version unlocks extra functionality. This includes the integrations with email marketing services and payment processors, such as PayPal and Stripe.
If you don’t want to invest in a forms plugin but would still like to use conditional formatting and multi-page forms in Elementor, the free version of Caldera Forms is a good choice. It’s easy to use, has some useful pre-built form templates, and if you do need the extra features, you can always upgrade at a later date.
By using this online form builder, you can create a variety of forms like payment form, product selling form, bug tracking, newsletter, survey, etc.. You can showcase any type of form on your website by simply pasting the tabbed widget code. The plugin provides you a unique URL for every contact form which you can share on any other platforms. Even, you can redirect users to any page/URL by using its redirect URL field.
FormGet Contact Form allows users to upload files of different formats like jpg, zip, png, gif on your form.In fact, this contact form plugin is integrated with PayPal & Stripe through which webmasters can easily collect their payments. Moreover, this plugin contains the ability of multiple app integrations like AWeber, MailChimp, Constant Contact, GetResponse, etc.
Further, this form builder plugin offers you a spam protection option through which you can add a captcha field on your form. The tool comprises with an ability to send a confirmation email to users whenever it receives a new entry.Furthermore, all the entries are stored regularly on the dashboard. With this advantage of store & backup, you can easily see all the messages & reply to users at the same time.
Talking about its custom appearance, this contact form plugin allows you to perform a lot of styling operations like uploading the header image, background colors customization, etc. Finally, all the forms created using FormGet Contact Form are absolutely responsive in nature. It has all the essential elements that are required in a form builder like form field validation, form rebranding, logic forms, etc.
As you can see, Elementor Pro has an excellent set of form features. Furthermore, you can also quickly add forms from the best WordPress plugins to your Elementor page designs.
Despite some of the best premium form plugins in this guide being relatively pricey, it is possible to create advanced forms on a budget. Thanks to Contact Form 7 and its library of free third-party add-ons you can add many of the features from the best premium plugins, such as email marketing service and payment process integrations, as well as conditional fields and multi-page forms.
If you’d rather choose an all-in-one form solution that has everything you need, instead of relying on a collection of third-party add-ons, then Gravity Forms, WPForms, and Caldera Forms all come highly recommended. Just be sure to check which plugin has the exact features you need. Checking out the free versions or online demos will also help you decide which one is right for you.
Which WordPress forms plugin will you use with Elementor, or will the Form module suffice?