🎉 Celebrate with 10% OFF on All Products! Use Code: GFEX10 Or Buy Any 2+ Items for 30% OFF with Code: GFEX30!

How can we help you?

Find answers, tutorials, and guides to get the most out of Gravity Extra add-ons. (DEV Preview)

Gravity Forms Nice Custom Style Progress Bar Documentation

Last updated: September 14, 2026 • Author: Bong Huynh
Table of Contents

Video walkthrough

Custom Progress Bars for Multi-Page Gravity Forms (No CSS)
A short walkthrough: install the add-on, split your form into pages, turn on Progress Bar in Form Settings and pick a style, then watch the step dots, percentage bar and vertical meter update. Watch on YouTube


Documentation & Setup Guide

Gravity Forms Nice Custom Style Progress Bar Add-on

The Gravity Forms Nice Custom Style Progress Bar add-on replaces the default, plain progress indicators in Gravity Forms with 6 modern, responsive, and customizable designs. Whether you are creating multi-step surveys, customer onboarding workflows, or registration checkouts, this guide walks you through complete installation, per-form configuration, developer hooks, and styling options.


🧩 Gravity Forms: 2.5+


⚡ WordPress: 5.8+


🐘 PHP: 7.4 – 8.3


📦 Version: 1.4.0


✓ Dependencies: Zero Bloat

1. System Architecture & Requirements

This add-on is engineered directly on top of the official Gravity Forms Add-On Framework, ensuring 100% compliance with native page break mechanisms, AJAX multi-page submissions, and security protocols.

Component Minimum Version Recommended Notes
WordPress 5.8+ 6.4+ / 6.7+ Fully compatible with Classic & Block Editor
Gravity Forms 2.5+ 2.8+ / 3.1+ Requires Page Break fields to form steps
PHP Environment 7.4 8.1 – 8.3 Zero external binary or exec dependencies
Form Navigation Standard Reload AJAX Enabled Provides fluid, instantaneous progress updates

2. Step-by-Step Installation & Setup Guide

Step 1: Install and Activate the Plugin

  1. Download the plugin ZIP file from your GravityExtra My Account dashboard.
  2. In your WordPress Admin, go to Plugins → Add New → Upload Plugin.
  3. Select the downloaded ZIP file, click Install Now, then click Activate Plugin.

Step 2: Activate Your License Key

Navigate to Forms → Settings → Progress Bar Add-On. Paste your license key and click Activate to enable automatic updates and one-click support directly in your dashboard.

Step 3: Enable Progress Bar in Form Settings

Open your multi-step form in Gravity Forms. Go to Settings → Progress Bar Settings. Check the Enabled box, and click on any of the 6 visual style thumbnails to assign that style to this specific form:

Gravity Forms Progress Bar Settings

Figure 1: Enable Progress Bar checkbox and interactive style selector thumbnails in Gravity Forms Form Settings.

3. Deep-Dive: Exploring the 6 Custom Progress Bar Styles

Each style is crafted with scoped CSS and semantic HTML, ensuring high visual clarity across desktops, tablets, and smartphones.

1️⃣ Style 1: Horizontal Numbered Step Nodes

Best for Surveys & Checkouts

Features connected circular nodes numbered 1, 2, 3… along an animated track line. Steps already completed are highlighted in green (step_past), while the active step receives glowing highlight styling (progressbar_current).

Progress Bar Style 1: Numbered Step Nodes

Figure 2: Style 1 preview with connected numbered step indicators.

2️⃣ Style 2: Horizontal Modern Loader Bar with Percentage

Best for SaaS & Lead Forms

A sleek, continuous horizontal fill track that smoothly expands as users advance through pages. Features a dynamic percentage bubble badge (e.g. 20%, 40%, 60%) anchored to the leading edge of the progress bar.

Progress Bar Style 2: Horizontal Loader with Percentage

Figure 3: Style 2 preview with horizontal loading bar and dynamic percentage badge.

3️⃣ Style 3: Vertical Stepper Timeline with Connectors

Best for Two-Column & Split Layouts

A vertical timeline displaying labeled stage pills (Step 1, Step 2, Step 3…). Ideal when embedding Gravity Forms inside split-screen landing pages or alongside a dedicated sidebar container.

Progress Bar Style 3: Vertical Stepper Timeline

Figure 4: Style 3 preview with vertical stage timeline connectors.

4️⃣ Style 4: Vertical Loader Bar with Live Percentage

Best for Compact Sidebars

