Gravity Forms - Custom Progress Bar?

Can someone explain to me what code is needed for modifying a Gravity Forms progress bar? I'd like to change the default progress bar to use custom graphics for each step.

Beginnig:

Step 1:

Step 2:

I tried following this gravity forms page but the directions didn't work on my site.

Code:

 add_filter( 'gform_progress_bar', 'my_custom_function', 10, 3 );
 function my_custom_function( $progress_bar, $form, $confirmation_message ) 
 {

      $progress_bar =
           '<ul>
                <li>Page 1</li>
                <li>Page 2</li>
                <li>Page 3</li>
            </ul>';

      return $progress_bar;
 }

Any ideas?

3 Answers

Maybe try something like this:

add_filter( 'gform_progress_bar', 'custom_progress_bar', 10, 3 );
function custom_progress_bar( $progress_bar, $form, $confirmation_message ) {

    $current_page = GFFormDisplay::get_current_page( $form['id'] );

    if($current_page == 1) {
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 2){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 3){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 4){
        $progress_bar = '<img src="path/to/image">';
    } else if($current_page == 5){
        $progress_bar = '<img src="path/to/image">';
    }

    return $progress_bar;
}

The sample code provided below is what I used to hide the progress bar only on the first page, but shows on the rest of the pages. I believe you should just be able to return the image of your steps for each of your pages:

add_filter( 'gform_progress_bar', 'hide_progress_bar_wrap', 10, 3 );
function hide_progress_bar_wrap( $progress_bar, $form, $confirmation_message ) {

    $current_page = GFFormDisplay::get_current_page( $form['id'] );

    if($current_page == 1) {
        $progress_bar = '<span class="wrap_progress_bar" style="visibility:hidden;display:none">'.$progress_bar.'</span>';
    }

    return $progress_bar;
}

Hope it works!

Gravity forms has this inbuilt as their settings now. You can simply adjust from a progress bar to steps in the settings, then apply additional CSS to style as needed. No need to use a custom graphic for this.

Simplified custom progress bar

// Used the filter gform_progress_bar_8, replace 8 by your form_id

// Showing case for total 4 steps gravity form

add_filter( 'gform_progress_bar_8', 'op_custom_progress_bar', 10, 3 );
    function op
_custom_progress_bar( $progress_bar, $form, $confirmation_message ) {
        $total_page = 4;
        $current_page = GFFormDisplay::get_current_page( $form['id'] );
        $percent = 25;
        $form_page = 1;
        if($current_page == 1) {
            $percent = 25;
            $form_page = 1;
        } else if($current_page == 2){
            $percent = 50;
            $form_page = 2;
        } else if($current_page == 3){
            $percent = 75;
            $form_page = 3;
        }
            $progress_bar = '
                <div id="gf_progressbar_wrapper_8" class="gf_progressbar_wrapper">
                    <p class="gf_progressbar_title">Step <span class="gf_step_current_page">'.$form_page.'</span> of <span class="gf_step_page_count">'.$total_page.'</span>
                    </p>
                    <div class="gf_progressbar gf_progressbar_blue" aria-hidden="true">
                        <div class="gf_progressbar_percentage percentbar_blue percentbar_'.$percent.'" style="width:'.$percent.'%;"><span>'.$percent.'%</span></div>
                    </div>
                </div>';
        return $progress_bar;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Sophia Al-Mansoor

Sophia Al-Mansoor

Global Business & E-Commerce Reporter

Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.

Share this article
Twitter Facebook Pinterest