Divi Plugin Highlight: Divi Gravity Forms

Last Updated on March 31, 2023 by 2 Comments

Divi Plugin Highlight: Divi Gravity Forms
Blog / Divi Resources / Divi Plugin Highlight: Divi Gravity Forms

Divi Gravity Forms is a plugin for the Divi Builder that allows you to customize your Gravity Form from the Divi Builder. The plugin adds a new module to the Divi Builder with options to change the design of every aspect of the form. If you are a Gravity Form user, this plugin will help integrate Divi and Gravity Forms and allow you to change the form design just like you would any other element on your Divi page. In this article, we’ll take a look at the settings that come with the Divi Gravity Forms Module and show you how you can customize your form within the Divi Builder.

Let’s get started!

Installing Divi Gravity Forms

First, you will need to have the Gravity Forms plugin installed and activated on your website.

Divi Plugin Highlight Divi Gravity Forms Gravity Forms

Divi Gravity Forms can be installed just like any other WordPress plugin. Open the plugins page in the WordPress dashboard and click Add New. Click Upload Plugin at the top, then select the .zip plugin file from your computer.

Divi Plugin Highlight Divi Gravity Forms Install

Once the plugin is installed, activate the plugin.

Divi Plugin Highlight Divi Gravity Forms Activate

Divi Gravity Forms

The Divi Gravity Forms plugin allows you to add and customize the Gravity Form right within the Divi Builder. To get started, you will first need to build the form within the Gravity Forms settings page. Once you have laid out the basic structure and function of your contact form, you can move over to the Divi Builder to customize the design.

Divi Plugin Highlight Divi Gravity Forms Build Form

Open your page in the Divi Builder and click the grey plus icon to insert a new module. Select the Gravity Form module from the list.

Divi Plugin Highlight Divi Gravity Forms Add Module

Content Settings

Open the Gravity Form module settings to the content tab. In addition to the default Background and Admin Label sections, the module comes with a new section called Shortcode Parameters.

Shortcode Parameters

Select the Gravity Form you would like to display from the Form ID dropdown. Once selected, your form will appear on the page.

Divi Plugin Highlight Divi Gravity Forms Form ID

Within the shortcode parameters settings, you can also choose to show or hide the title and description and enable or disable Ajax. Additionally, you can specify the starting tab index for the form fields and specify default field values.

Divi Plugin Highlight Divi Gravity Forms Shortcode Parameters

Design Settings

The bulk of the customization settings for Divi Gravity Forms is located under the Design tab. These settings give you great flexibility with your form’s appearance, and you can change the design of almost every aspect of your form. Let’s take a look at the different design settings you can use.

Form Titles

First is the form title settings.

Divi Plugin Highlight Divi Gravity Forms Form Title

You can change the title margin padding, font settings, alignment, color, size, spacing, line height, and shadow.

Divi Plugin Highlight Divi Gravity Forms Title Text

Form Description

The form description settings are the same as the form title settings. Here is the form description with customized font, text color, text size, and line height.

Divi Plugin Highlight Divi Gravity Forms Description

Field Wrapper

The field wrapper settings allow you to change the margin and padding of the fields. In this example, I decreased the top margin so that the fields were placed closer together.

Divi Plugin Highlight Divi Gravity Forms Field Wrapper

Label

Under the label tab, you have all of the default text customization options. I customized the label font and changed the text color to green.

Divi Plugin Highlight Divi Gravity Forms Label

Sub Label

The sub label settings also feature the default text design options. In this example, the sub labels are the “First” and “Last” text labels below the name fields. I customized the sub label font.

Divi Plugin Highlight Divi Gravity Forms Sub Label

Field Description

The field description example is located above the Long Question field. Here I decreased the top padding to bring the text closer to the label and changed the font.

Divi Plugin Highlight Divi Gravity Forms Field Description

Input Wrapper

The input wrapper settings allow you to change the margin or padding around the input box. In this example, I decreased the top margin, bringing the input box closer to the label and description.

Divi Plugin Highlight Divi Gravity Forms Input

Input General

The input general settings section is where you can completely customize the design of the input box. You can modify the background color, add rounded corners, change the border, and completely customize the input font settings.

Divi Plugin Highlight Divi Gravity Forms Input General

Here I added rounded corners, changed the input background color, changed the border color, and changed the text font.

Divi Plugin Highlight Divi Gravity Forms Input General 2

Text/Textarea

In the text/textarea settings, you can change the margin, padding, or add a box shadow to the fields.

Divi Plugin Highlight Divi Gravity Forms Text

Select

The select section has the same settings as the text/textarea section. You can customize the margin, padding, and box shadow to your select fields.

Divi Plugin Highlight Divi Gravity Forms Select

Checkbox/Radio Text Option

Here you can change the margin and padding, and customize the font for the checkbox/radio text option. I customized the font in this example.

Divi Plugin Highlight Divi Gravity Forms Checkbox

Input Placeholder Text

You can customize the font settings for the input placeholder text here. I changed the font to Montserrat.

Divi Plugin Highlight Divi Gravity Forms Input Placeholder

List Field Column Text

Same settings here as the input field text section. Once again, I customized the font for the list field column text.

Divi Plugin Highlight Divi Gravity Forms List Field

Section Field Wrapper

The section field wrapper settings allow you to change the margin, padding, and border bottom color. I added a section to my form and added a top margin and changed the border bottom color.

Divi Plugin Highlight Divi Gravity Forms Section Field Wrapper

Section Field Title

To customize the section field title, I modified the font, font weight, font style, text color, and letter spacing here.

Divi Plugin Highlight Divi Gravity Forms Section Field Title

Section Field Description

In this example, I added a description to the section and modified the font. I also added some bottom padding to add space between the description and the line.

