How to Style Gravity Forms with Divi

In this quick tutorial, we will show you how to style Gravity Forms with Divi using the Gravity Forms Styler plugin. We will show you how to use the default settings,  and then how to add your unique styles using the Theme Customiser settings.

How to use the Gravity Forms Styler plugin video

Step 1 – Insert a Gravity Form on your page

First of all, you need to insert a Gravity Form into a page on your website. You will notice that at this point It will have the normal default square styling applied to it. And that looks kind of ugly. We are going to change that to make it look a whole lot more professional.

Step 2 – Install the Gravity Form Styler Plugin

Now you need to install and activate the Gravity Form Styler plugin. (Please note you must be a Premium Member to have access to this plugin with your Divi Framework Membership.)

Go to Divi Framework on your WordPress Dashboard and download the Gravity Form Styler plugin.

How to style Gravity Forms with Divi -Download Gravity Forms Styler Plugin from your membership

Next, go to Plugins to install the Gravity Form Styler and click ‘Activate’. Activating the plugin will immediately apply the new default styles to all your forms.

How to style Gravity Forms with Divi

Important Tip: Clear your server cache and your browser cache. This will ensure that the new styles load.

Now you can go back to your page with the form and click refresh. You will see that a load of new styles have been added. The form now looks a whole lot better and much more ‘Divi-like’. Just like the example below from the Divi Framework website.

How to style Gravity Forms with Divi - Gravity Form with default styles applied

All of the form fields and the button now look fantastic, and this is just with the standard setup.

If you’re happy with how the form looks at this point you could leave it at that. Or you can go ahead and further customise the form styles using the Theme Customiser.

Step 3 – Customise your Gravity Form styles with the Theme Customiser

To do that, leave the page you’re on and go into your Theme Customiser (find it on your WordPress Dashboard by going to Divi > Theme Customiser). Once you are inside the Theme Customiser, find and click on Ultimate Gravity Forms Style. Here you can do all sorts of different things.

How to style Gravity Forms with Divi - Theme Customiser Settings

Here you will find the following settings, and remember, these are for every single form on your site:

General – allows you to set a background colour or change the padding.

Title – control the font, size, style, colour and spacing. These are the standard stying features.

Description – this is control over the description text if you choose to turn that feature on inside your form.

Labels – these are the labels over each of your items. Again using the standard styling features in Divi.

Input – control the font, colour, style, line height etc.

Form Button – set your button style, including background colour, hover colour, font, icon, orientation, size, borders etc. All the standard Divi features.

Progress Bar – set the background colour and font colour.

Form Border – if you want a form border, you can set the border style, size and colour.

Error – allows you to customise the error message when it is displayed.

Create beautiful forms with the Gravity Forms Styler Divi plugin - Theme Customiser Settings

Step 4 – Publish and you’re all done!

When you are finished you can click Publish and you’re ready to go!

This means that now whenever you insert a Gravity Form on your website, all of your forms will have the same styles applied. It’s a great result that takes very little time! Now you will be able to focus on building your forms, instead of spending time on styling every time you add a new form. Now that’s a great time saver.

That’s a quick introduction to the Gravity Forms Styler plugin from Divi Framework. It’s a premium product so we encourage you to become a Premium Member. We hope you find the plugin useful and that it allows you to start making some beautiful looking Gravity Forms!

We also have a Divi Module for Gravity Forms, which gives you even more style control over specific forms. You can find more information on that on our product page.

Google Event Tracking in Gravity Forms – Video Tutorial

Google Analytics is the most popular and most used analytics system that you will find on the web.

It without a doubt has an unbeatable price – free.

However, integrating your forms and events with this tool can be a challenge. Gravity forms have you covered, or maybe I should say the WordPress community has your covered.

In this video I show you a free plugin, Gravity Forms Google Analytics Event Tracking. This plugin makes it so easy to integrate Google Analytics to Gravity Forms that it’s a very fast process. The whole tutorial is only 2 minutes.

So if you want to put real value tracking on your website, this is for you. Add event tracking and see what your Gravity Forms are doing for your website and store it in the Google Analytics platform.


If you are looking for some great tools for your Gravity Forms with Divi be sure to checkout out Gravity Form Styler or Gravity Form Injector plugins. They save us heaps of time, and I’m sure they will save you heaps of time too.

Conditional Login in Gravity Forms – Video Tutorial

When we make forms, especially large ones, you may want to show or hide content based on previous answers.

You can accomplish this with code and lots of effort or you can use gravity forms to make it happen without much effort at all. You just have to know how to.

In this video, we show you how to use conditional logic to get these great results with your Gravity Forms.

You can download the example for we used here.

Hope you like it, keep an eye out for other great gravity form resources from Divi Framework.

Using Zapier with Gravity Forms – Video Tutorial

Part 3 of our tutorial series

Using Zapier and Gravity Forms is a really powerful tool. It makes Gravity forms become a super power in the world of web.

Make the most of it and enjoy the tutorial.

Why Did you give us a form download on this one?

Its because we used the existing form and just added on the Zapier elements.

If I shared that you would get stuck sending things to my hook.

Remember – you need a Gravity Form Developer license to use the Zapier add on for gravity forms.

Do you need help styling your Gravity Forms for Divi powered websites?

You may want to take a look at our ultimate Gravity Forms Styler for Divi.

Have an awesome week. Like or subscribe to the youtube channel.

URL parameters with Gravity Forms – video tutorial and download

Did you know you can send parameters to a gravity form and pre populate it?

In this video I show you exactly how this is done.

Want to download the form so you can upload it and follow along?

No problems – download the form here. You will need a gravity form license to make use of this form and you will also need to know how to upload a form.

I personally use this technique for support form payments and initial consult forms. Its really good an doing this sort of thing because you can populate reference numbers, names and address details as well as prices and payment data all in the URL.

It makes it very easy for your end users and overall has made it much easier for me to get paid.

Take a look at the tutorial and keep an eye out for the next one in the series.

Gravity Form Series Delay

Well – Its typical – you make a commitment to upload every day and you loose your voice. Completely the opposite of what you expect.

I came down with a flu this week and completely lost my voice yesterday. Its slowly coming back and I expect to resume this series later in the week.

Sorry for the delay but lesson learned for me.

Pre Record a week before I announce the upload is a new rule here at Divi Framework.

Thanks for your understanding.

Get Access to our Themes & Plugins

Trusted by 1000+ Websites

Become a member to use our themes & plugins for an unlimited number of sites. Free and Premium options!

30-Day Money Back Guarantee

Not satisfied? Your money back, no questions asked.