How to easily add Gravity Forms to Divi: step-by-step guide

Does your website use the popular Divi theme? Are you looking to embed a Gravity Form into one of your pages or posts?

Although Gutenberg has evolved, many WordPress users still prefer visual page builders like Elementor, Beaver Builder, and Divi for building beautiful layouts easily. If you’re using Gravity Forms with Divi, this tutorial is for you.

In this guide, you’ll learn three ways to embed Gravity Forms in Divi, how to style them, and how to display submitted form data on your site.

Does Divi have a native Gravity Forms module?

Short answer: yes, on Divi 5. Elegant Themes added a native Gravity Forms module in Divi 5.11, announced in August 2026. It embeds any of your forms and lets you style them with Divi’s design settings. Method 1 below shows how to use it. Divi 4 has no native Gravity Forms module, so on a Divi 4 site you still need a shortcode or a third-party plugin.

For Divi 4 sites, two third-party plugins add a Gravity Forms module:

WP Tools’ Divi Gravity Forms (covered in Method 2 below) is sold on the Divi Marketplace for $69 / unlimited sites (price as of 2026-04-23), with a free version on WordPress.org.

MRK WP’s Gravity Forms Plugin for Divi Theme is the option listed in the official Gravity Forms add-ons directory.

Both add a Divi module that lets you drop a form into a layout without touching a shortcode. If you’d rather not add a plugin, the shortcode method (Method 2) works on both Divi 4 and Divi 5.

Method 1: Embedding a Gravity Forms form with Divi 5’s Gravity Forms module

If your site runs Divi 5.11 or later, you don’t need a shortcode or an extra plugin. Divi 5.11 added a native Gravity Forms module, which appears in the Visual Builder once Gravity Forms is installed and active.

1. Update Divi to version 5.11 or later.
2. Open a new or existing page in the Visual Builder and add the Gravity Forms module to a section.
3. In the module’s Content tab, open the Gravity Forms option group and choose your form in the Form field.
4. Choose whether to turn on Use Ajax, which submits the form without reloading the page.
5. Check the form in the preview, then save the page.

Your form’s fields, conditional logic, notifications, and confirmations still live in Gravity Forms. The module decides where the form appears and how it looks, using Divi’s design settings. While you style it, turn on the validation and confirmation message previews so you can design those states in the builder too.

Still on Divi 4? The module is only in Divi 5, so use the shortcode or plugin method below.

Method 2: Embedding a Gravity Forms form in Divi using a shortcode

Divi 4 has no built-in Gravity Forms module, but you can embed a form in a Divi page or post by using a shortcode. The shortcode also works on Divi 5 if you prefer it to the module.

Step 1: Copy/construct your Gravity Forms shortcode

1. Open the Gravity Forms editor by editing your form
2. Click the “</> Embed” button in the top right corner
3. Scroll down and click “Copy Shortcode”

Alternatively, you can manually construct the shortcode using your form ID.

To get your form ID, log into your WordPress dashboard, hover over “Forms”, and click on “Forms”. You will see a list of all your Gravity Forms with the form ID displayed in the first column on the right. Copy the ID so you don’t forget it.

Here’s an example of a Gravity Forms embed shortcode:

[gravityform id="1" title="true" description="true" ajax="true"]

You can copy this shortcode, just remember to replace the “id” value with your form ID.

Pro tipTo find out more about the different shortcode parameters, check out the Gravity Forms documentation.

Step 2: Add your shortcode to a Divi builder module

Now that you have a working shortcode, you can embed it into a post or page using the Divi builder. The best way to do this is by copying and pasting the shortcode into a Divi “Code” Module.

1. Hover over “Pages” and click “Add New”
2. Name your page and click “Use Divi Builder”
3. Add a new “Code” or “Text” module
4. Paste your shortcode into the module and save

Here’s a quick video showing how this works:

Method 3: Embedding a Gravity Forms form in Divi using a plugin

On Divi 4, if you don’t want to use a shortcode, you can use the “WP Tools Gravity Forms Divi Module” plugin to embed Gravity Forms into your Divi posts or pages. The plugin allows you to:

• Add Gravity Forms using a visual module inside Divi
• Adjust shortcode properties (like title/description) inside the module

Step 1: Install the plugin

