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.
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.
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.
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.
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.
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.
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!