A clean vertical progress meter that fills from bottom to top with real-time percentage tracking. Highly compact, taking minimal horizontal space while keeping progress unmistakably clear.

Progress Bar Style 4: Vertical Fill Bar

Figure 5: Style 4 preview with vertical percentage fill meter.

5️⃣ Style 5: Segmented Pie Progress Indicator

Best for Interactive Quizzes & Games

Calculates exact degree slices dynamically based on the total page count. As each page is visited, pie segments rotate into place with the current step number (e.g. Step 2) displayed cleanly in the center donut cutout.

Progress Bar Style 5: Segmented Pie Indicator

Figure 6: Style 5 preview with rotating radial pie slices and central step label.

6️⃣ Style 6: Circular Animated SVG Radial Dial

Best for Modern SaaS & Dashboards

A vectorized SVG circular gauge that renders with sharp resolution on all Retina displays. Uses SVG stroke calculations to fill the dial smoothly with live percentage readout in the center.

Progress Bar Style 6: Animated Circular SVG Dial

Figure 7: Style 6 preview with animated circular SVG stroke fill.

4. Developer Customizations & CSS/PHP Hooks

Tailor progress bar styling to match your exact website color palette using straightforward CSS overrides or filter the rendered HTML via PHP hooks.

Customizing Brand Accent Colors via CSS

Add the following snippet to your theme’s style.css or WordPress Customizer (Appearance → Customize → Additional CSS) to change the progress bar accent color to your brand’s color: 

/* Custom Accent Color for Gravity Forms Progress Bar (Style 1 & 2) */
.gf_nice_progressbar .style1 li.progressbar_current span,
.gf_nice_progressbar .style1 li.step_past span {
    background-color: #2563EB !important; /* Your Brand Color */
    border-color: #2563EB !important;
}

.gf_nice_progressbar .style1 li.progressbar_current::before,
.gf_nice_progressbar .style1 li.step_past::before {
    border-color: #2563EB !important;
}

.gf_nice_progressbar .style2 .loader {
    background: #2563EB !important;
}

/* Customizing Radial Dial Color (Style 6) */
.gf_nice_progressbar .circular-chart path.circle {
    stroke: #2563EB !important;
}

Filtering Progress Bar Markup via PHP Hook

You can programmatically modify or append custom containers around the progress bar using the native Gravity Forms gform_progress_bar filter in your child theme’s functions.php: 

add_filter( 'gform_progress_bar', function( $progress_bar, $form, $confirmation_message ) {
    // Only target a specific form ID (e.g. Form 15)
    if ( isset( $form['id'] ) && $form['id'] == 15 ) {
        // Wrap with a custom tracking container
        $progress_bar = '<div class="custom-progress-wrapper" data-form="15">' . $progress_bar . '</div>';
    }
    return $progress_bar;
}, 20, 3 );

5. Troubleshooting & Production FAQ

Q: Why is the custom progress bar not showing up on my form?

Check two settings: (1) Ensure your form has at least one Page Break field added. Progress bars only display on multi-page forms. (2) Go to Form Settings → Progress Bar Settings and confirm that the Enabled checkbox is checked and a style thumbnail is selected.

Q: Does this add-on support forms embedded with AJAX?

Yes, 100%. In fact, AJAX is highly recommended ([​gravityform id=”X” ajax=”true”​]) because step transitions occur instantaneously without full page refreshes, providing the smoothest animation for progress bar fills.

Q: Can I use different styles on different forms on the same website?

Yes. Style settings are stored individually per form. For example, your registration form can use Style 1 (Step Nodes), while your checkout form uses Style 2 (Horizontal Loader) and a client survey uses Style 6 (Radial Dial).

Q: How does the add-on handle conditional page breaks?

Gravity Forms calculates the active maximum page count dynamically during form rendering. The add-on hooks into GFFormDisplay::get_max_page_number on every step transition, dynamically adjusting the total steps and percentage calculation accordingly.

6. Resource Hub & Quick Links

Was this article helpful?

Let us know how we can improve our docs.

0
0
Your Cart
Your cart is emptyReturn to Shop
To find out your shipping cost , Please proceed to checkout.
Continue Shopping
🔥 FREQUENTLY BOUGHT TOGETHER
Complete Combo & Save 40%!
ITEM IN YOUR CART
Gravity Forms Klaviyo Add-on
$39.00/yr
+
🎁 RECOMMENDED ADD-ON SAVE 40% OFF
Original Price: $39.00/yr
Bundle Special Price: $23.40/yr