Does your website use the popular Divi theme? Are you wondering how to embed a Gravity Form in Divi?
Although Gutenberg has come on in leaps and bounds, most people still prefer to use page builders like Elementor, Beaver Builder, and of course, Divi. In this post, we’ll explore how Divi and Gravity Forms work together by showing you two ways to embed Gravity Forms into your Divi pages or posts.
Psssst… Make sure you read until the end because in the last section we’ll show you how to display Gravity Forms entries on your Divi site!
So here’s what we’re going to cover in this post:
- Embedding a Gravity Form in Divi using a shortcode
- Embedding a Gravity Form in Divi using a plugin
- Displaying Gravity Forms Entries in Divi
Let’s get started!
Manually Embedding a Gravity Form in Divi
The Divi Builder does not have a Gravity Forms module (yet), but you can manually embed a Gravity Form into a Divi page or post by using a shortcode.
The challenge here is that in the Divi Builder there is no shortcode generator like there is in the standard WordPress block editor. Instead, you’ll have to create your form shortcode from scratch. But don’t worry, it’s easy!
Creating Your Form Shortcode
To create your form shortcode, the first thing you’ll need is the ID of the form you want to embed. The next step is to construct the shortcode using the available parameters. Gravity Forms provide detailed documentation on this but we’ll cover the basics below.
Step 1: Find 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.
Step 2: Construct the Shortcode
A basic Gravity Forms shortcode contains the following parameters:
- id (The id of the form you want to embed)
- title (Whether or not to display the form title, either true or false)
- description (Whether or not to display the form description, either true or false)
- ajax (Whether or not to use AJAX when submitting the form, either true or false)
Note: To find out more about the different shortcode parameters, check out the Gravity Forms documentation.
So our basic shortcode will look like this:
[gravityform id="1" title="true" description="true" ajax="true"]
Just remember to replace the “id” value with your form id.
Add Your Shortcode to a Divi Builder Module
Now that you have a working shortcode, you can embed it into a Divi post or page. The best way to do this is by copying and pasting it into a Divi Code Module.
First, create a new page by going to Pages > Add New. Give your page a name and then click on the button that says “Use Divi Builder”.
You can now use Divi’s Visual Builder to add a Code Module to your page. Click the plus (+) icon to open up a list of Divi’s modules. Scroll down or search for “Code” and click on it. Paste your shortcode into the “Code” box and save. Divi will now load a preview of your Gravity Form.
Note: You can also embed your shortcode into a Text module (it works the same way). This may be helpful if you want to display text or images above or below your form.
Note: If you’re using the classic builder, things will look a little different, but the steps are the same.
Embedding a Gravity Form in Divi Using the WP Tools Plugin
If you don’t want the hassle of creating your own shortcodes, you can use the WP Tools Gravity Forms Divi Module plugin to embed Gravity Forms into your Divi posts or pages.
This plugin adds a “Gravity Form” Module inside the Divi Builder, with the ability to adjust shortcode parameters.
Notes: The basic plugin is free, but there is also a Pro version that allows you to style your forms from inside the Divi Builder.
First, you’ll need to install the plugin. You can do this by going to Plugins > Add new and searching for “WP Tools Gravity Forms Divi Module”. Alternatively, you can download it from WordPress.org and upload it to your site.
After activating the plugin, go to the post or page where you want to embed your form. In the Divi builder, click the plus (+) icon, scroll down until you see the “Gravity Forms” Module, and click on it. Then, select your form from the dropdown list and save.
There you have it! Those are the two methods for embedding Gravity Forms into your Divi Website.
Bonus: Displaying Gravity Forms Data in Divi
Have you ever had the need to display your Gravity Forms entries on a Divi page or post? Well, you’re in luck because GravityView allows you to do exactly that!
GravityView is a powerful plugin that extends Gravity Forms by allowing you to display form data on your website in a variety of different ways.
Now that we’ve embedded our “Request Support” form onto our website, let’s use GravityView to display the support requests so that members of our team can track issues and respond accordingly.
Start by purchasing the GravityView plugin and installing it on your website. Once it’s active, you’ll see a new option in your left-hand menu called “Views”. Hover over it and click Add new.
Give your new View a name (we’ll call ours “Support Requests”) and select your form as the Data Source. Next, select a View Type. For this example, we’ll use the Listing View.
The next step is to configure the View layout. For this example, we’ll create a simple View layout that displays support requests one after the other.
On the Multiple Entries Layout tab, scroll down to Entries Fields. In the Title block, click the + Add Field button and select the “Entry ID” field. Next, add the “Date Created” field to the Subheading block.
Our form allows users to upload a screenshot of their issue, so we’re going to add that field to the Image block. Next, in the Other Fields block we’ll add the “Name”, “Email Address”, and “Website” fields. Our form also has a space for users to describe their issue, so we’ll add that field here as well.
You can also add custom labels to each of the fields. To do this, click on the blue gear icon, check the box that says “Show label” and enter your label text.
Okay, now that we’ve finished configuring the Multiple Entries Layout, it’s time to embed it in a post or page. GravityView makes this easy for us by automatically generating a shortcode that we can copy and paste into a Divi Builder Code Module (the same way we did with the Gravity Forms shortcode!).
Okay, let’s see what our View looks like on the front end:
It’s looking great. Now our support team can easily see all of the open issues that need attending to.
This is a simple example of how to display Gravity Forms entries in Divi. GravityView provides many more options and features that would allow us to customize this workflow.
For example, if we had a form with more fields, we could create a Single Entry page, showing more detailed information for each issue. GravityView also allows us to restrict access to logged-in users or limit fields to certain user roles.
How to Embed a Gravity Form in Divi: Final Thoughts
In this post, we began by looking at all the different ways to embed a Gravity Form in Divi. Although the Divi Builder doesn’t include a Gravity Forms shortcode generator, creating your own shortcodes is easy enough.
And if you want to be able to style your forms from inside the Divi Builder, you can use the WP Tools Gravity Forms Divi Module plugin (you’ll need the pro version!).
Finally, we looked at how to use GravityView to display Gravity Forms data on the front end of our Divi website. GravityView extends Gravity Forms and allows you to build powerful and versatile applications. Check out more examples here.