Style Gravity Forms Progress Bar In Divi Theme

In this how-to you’ll learn how to style gravity forms progress bar elements.

For a multi-page form, gravity form can have a progress bar field. A progress bar field includes a progress bar title and progress bar.

Pre-requisites

  1. A WordPress website
  2. Divi Theme by Elegant Themes
  3. Gravity Forms plugin
  4. WP Tools Gravity Forms Divi Module plugin

Tools

  1. Computer

Total Duration : 4 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Setup Gravity Forms Module On Divi Builder

Setup Gravity Forms Module On Divi Builder
  1. Install all the pre-requisite plugins/theme.
  2. Setup a gravity form.
  3. Embed the form on divi page builder.
  4. Follow this guide for details
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Style Gravity Forms Progress Bar Title

Style Gravity Forms Progress Bar Title
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Progress Bar Title
  2. Set progress bar field container spacing by setting values for margin and padding
  3. Style progress bar title typography by setting values 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 cards required.

Step 3 - Style Gravity Forms Progress Bar

Style Gravity Forms Progress Bar
  1. In the divi module, goto Gravity Forms Settings > Design (Tab) > Progress Bar
  2. Style the Progress Bar Color. It's the background color for the progress bar completed.
  3. Style the Text Color. It's the font color for the text within the progress bar.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.