Skip to content

Style Gravity Forms Progress Bar In Divi Theme

In this how-to you’ll learn how to easily customize your Gravity Forms progress bar elements.

For a multi-page form, a Gravity Form can have a progress bar field. A progress bar field includes a progress bar title and the progress bar itself.

Pre-Requisites

Section titled “Pre-Requisites”

Progress Bar Title Styling

Section titled “Progress Bar Title Styling”

Style Gravity Forms Progress Bar Title

  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Progress Bar Title

  2. Control the space around your progress bar field container by adjusting the margin (outer space) and padding (inner space) values.

  3. Customize your progress bar title’s text design by configuring the options for font, font weight, font style, text alignment, text color, text size, letter spacing, line height, and text shadow.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Progress Bar Styling

Section titled “Progress Bar Styling”

Style Gravity Forms Progress Bar

  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Progress Bar

  2. Customize the Progress Bar Color. This sets the background color for the completed portion of the progress bar.

  3. Customize the Text Color. This sets the font color for the text displayed within the progress bar.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial