How to Style Gravity Forms in Divi?

If you’ve ever tried styling a form in Divi, you probably noticed that the only option available is ‘Custom CSS.’ This can be challenging, especially for beginners without coding experience. 

Luckily, there’s a solution – a third-party plugin called ‘DiviFlash‘ makes form styling a breeze.

In this tutorial, we’ll guide you on how to style Gravity Form in Divi using the DiviFlash Plugin. We’ll also show you how to create a form and customize it using its default settings. 

Let’s get started!

Start with an Existing Form or Create One From Scratch

We can start our journey of style Gravity form in Divi with an existing form or from scratch. But we always welcome the scratch one. 

Now to create a form from scratch, we have to follow these steps – 

• Eyes over the WordPress dashboard and click on  Forms > New Form
• Select the Blank Form from the templates (or you can use any templates from here)
• Then give your form a title and description > Create Blank Form

Now, we are in a form and our next step is to structure this form. 

We will make an event registration form here. Because this type of registration form has the most styling options. 

To start, we have to add some elements on our form like name, email, website, title, and checkbox. Simply drag and drop the elements from the right side and structure a form.

Note: We have made multiple tweaks to this form. You can explore the Gravity form settings to make your form a unique one.

Enable DiviFlash’s Gravity Form Styler Module

DiviFlash has 60+ modules to style your website. Among them the Gravity form styler module remains off by default, you have to turn this ON to use this module.

To make this happen, go to the DiviFlash dashboard > Turn ON Gravity form styler module > Save Changes

Style Gravity Form in Divi

Now we are on the style Gravity form in Divi section. To style the form, you have to first insert it into the page. Then, the Gravity form styling process will start.

#Step 1 – Insert your Form on Divi Builder

We know that a website form always remains on a page. So, you can make it in two ways: create a new page to start from scratch or use your existing page. 

As we are doing from scratch, that’s why first we will add a page then we will proceed to the Divi builder to insert our form. 

• To add a page, go to the WordPress dashboard > Pages > Add New Page
• Name your page and click on Edit with The Divi Builder
• Next, select Build From Scratch to continue the process
• Then add a Section & single-column row 

Note: You can choose any row format according to your preference

After adding them, we have to insert our styling module Gravity From Styler in the column.  

• Simply click the gray (+) icon, search for Gravity Form Styler, and select that module
• Then, we have to introduce our form to this module. For this, go to module settings > Content > Gravity Forms > select your form name 

Here’s how the structured form will look at the initial stage –

#Step 2 – Customization in Title & Description

Here initially you won’t see the title and description on your form. 

Look at the form options, and you’ll see buttons for these two. Turn ON the button to make them visible.

Now to customize the title and description, we have to go to the Design tab of the module.

In the Design tab, the ‘Heading’ options cover all customization for title and description. Here to organize both of them, you will find three different tabs – Heading, Title, and Description. 

With the Heading options, you can change the background color of the headings, margin-padding them for custom spacing, round the corners, and style the border. 

On the other hand, both the title and description offer the same customization. You can change the font, font weight, style the font with multiple options, align the text, text color, and text size. Also, you can give space on your letter, and adjust the line height.

Note: You can change your Notice text too on this customization. We are skipping these because we haven’t implemented a notice here. If you want, you can check out this tutorial.

#Step 3 – Changes on the Field Heading

To change each of the field headings, you have to go to the Design tab’s ‘Label’ option. Here, you can adjust the font and text settings. 

For the font, you can change the font, font weight, and font style. In addition to changing the text, you can change their alignment, color, and size. 

You can also control letter spacing for gaps between letters. Line height allows you to change the height of the headings.

#Step 4 – Text Field Designing

You can also get the option to change the text fields here. To change them, go to the ‘Input’ option in the Design tab. 

You can customize here the background color and margin-padding them to tweak their spaces. 

Also, the placeholder includes a lot of design options; you can change the background color, font, text customization, and more with border styling settings. The rounding corner and box-shadow options help you make your design more concise.

#Step 5 – Paragraph Text Field Styling

Next to change the paragraph text field, go to the ‘Textarea’ option. Here you can customize the background color, font, text color, text area rounding with rounder color options, and more. Also, you can change your placeholder too.

However, all of these styling options are similar to step 4 which we’ve already completed.

#Step 6 – Style the Dropdown Elements

For styling the dropdown elements, you have to go to the ‘Select’ option from the Design tab. These ‘Select’ customization options are similar to the ‘Input’ and ‘Textarea’ customization options that we did in our previous steps 4 and 5.

#Step 7 – Checkbox Customization

Here in checkbox customization, go to the ‘Checkbox’ option in the Design tab. You can style here the checkbox’s background color, tick color, border color, size, font, and more.

#Step 8 – Button Design

The button has vast design options. To make it appealing, navigate to ‘Button’ and make changes including its background color, font, text color, text size, rounded corners, border color, and more. 

You can also make the button full-width, adjust letter spacing and height, and custom spacing via margin-padding. However, you are welcome to personalize the button further with its additional settings.

#Step 9 – Additional Styling in Gravity Form

We used the most of design capabilities to style gravity form in Divi till step 8. However, there remain a few in the Design tab that allow for further customization of this form.

You can further customize the warning text/ notice, radio button customization (similar to the checkbox), error box, confirmation text, required text, sizing, spacing, and more.

Plus, If you want to, you can also make changes to the section and row designs. We have changed a few and here’s the result –

On the other hand, the additional module adding can make it more beautiful. Add a two-column row initially to make this customization if you want. Here’s an example –

Here is a bucket of our Gravity form designs. You can find some exceptions with the modules too. Check it out for inspiration.

Preview

So, if you want you can style Gravity form in Divi with various design options. Simply use the DiviFlash plugin.

Now, let’s have a look at what we made!

Closing Thoughts

That’s all for this tutorial. Hopefully, our guide on how to style Gravity form in Divi helps you feel more confident about styling your forms.

Share your thoughts with us. Or if you need any push to style a new one, do let us know in the comments section.