Style Divi Gravity Forms

Feb 28, 2022 | Divi Resources

How to Style Your Divi Gravity Forms With Ease

Want to style your Gravity Forms like Divi and don’t know how to do it? Then, guess what? In this tutorial, I’ll share the easy steps that would allow you to change the look of your Gravity Forms in Divi. And not only change the looks but customize them to the fullest the way you want.

This tutorial will unlock the steps you can easily master to make your Divi Gravity Forms look more engaging, readable, and interactive. We can say that this tutorial is a simple answer to your questions like “How to add gravity forms to Divi theme” and “How to style gravity forms”. If you’re ready to do that, then let’s get started without any further ado!

Things Required


To achieve the goals of this tutorial, we need the following plugins and the active installation of the Divi theme. If you haven’t already (which is rare), then activate your Divi theme.

#1 Gravity Forms – Yes, obviously, without it, we won’t be able to create our Divi Gravity Forms and then style them. So, it’s a bit awkward requirement which I believe you’re already aware of.

#2 Divi Plus – This will help us style our Gravity Forms in Divi.

So, these are all we need to continue our tutorial. However, before we do so, let’s take a look at what they are and what’s it that makes them so unique.

What is Gravity Forms?

Gravity Forms in Divi

Gravity Forms is a premium WordPress contact form plugin that enables you to add forms of different kinds to your website. It features a lot of options that make it the preferred choice of many developers to add forms to their website. It was first available in 2008, and since then, it’s served hundreds of thousands of customers. Plus, they’ve got customers like ESPN, NASA, UNICEF, and Airbnb, to name a few.

Unlike Contact Form 7 and Caldera Forms, it has a drag and drop UI that easily allows you to build your required form. For example, you can create forms like Quizzes, Surveys, Payments, and more.

Popular Features of Gravity Forms

  • 30+ Form Fields
  • Multi-Column Layouts
  • Save & Continue Option
  • Paginated Forms
  • Field Validation
  • File Uploads
  • Digital Signatures and more.

What is Divi Plus?

divi-plus-featured-image-et

Divi Plus is a multipurpose plugin for Divi that provides you with multiple modules, templates, and other features to optimize any Divi website. It’s a premium plugin that you can have starting from $59. Divi Plus makes enhancing the look and performance of the site easy. And users, regardless of their Divi experience, can utilize it to the fullest in no time.

What’s more interesting about Divi Plus is that you can also avail yourself of free 25+ child themes covering multiple industries.

Popular Features of Divi Plus

  • 50+ modules.
  • WooCommerce dedicated modules.
  • 4 extensions.
  • 60+ templates.
  • 250+ design sections and more.

As we’ve already looked at our required plugins, let’s move on to the step to style the Gravity Forms in Divi.

Create Your Gravity Form for Divi


Still confused about “how to add gravity forms to divi theme”. Don’t worry. If you’ve already installed and activated your Gravity Forms plugin, then the next thing left to do is create a form. So, for that, on your WordPress Dashboard, go to FormsNew Form.

Creating a new Gravity form

This will open a popup asking for details for the new form. Simply, provide the information and then click Create Form.

Creating a new Gravity form inside form builder

Once you’ll do that, you are inside the Gravity Forms’ builder. Here, simply drag and drop form fields from the right container. If you’re satisfied with your form fields and their settings, click Save Form.

Gravity Forms builder

You’ve created the form; now it’s time to add it to the page and then style it. However, before that, ensure you’ve enabled the Divi Gravity Forms styler module. Don’t know how to do it? Let’s find out.

Enable Divi Plus Gravity Forms Styler Module


To enable the required module, go to Settings Divi Plus, tick the checkbox near Gravity Form Styler, and Save Changes.

Enabling Divi Plus Gravity Forms Styler module

After enabling the module, you’re ready to style your Divi Gravity Form. Let’s see how we can do it.

Style Your Gravity From in Divi


Create a new page or edit an existing one where you want to display your styled Gravity Form. Don’t forget to launch the Divi Builder, and once you’ve done that, follow the below steps one by one.

#Step 1 – Add Gravity Form to Your Divi Page

To display a styled form on your Divi website, we need to first add it to the page. So, for that, add a new row, and in that row, insert the Gravity Form Styler module.

Inserting Gravity Form Styler module

As soon as you insert the module, the settings would appear alongside the default module placeholder, “Oops! We could not locate your form.”

Gravity Form Styler default look upon insertion

To add the form to the page, simply go to FormSelect Form → click on the form you want to display on the page. Upon your selection, you’ll have your Gravity Form in Divi in its default state like the following screenshot.

Default Gravity form in Divi

The default look of Gravity form in Divi

The following steps will guide you through customizing it further.

