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
- 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¶metername2=value2
Background Options
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
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
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
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
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
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
The Progress Bar options provide the ability to style the background and font color of the progress bar.
Border Options
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
Provision to enter custom CSS for the form container, title, description, label, input, form button and progress bar are provided.
Gravity Forms Divi Plugin
Visual Builder support and better design control for your Gravity Forms.
Learn More