Divi Plugin Highlight Divi Gravity Forms Section Field Description

Consent Checkbox

The design settings for the consent checkbox allow you to modify the margin, padding, and font settings. Here I modified the font.

Divi Plugin Highlight Divi Gravity Forms Consent Checkbox

Consent Description

Same with the consent description settings, you can modify the margin and padding and customize the font. In this example, I changed the font.

Divi Plugin Highlight Divi Gravity Forms Consent Description

Date Drop Down & Date Field

Here you can change the right margin.

Time Field

In the time field settings, you can customize the AM/PM drop-down margin-left and the Time (HH/MM) Field Minimum Width.

Divi Plugin Highlight Divi Gravity Forms Time

Asterisk

Under the asterisk settings, you can change the font color.

Divi Plugin Highlight Divi Gravity Forms Asterisk

Asterisk Text Legend

Using the asterisk text legend settings, you can customize the asterisk text legend font, size, spacing, and more. In this example, I modified the font.

Divi Plugin Highlight Divi Gravity Forms Asterisk Legend

Validation Error Heading

Here you can customize the background color, margin and padding, and font design for the validation error heading. Here is the customized validation error heading, with modified padding, a different font, and a larger font size.

Divi Plugin Highlight Divi Gravity Forms Validation Error

Field Validation Error

And here you can customize the field validation error in the same way as the validation error heading. I added some padding to the top, bottom, and left, and modified the font. Here is the result on the front end.

Field Validation

Footer

With these settings, you can change the footer margin and padding.

Divi Plugin Highlight Divi Gravity Forms Footer

Progress Bar Title

Here you can modify the progress bar margin and padding as well as the font design.

Divi Plugin Highlight Divi Gravity Forms Progress Bar Title

Progress Bar

In the progress bar settings, you can modify the progress bar color and text color. I changed the progress bar color to green.

Divi Plugin Highlight Divi Gravity Forms Progress Bar

Button

Next, the button settings allow you to apply customizes styles to the form submission button. You can also change the button alignment. Here I changed the text color, background, font, font weight, border radius, and letter spacing to style the button.

Divi Plugin Highlight Divi Gravity Forms Button

Confirmation Message

In the confirmation message settings, you can modify how the confirmation message appears after the form is submitted. I changed the background color, font, and text color in this example.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Settings

And here is the confirmation message.

Divi Plugin Highlight Divi Gravity Forms Confirmation Message

Gf_left_half – CSS Ready Class and Gf_left_third & gf_middle_third – CSS Ready Class

You can apply these CSS classes to a Gravity Forms field in order to create more advanced layouts. These design settings allow you to customize the right padding for the fields with these CSS classes.

Divi Plugin Highlight Divi Gravity Forms CSS Ready Class

Spacing

The spacing settings allow you to customize the margin and padding for the entire form. Here I added some inner padding to all 4 sides of my form.

Divi Plugin Highlight Divi Gravity Forms Spacing

Border

In the border settings, you can add a border to your form, change the border color and size, add rounded corners, and more. For this example, I added a border with rounded corners to the form.

Divi Plugin Highlight Divi Gravity Forms Border

Box Shadow

You can add a box shadow to your form with this setting.

Divi Plugin Highlight Divi Gravity Forms Box Shadow

Filters

The filters settings allow you to modify the color of your design by adding a filter.

Divi Plugin Highlight Divi Gravity Forms Filters

Transform

Finally, the transform settings enable you to modify the placement of the form on the page.

Divi Plugin Highlight Divi Gravity Forms Transform

Advanced Settings

Moving over to the advanced tab, you’ll see that the default advanced sections are listed.

Divi Plugin Highlight Divi Gravity Forms Advanced

If you select the Custom CSS tab, you can add custom CSS to the different elements of the Gravity Form, including the title, description, label, text field, select field, checkbox/radio field, consent checkbox label, validation error heading, button, and much more.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 1

This allows you to completely customize your form, even beyond the options that Divi Gravity Forms adds to the Divi Builder.

Divi Plugin Highlight Divi Gravity Forms Custom CSS 2

Divi Gravity Forms Example

Here is the final result of the Gravity Form customized with Divi Gravity Forms.

Page 1

Divi Plugin Highlight Divi Gravity Forms Page 1

Page 2

Divi Plugin Highlight Divi Gravity Forms Page 2

Confirmation Message

Divi Plugin Highlight Divi Gravity Forms Confirmation Message Example

Validation Error Message

Divi Plugin Highlight Divi Gravity Forms Validation Error Message

Purchase Divi Gravity Forms

Divi Gravity Forms is available in the Divi Marketplace. It costs $69 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Divi Gravity Forms Review

Final Thoughts

Divi Gravity Forms makes it easy to completely design your form within the Divi Builder. The plugin automatically refreshes your form after every change you make so that you can see the most up-to-date preview, right within the Divi Builder. If you’re a Gravity Forms user designing websites with Divi, this may be the perfect tool to help you design and customize your forms with the ease and convenience of the Divi Builder.

We would love to hear from you! Have you tried Divi Gravity Forms? Let us know what you think about it in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Divi Product Highlight: Divi Footers Pack

Divi Product Highlight: Divi Footers Pack

Posted on June 4, 2023 in Divi Resources

Divi Footers Pack is a third-party plugin for Divi with over 80 custom footer designs. The footer is often an overlooked area of any WordPress website. A layout pack such as this one can ease the footer design process. In this post, we’ll take a look at Divi Footers Pack to help you decide if...

View Full Post

2 Comments

  1. Divi should provide this module instead of 3rd party plugins for this basic feature

  2. Nice to have extra design options, but personally, I find functionality at least just as important. The original Divi form does not have an option to upload files. I know there’s a plugin for that, but I would love to see that option built into the original Divi form.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today