< Toggle Sidebar > Toggle Sidebar

Divi Module for Gravity Forms

In this document we cover the features for styling your Gravity Forms.

This will work on both the frontend and backend builder.

Introduction to the Gravity Form Module for Divi Theme

The DF Gravity Form Divi Module provides the ability to inject a gravity form shortcode with custom attributes. It provides styling options for the title, description, label, input, form button and progress bar. It also provides the ability to apply a border and background (color, gradient or image) to the gravity form. We will discuss each of these options below.

DF Gravity Form Divi Module Options

Editing your Gravity Form module setup.
Editing your Gravity Form module setup.
  • Choose Gravity Form: A dropdown to select a gravity form from a list of active forms.
  • Show Form Title: Toggle switch which shows/hides the form title.
  • Show Description: Toggle switch which shows/hides the form description.
  • Use AJAX: Toggle switch to enable/disable submission of the form via AJAX. When enabled, the form is submitted asynchronously without reloading the page on the browser.
  • Tab Index: Starting tab index of the fields for the form.
  • Field Values: Default field values formatted as parametername1=value1&parametername2=value2

Background Options

Background options for your Gravity From
Background options for your Gravity From

The Background option provides the ability to add a background color, gradient or image to the gravity form background. We use the standard Divi background controls.

Title Options

Style your form Title
Style your form Title

The Title options provide the ability to style the gravity form title. Options to control the text orientation, font, font size, text color, letter spacing and line height are provided.

Description Options

Style your form description text.
Style your form description text.

The Description option provides the ability to style the gravity form description text. Options to control the text orientation, font, font size, text color, letter spacing and line height are provided.

Label Options

Style your Gravity form Labels
Style your Gravity form Labels

The Label options provide the ability to style the gravity form labels for the form controls. Options to control the font, font size, text color, letter spacing and line height are provided.

Input Options

Style your gravity form input controls
Style your gravity form input controls

The Input options provide the ability to style the gravity form input controls. Options to control the font, font size, text color, letter spacing and line height are provided.

Form Button Options

Gravity Form Button Styling Options
Gravity Form Button Styling Options

The Form Button options provide the ability to style the gravity form buttons. Options to control the orientation, background color, enable/disable border, border size, border color, border radius, font, font size, text color, letter spacing and line height are provided.

Progress Bar Options

Style the Progress bar for your Gravity From
Style the Progress bar for your Gravity From

The Progress Bar options provide the ability to style the background and font color of the progress bar.

Border Options

Customise your Form Border
Customise your Form Border

The Border options provide the ability to set a border for the form. Provided are options to style the border color, width and border style.

Custom CSS Options

Advanced CSS options for each form Embed
Advanced CSS options for each form Embed
Apply custom css to each element.
Apply custom css to each element.

Provision to enter custom CSS for the form container, title, description, label, input, form button and progress bar are provided.

Gravity Forms for Divi Builder

Gravity Forms plugin for Divi Theme

Visual Builder support and better design control for your Gravity Forms. 
Learn More

Related Docs