The Gravity Form module lets you display any form built with the Gravity Forms WordPress plugin inside the Divi Builder and style every part of it to match your site.
You manage fields, logic, notifications, and confirmations inside Gravity Forms as usual - the module handles the design and embeds the form on your page.
Note: This module requires the Gravity Forms plugin to be installed and activated. Any form you create in Gravity Forms then becomes selectable inside the module.
Add the Gravity Form Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus icon
to insert a Row.Click the Gray Plus icon
inside the Row, which will show the list of all available Divi modules.Find the Gravity Form module and click on it to load it. Alternatively, you can use the Search option to find it.
The Gravity Form Module Use Cases
Styling existing Gravity Forms forms: Apply consistent Divi styling to forms you've already built in Gravity Forms without rebuilding them.
Advanced form logic with Divi design: Use Gravity Forms' conditional logic, multi-page forms, and third-party integrations while keeping the form's look aligned with your Divi site.
Multi-step forms: Display a paged Gravity Forms form with a styled progress bar and next/previous buttons that match your design.
Gravity Form Module Settings Breakdown
Once you've added the Gravity Form module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab lets you choose which Gravity Forms form to display and configure the module's general content settings.
Gravity Form - Select the form and set how it submits and previews:
Form - Choose which Gravity Forms form to display from the dropdown of forms you've created in the Gravity Forms plugin.
Use Ajax - Submit the form without reloading the page using Gravity Forms' built-in Ajax. Leave it off for a standard page-reload submission (the default).
Show Validation Messages (Builder Preview) - A Visual Builder-only preview helper. It renders Gravity Forms' real validation summary and field messages so you can style them and match the front end. It does not change your live form.
Show Confirmation Message (Builder Preview) - A Visual Builder-only preview helper. It replaces the form preview with a sample confirmation message so you can style it. It does not change your live form.
Elements - Allows adding nested modules.
Background - Choose the Gravity Form module's background styles.
Loop - Enables the loop builder.
Order - Choose the order in which the Gravity Form module appears inside a Flexbox and Grid layout.
Meta - Choose the Gravity Form module's Label text and force its Visibility inside the Visual Builder.
The Design tab
All the design styles and options for the Gravity Form module are in this tab. Styles you set here apply to the rendered Gravity Forms form. Because Gravity Forms builds forms from many different parts, this module gives each part its own styling group.
Layout - Choose the Layout Style. It changes how the module's content is displayed.
Title Text - Style the form's title.
Description - Style the form's description text.
Section Heading Text - Style the headings created by Gravity Forms' Section field, used to break a form into sections.
Legend Text - Style the heading shown above grouped fields, such as radio and checkbox groups or Name and Address fields.
Input - Style the input and textarea fields.
Checkbox - Style the checkbox field types.
Radio - Style the radio button field types.
Required Marker Text - Style the marker that flags required fields, such as the asterisk.
Progress Bar Text - Style the progress bar shown on multi-page forms.
Submit button - Style the form's submit button.
Next page button - Style the next-page button on multi-page forms.
Previous page button - Style the previous-page button on multi-page forms.
Validation Summary - Style the validation summary shown at the top of the form when submission fails.
Field Validation Text - Style the individual validation messages shown beneath each field.
Confirmation Text - Style the confirmation message shown after the form is submitted successfully.
Sizing - Choose the Gravity Form module's sizing.
Spacing - Choose the Gravity Form module's spacing.
Border - Choose the Gravity Form module's border styles.
Box Shadow - Choose the Gravity Form module's Box Shadow styles.
Filters - Choose the Gravity Form module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Gravity Form module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Gravity Form module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
Attributes - Assign a CSS ID, reusable CSS classes, or custom HTML attributes to the element. Use these to apply advanced styling via your child theme's stylesheet or Divi's custom CSS settings.
CSS - Allows you to add custom CSS code to fine-tune your Gravity Form module.
HTML - Choose the semantic HTML tag for the Gravity Form module.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Interactions - Create custom interactions, such as showing or hiding the module, and many more.
Visibility - Choose the module's visibility based on different devices.
Transitions - Choose how long the module's animation takes.
Position - Choose precise control of the module's placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
