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...
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;
}