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>'.$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> <p>Step <span>'.$form_page.'</span> of <span>'.$total_page.'</span> </p> <div aria-hidden="true"> <div><span>'.$percent.'%</span></div> </div> </div>'; return $progress_bar; }
