Divi Builder Contact Form Module Vs Elementor Pro Form Widget

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.

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.

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.

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 the Divi theme and the Divi Builder plugin

If you’d like to start creating your forms with the Divi Builder (theme or plugin) then please feel free to use my link below, which will give you a 10% saving.

Credits:
My thanks and gratitude to:
Elegant Themes for the video and graphics.
Elementor for the videos and graphics.