Introduction

Forms are essential for websites, helping you connect with users and customers. Gravity Forms is one of the best form builder plugins for the WordPress ecosystem. It offers a best-in-class form-building experience and additional add-ons to extend its functionality. Similarly, Divi is among the best available WordPress themes. It offers an intuitive page-building experience that lets you create stunning websites in no time with ease.

In this in-depth guide, we will explore how to style Gravity Forms within the Divi theme using various free and premium WordPress plugins. This step-by-step guide is meant for everyone whether they are a beginner or an advanced user. Consider this as your one-stop solution for all Gravity Forms styling requirements within the Divi theme.

How to Add Gravity Forms in Divi Page

Before beginning the process of styling Gravity Forms in Divi we will explore the various methods using which you can add Gravity Forms to your pages. It isn’t difficult and we have a detailed step-by-step guide below which is easy to follow along.

Embed Using a Shortcode

• Login into your WordPress backend and then navigate to the Forms menu.
• Edit the form which you want to embed.
• Click on the Embed button from the form editor header section.
• Now click on the Copy Shortcode. We will be using this shortcode on the page or section where you want to show this form.
• Now navigate to the Pages menu and edit the page in which you want to show the form.
• Add a new Code, Text, or any other module by Divi and paste the shortcode.
• Save the page and the form will start showing.

How to Style Gravity Forms in Divi

Styling the form to match your existing website design offers a coherent design experience for users. It will increase form conversion and make the forms feel like a part of the whole website experience itself. In this following section, we will explore how to style Gravity Forms in the Divi theme without the need for any coding experience or complex steps.

Styling with Gravity Booster Plugin

Gravity Booster is a free WordPress plugin that has been extensively tested with the Divi theme for styling. It offers 100+ customization options with a live preview of all the changes you make. Once you style a form with it then the changes will automatically reflect on all the posts or pages where you have the form.

All the styles are mobile responsive so, they work great on all the different screen resolutions like mobiles, tablets, and desktops. The controls are easy to use like color pickers, range sliders, margin, and padding selectors.

Steps to Install Gravity Booster

• Navigate to your website’s backend and go to Plugins -> Add New.
• Search for Gravity Booster.
• Install and Activate the plugin.

Steps to Style with Gravity Booster

• Once the Gravity Booster plugin is installed and activated then navigate to Forms -> Booster.
• Select the form which you want to style. After form selection, you will see the form styling controls in the left sidebar and form preview in the right section.

With Gravity Booster you can style the following parts of Gravity Forms in Divi theme.

• General Settings: It contains marking all the Gravity Booster styles as important so that Divi’s built-in styling doesn’t overwrite any of your design changes. You can also reset any styles you have created from here.
• Form Wrapper: This section is meant for styling the overall container of the Gravity Forms. You can apply background color, images, font family, border, margin, and padding from here.
• Form Header: It lets you style the container of the form that has the form title and description. There are options for setting the background color, border, margin, and padding.
• Form Title & Description: You can customize the styling of the form’s title and description text by changing its font color, making it bold, italic, uppercase, underlined, setting the alignment position, changing the font size, line height, padding, and margin.
• Field Labels: Field Labels are one of the most important parts of the form. It contains the text for the form field and styling them is easy by using the settings of this section. You can make the field labels bold, italic, uppercase, underline, left/center/right aligned. You can also hide them in case you want to save some space. There are also options to change the asterisk color, and font color as well as options to change the padding values.
• Sub Labels: Sublabels usually show under complex field inputs like address fields, email confirmation fields, name fields, etc. They are usually small in size as compared to labels. From this section, you can make them look the way you want them to.
• Placeholders: Placeholders become extremely important in case you have hidden the labels. Although browsers have a lot of restrictions for styling placeholders, with Gravity Booster you can change their font style to bold, italic, uppercase, and underline. You can also set the font size as well as font color for them.
• Field Description: If you are using a field description for adding additional information about the field then its design can be customized from here. You can style the font size, weight, color, etc. It also has the option to hide the field descriptions from the whole form.
• Text Fields: It has styling controls for the input fields. You can set color, border, background color, height, width, margin, and padding.
• Dropdown Fields: The select field inputs can be designed using this section with controls for background color, font color, font size, height, margin, and padding.
• Radio Inputs: This section contains a control for styling the radio input option labels.
• Checkbox Inputs: This section contains controls for styling the checkbox input option labels.
• Paragraph textarea fields: It lets you design the textarea inputs of your form. Paragraph text area fields are used when you want to enable multiline inputs from users.
• Section Break Title & Descriptions: Section breaks are great for the logical separation of form into different sections. If you are using them in your form then you can design them from here.
• List Fields: If you want to take a table-like input then a list field is the best choice. The controls here let you not only the list field columns but also the headers.
• Submit Button: The designs you apply from this section will not only apply to the submit button but the next and previous buttons as well if you are using a multipage form.
• Confirmation Message: This is the piece of the text that displays once the form is successfully submitted. It can be styled and designed from this section.
• Error Message: This is the text that displays in case any of the form fields fails validation criteria. The error message is usually in red but you can change its font size, color, and font weight from here.

Once you have styled your form then click on the save changes to make it live.

Advanced Styling of Gravity Forms in Divi Theme

With Gravity Booster you can control almost all the aspects of the styling however if you are looking to further elevate the design then you should check out the following premium add-ons.

Material Design Addon

 It is based on Google Material design philosophy which they use around all their products like Gmail, Android, Google Workspace, etc. The process of applying the material design on Gravity Forms in the Divi theme is just one click.

Outline Design Demo   Filled Design Demo

Bootstrap Design Addon

The bootstrap design has a more subtle design change as compared to the material. It is one of the most popular design frameworks that has been adopted on the internet. It can also be enabled on any Gravity Forms in the Divi theme with a click of a button.

View Demo

Tooltips Addon

If you want to show lengthy information about a field or want some videos or images to further provide information about the field or checkbox & radio options then this addon is best suited for you. You can easily match your Divi website design and tooltip design with all the available styling controls.

View Demo

Checkbox & Radio Styler Addon

You can create some stunning designs for your pages with the Divi theme but the default checkboxes and radios are a letdown in comparison. However, with this addon and its wide set of customization controls your form’s checkbox and radio inputs can now match up to the overall aesthetics of the website.

View Demo

Field Icons Addon

One of the most used features of the Divi theme is that it lets you add icons inside buttons, blurbs, and other modules. Similarly with field icons addons let you do the same thing for Gravity Forms input fields.

Fontawesome Icons Demo  Image Icons Demo

Custom Themes Addon

Divi theme lets you export your existing form as a template which can be later imported on other websites or pages. The custom theme addon for Gravity Forms works in the same way as it lets you export the designs you have created.

All of the above addons and Divi themes are a great match to create a highly customized and stylized form for your website.

Frequently Asked Questions

How many forms can you design with the plugins?

You can design an unlimited number of forms on your Divi website. There are no restrictions on the number of forms.

Is this 100% compatible with the Divi theme?

Yes, the styling is fully compatible with the Divi theme. It has been extensively tested specifically for it. However, if you still face an issue then leave a comment below or contact us and we will get back to you with a solution.

Are these add-ons part of the Divi theme?

No, these are 3rd party add-ons that work great with the Divi theme. It’s a mix of free and premium add-ons.