Follow these steps to install WP Tools Gravity Forms Divi Module:

1. Go to “Plugins” and click “Add New”
2. Search for “WP Tools Gravity Forms Divi Module”
3. Click “Install Now” and activate
4. Alternatively, you can download it from WordPress.org and upload it to your site.

Step 2: Add the module to your Divi page layout

Now, inside the Divi Builder:

1. Click the “+” icon to add a module
2. Search for “Gravity Forms” and select it
3. Use the dropdown to choose your form and configure display options

That’s it—no shortcode required!

There you have it: three ways to embed Gravity Forms in your Divi website.

How to style Gravity Forms in Divi

If you use Divi 5’s Gravity Forms module, style the form with the module’s design settings in the Visual Builder. If you embed with a shortcode or a plugin, you have three options:

Option 1: WP Tools (Pro version)

The Pro version of the WP Tools module gives you styling control directly in the Divi Builder:

• Font colors
• Buttons
• Spacing and layout
• And more

Option 2: Surbma Divi & Gravity Forms plugin (Free)

This lightweight plugin automatically applies Divi’s native form styles to Gravity Forms. Simply install and activate it—no configuration required. Be sure to check when it was last updated to ensure the plugin is still being maintained.

Option 3: Use Gravity Forms’ built-in styling and a CSS snippet

If you’d rather avoid adding more plugins, Gravity Forms ships with two styling tools that work cleanly inside any theme, Divi included.

CSS ready classes for layout. Gravity Forms includes a built-in set of CSS ready classes you can paste into a field’s “Custom CSS Class” setting (under the field’s Appearance tab) to control layout without writing CSS:

gf_left_half / gf_right_half to split two fields onto a single row

gf_list_inline to render checkbox or radio choices in a horizontal row

gf_inline to sit a field next to other inline fields without forcing equal columns

Theme settings via the Orbital theme framework. Gravity Forms 2.7 and later expose color, spacing, and typography controls through the Orbital theme framework, which is built on CSS custom properties. Open the form in the block editor, select the Form block, and adjust the Form Settings panel. Those settings apply wherever the form renders, including inside a Divi page.

A practical CSS snippet for matching Divi’s button look. If your Divi buttons use a specific color and border-radius, target the Gravity Forms submit button to match. Paste this into Divi → Theme Options → Custom CSS and swap the values for whatever your Divi buttons use:

body #gform_wrapper_1 .gform_footer input[type="submit"] {
    background-color: #2ea3f2;
    border-radius: 3px;
    padding: 9px 20px;
    font-weight: 700;
}

body #gform_wrapper_1 .gform_footer input[type="submit"]:hover {
    background-color: #1f8fda;
}

The _1 in #gform_wrapper_1 is the form ID. Change it to target a different form, or drop the ID entirely (body .gform_wrapper .gform_footer input[type="submit"]) to style every form on the site.

For deeper customization (CSS variables, per-field selectors, label and validation styling), see GravityKit’s full guide to styling Gravity Forms.

Bonus: Display Gravity Forms entries on your Divi site

After users submit your forms, you might want to display that submission data on your website—for example, to create:

• A business directory
• A user profile list
• A job board or application portal

You can do this using GravityView—an add-on that allows you to build front-end displays of your Gravity Forms entries.

Here’s how it works:

After installing GravityView, you can create a “View”, enabling you to display form submissions using different layouts. You can display data in a table, a list, on a map, in a DataTable, or create a custom layout using the DIY builder.

GravityView features a drag-and-drop editor, so you can create front end interfaces without writing any code!

After you’ve configured your layout, you can use the GravityView embed shortcode to embed your View in a Divi page or post.

That’s it! Here’s an example of a document library View that displays documents uploaded via Gravity Forms.

You can learn more about GravityView on our website.

Using Gravity Forms with Divi: Final thoughts

On Divi 5.11 or later, the native Gravity Forms module is the simplest way to add a form. On Divi 4, a shortcode or a third-party plugin does the job.

To recap:

• Use Divi 5’s Gravity Forms module, a shortcode, or the WP Tools plugin to embed forms
• Style your forms with the module’s design settings on Divi 5, or with WP Tools Pro, Surbma’s Divi plugin, or a CSS snippet
• Display submitted entries with GravityView and take your site to the next level