No matter what sort of website you’re running, I bet you’ve got at least one contact form.
Your form may be fairly simple with just Name, Email and Message fields or it may be all singing all dancing with Textareas , Dropdown lists, Checkboxes, Radio buttons and a Spam filter / HoneyPot field.
In the old days we had to turn to third party plugins to produce our forms but the modern Page Builders make it easy to create your own.
In this post, I’ll take a look at the form building capabilities of the Divi Builder Contact Form Module and the Elementor Pro Form Widget.
I’ll look at their features, check out their ease of use and I’ll recommend when to use each.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
Divi Builder and Elementor Pro / Contact Form Module and Form Widget
Both the Divi Builder and the Elementor Pro plugin have form building capabilities.
The Divi Builder has a Contact Form Module as one of its 41 content Modules.
Note – the Divi Builder comes in two forms: as part of the Divi theme and as a standalone plugin, which works with any theme.
The Elementor Page Builder plugin works with any theme and has a Form Widget as one of its 35 content Widgets.
Divi calls its content elements “Modules” and Elementor calls them “Widgets”, but from the point of view of creating your forms, they are essentially the same thing.
Divi Builder Contact Form Module
The Divi Builder Contact form Module is one of the 41 content Modules that comes with the Divi theme by Elegant Themes.
It allows you to create and style “simple” forms in just a few minutes and it’s what I used to create the form on my Contact me page.
It’s quick, easy and gives you a great looking contact form.
Creating and styling your forms with the Divi Builder Contact Form Module
Creating your forms is easy with the Divi Builder.
All you have to do is drag a Contact Form Module into a Column, of any width, and configure it via the Contact Form Module Settings Panel.
The Settings Panel has three tabs: General, Advanced and Custom CSS.
- General tab – most of what you need to create your form will be found under this tab.
- Advanced tab – gives you access to control over fonts, colours, text size etc.
- Custom CSS tab – where you can add your own custom CSS.
Creating a contact form with the Divi Builder Contact Form Module
This video walks you through the full process:
Although the Divi Contact Form Module is quick and easy to use, it still allows you to create some great effects with just a little custom CSS – see the example below:
Although not shown in the video above, you can add extra fields to the Divi Contact Form Module but they can only be Textareas.
This lack of form field types isn’t a problem if you’re building a basic contact form but can be a drawback if you are looking to build complex forms.
Elementor Pro Form Widget
The Elementor Pro Form Widget is one of the 35 content Widgets that comes with the Elementor Pro plugin, 7 of which are Pro Widgets.
It allows you to build and style great looking forms but more importantly, it allows you to build complex forms using lots of different form field types.
Creating, building and styling your forms with the Elementor Form Widget
Creating your forms with the Elementor Form Widget is similar to creating them with the Divi Builder Contact Form Module.
All you have to do is drag a Form Widget into a Column, of any width, and configure it via the Form Widget Settings Panel.
The Settings Panel has three tabs: Content, Style and Advanced.
- Content tab – gives you control over the content of Form Fields, Submit Button and Emails & Options.
- Style tab – gives you styling control over Form, Fields and Button areas of your form.
- Advanced tab – covers more advanced styling such as Custom classes and ID’s and custom CSS.
I love the way that Elementor’s Setting Panels’ first two tabs, Content and Style, break the tasks down into the ones that web designers are familiar with.
First we create the content and then we style the content.
Creating your form content with the Elementor Form Widget
This video walks you through the first part of creating your form, creating the content:
Styling your form content with the Elementor Form Widget
Now that you have your form content, let’s take a look at styling that content:
Two comprehensive videos giving you the full A to Z of creating a contact form with the Elementor Form Widget.
The great strength of the Elementor Form Widget is that you can add multiple field types, which allows you to create both simple and complex forms.
Divi Builder Contact Form Module and Elementor Pro Form Widget – which one to choose?
Two great contact form creation tools from two of the leading players in the drag-and-drop Page Builder field.
Both are easy to use, both give you great looking forms and both provide you with a Spam filter / HoneyPot field, but which one should you choose?
These are my recommendations:
Simple form with limited field types
The Divi Contact Form Module is the ideal tool for creating good looking basic forms with field types limited to Textareas.
It doesn’t pretend to be a comprehensive form builder, although hopefully Elegant Themes may expand its capabilities in the future.
If you’re looking to create the simple type of contact forms that you see on the vast majority of websites, then this is for you.
Complex form with multiple field types
If you’re looking to create forms with multiple field types such as Textareas , Dropdown lists, Checkboxes and Radio buttons then you need to be looking at the Elementor Pro Form Widget.
The Elementor Pro Form Widget really is a powerful form builder that will allow you to create just about any form that you can think of.
10% saving on both the Divi theme / Divi Builder plugin and the Elementor Pro plugin
If you’d like to start creating your forms with the Divi Builder or the Elementor Pro plugin, then please feel free to use my links below, which will give you a 10% saving.
Divi theme with 10% saving
This deal applies to the Developer license, which include all of Elegant Themes’ 87 themes, all their Plugins and all of the original Photoshop files used to create each theme!
Elementor Pro with 10% saving
Get your Pro copy of Elementor with 10% discount using special promotion code WMWEBDES10