# Step 2 – Apply Content Customization on Your Divi Gravity Form

Gravity From Styler module’s content tab comprises the following additional settings – Form and Background.

Gravity Form styler module content tab settings

The Form settings allow you to select the form, display the form title and description. Plus, you can also enable Ajax on the form.

Form settings of Gravity Forms styler module

In the Background settings, you can customize the form’s background with color, gradient, image, and even video.

Divi Gravity forms background customization settings

After customizing the content of your form, you can switch the tab to customize the form’s design.

#Step 3 – Apply Design Customization to the Form

The design tab of the module comprises the following settings that you can utilize to improve your form’s look.

Divi Gravity Form Styler module design settings

There’s a total of 15 additional settings included with native options of Divi for every element of the form. Moreover, each setting mostly covers individual elements of the form. So, you could easily work on each area of your Gravity Forms in Divi. Let’s take a closer look at some of the module’s options.

Alignment

The Alignment settings of the Design tab allow you to change the form’s text alignment to Left, Right, Center and Justify.

Alignment setting of the Gravity Form styler module

Further, you can also utilize this option to apply shadow on the text. A good option when your website uses shadow effect on multiple elements.

Form Title, Description & Labels

With Form Title, Description, and Labels settings, you can apply text styling to the form’s title, description, and fields labels. Moreover, the Form Description settings provide you with the option to manage space between form title and description itself by setting padding values.

Gravity Form text styling in Divi

Input Fields

The Input Fields settings allow you to apply color on input fields, their text; placeholder text, and description. You can also utilize the settings to apply styling on the text of input fields, placeholder, and description.

Gravity Forms input fields settings

The same setting offers additional options to apply padding, border radius, and shadow to the fields. So, you can make the fields look similar to your website’s design and color schemes.

Gravity form input fields rounded corners

After applying the customizations, you could have your form’s input fields like the following screenshot.

Styled Divi Gravity Form with rounded input fields

Radio, Checkbox, Textarea and Upload Fields

If you’ve included Radio Buttons and Checkbox in your form, then the styler module also got customization options for them.

Gravity Forms checkbox and radio button fields settings

The settings allow you to apply custom styling to change buttons and checkbox size, color, label text, and more. Similarly, the Upload Fields settings will enable you to change the field’s background, padding, and text customizations.

Upload fields settings

With Textarea Fields, you can increase or decrease its height per requirement.

Textfield area options

Submit Button

The Submit Button settings comprise the options to change the button’s padding, apply background customizations, text styling, and more.

Gravity forms submit button options

Using this particular setting, you can make your form’s submit button to match the styling of your website as well as the form’s fields.

Success/Error Message

The default appearance of the Gravity Form’s success or error message has no styling. It’s simple in a complete sense, as you can see in the following screenshot.

Success message of Gravity Forms in Divi

But, with the help of our Gravity Form Styler module, we can improve it as well. You need to open the Success/Error Message settings that provide text styling options for both Error and Success Message.

Success message settings in Divi Gravity Form Styler module

After applying the customizations, you can get your message to look like the following.

Success message styled

Styled Success Message for Gravity Forms in Divi

Error message

Styled Error Message for Gravity Forms in Divi

More Options

In addition to the above options, you get settings to customize Required and Field Instructions Text; Next/Previous Buttons and Save and Continue Button if you’ve created multi-steps form.

To take the form’s style to an even better level, you can utilize the native design options like Sizing, Spacing, Border, and Box Shadow to change the look of the Styler module’s area. And once you’re done with customizations, you can have a Gravity Form in Divi like the following example.

Example of styled Gravity Forms in Divi

Wrapping Up


As you can see in the above steps, it’s seen how easy it is to style Gravity Forms in Divi. The Gravity Form Styler module offers all the essential options to take the form’s design to a new level.

And regardless of your Divi experience, you can make the appropriate changes to the form whenever needed.

The only question that remains is how you can get the module. Well, it’s no wonder; all you need to do is get your copy of Divi Plus. And it will provide you with the module as well as other exclusive features—for example, 25+ pre-built themes, 50+ modules, extensions, templates, and more.

I hope this tutorial helped you learn how you can style Gravity Forms in Divi. And by following the steps, you’d customize the form most excitingly.

Posted By:
Ankur Khurana
Ankur enjoys anything competitive. He is passionate about learning new things and traveling to new places.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why Use Ajax Search Plugin on Your Divi Website

Why Use Ajax Search Plugin on Your Divi Website

Ajax search is a popular way to find things on a blog, website, or WooCommerce store. It gives users the ease to browse the entire website or store from a single page without any reloads. He only needs to enter a specific term and all the posts, pages, or products...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts