How to Style Gravity Forms in Divi?

Styling Gravity Forms in Divi can be challenging due to the lack of built-in options. However, with the DiviFlash plugin’s Gravity Form Styler module, you can easily customize every form element. In this guide, we’ll demonstrate how to style a form step-by-step using DiviFlash.

Styled Gravity Form Preview

Here’s a preview of the Gravity Form styled using the DiviFlash Gravity Form Styler module, highlighting the customizations you’ll learn to create—such as fonts, colors, and spacing.

Required Setup

• Gravity Forms plugin is installed and activated.
• DiviFlash plugin is installed and activated.
• Enable the Gravity Forms Styler module: Go to WordPress dashboard > DiviFlash > Modules, search for “Gravity Form Styler,” and enable it.

Once the setup is complete, you’re ready to start styling. We will guide you through the process in just three simple steps.

Step 1: Create Your Form with Gravity Forms

To style your form, you need to have a Gravity Form created. If you already have a form, you can skip this step.

If not, create a new form by navigating to Forms > Add New. You can either “Build From Scratch” or use one of the pre-made templates.

For this guide, we used the “Simple Contact Form” template. Here’s how it looks initially:

Step 2: Add Your Form in Divi

After creating and saving your form, it’s time to add it to your page or post in Divi using the Gravity Forms Styler Module.

Here’s how to do it:

• Open the page or post with the Visual Builder.
• Choose the number of columns from the row inserter (we chose a single column).
• Search for the “Gravity Forms Styler” module and insert it.
• Select your form from the “Gravity Forms” dropdown menu.

Your form is now added to the page, ready for styling.

Step 3: Style Your Form Using DiviFlash’s Styler Module

DiviFlash’s Gravity Forms Styler module provides comprehensive styling options for all Gravity Forms elements. These options can be found in the “Design” tab. Here’s how to style various form components:

3.1: Apply Background Color and Spacing

Go to Content tab > Background to select a background color for your form. We chose light blue: #e4f2fe.

To adjust form spacing, navigate to Design tab > Spacing. We added padding:

• Top: 20px
• Left & Right: 30px

3.2: Customize Form Title and Description

Navigate to Content tab > Content and enable “Show Title” and “Show Description.”

Go to Design tab > Heading and customize:

Title:

• Font Weight: Bold
• Text Alignment: Center
• Text Color: #0c71c3

Description:

• Font Weight: Semi Bold
• Text Alignment: Center
• Text Color: #0c71c3

3.3: Style Field Labels, Sub Labels, and Description Text

In the Design tab, go to:

• Label: Change text color to #0c71c3.
• Sub Label: Change text color to #0c71c3.
• Description: Change text color to #0c71c3.

3.4: Style Input Fields and Textareas

Go to Design tab > Input to customize input fields (background color, spacing, border radius).

• Rounded Corners: 10px

Repeat similar styling for the Textarea:

• Rounded Corners: 10px

3.5: Customize the Submit Button

Navigate to Design tab > Button and adjust settings:

• Background Color: #0c71c3
• Padding: Top/Bottom16px, Left/Right32px
• Font Weight: Bold
• Text Color: #ffffff
• Rounded Corners: 10px

Note: We’ve shown options for the elements in our example form. If your form has more fields, you can style them similarly. For details on additional options, see our documentation.

Final Styled Form Preview

Here is the final version of the Gravity Form after applying all the styling customizations with DiviFlash’s Gravity Form Styler module.

Conclusion

Now you know how to style Gravity Forms in Divi using the DiviFlash Gravity Forms Styler module. With its comprehensive styling options, you can easily customize every element of your form directly within the Divi Builder—no coding required.

Ready to transform your forms? Download the free styled Gravity Forms demo and start experimenting today. To fully customize your form and unlock all styling features, get DiviFlash now and experience the full power of seamless design in Divi.