Using Gravity Forms ‘gform_progress_steps’ PHP filter

by

The gform_progress_steps Gravity Forms PHP filter can be used to modify or replace the default progress steps markup for multi-page forms.

Usage

To apply this filter to all forms, use the following code:

add_filter('gform_progress_steps', 'your_function_name', 10, 3);

To limit the scope of your function to a specific form, append the form ID to the end of the hook name:

add_filter('gform_progress_steps_5', 'your_function_name', 10, 3);

Parameters

  • $progress_steps (string): HTML string containing the progress steps markup.
  • $form (Form Object): The current form object.
  • $page (integer): The current page number.

More information

See Gravity Forms Docs: gform_progress_steps

Examples

Add a custom class to the active step

This example modifies the progress steps markup by adding a custom class to the active step.

add_filter('gform_progress_steps', 'progress_steps_markup', 10, 3);

function progress_steps_markup($progress_steps, $form, $page) {
    $active_class = 'gf_step_active';
    $progress_steps = str_replace($active_class, $active_class . ' your_custom_class', $progress_steps);

    return $progress_steps;
}

Replace the default progress steps markup

This example replaces the default progress steps markup with custom HTML.

add_filter('gform_progress_steps', 'replace_progress_steps', 10, 3);

function replace_progress_steps($progress_steps, $form, $page) {
    $custom_markup = '<div class="custom-progress-steps">Your custom progress steps markup here</div>';

    return $custom_markup;
}

Add custom content before and after the progress steps

This example adds custom content before and after the progress steps.

add_filter('gform_progress_steps', 'add_custom_content', 10, 3);

function add_custom_content($progress_steps, $form, $page) {
    $before_content = '<div class="before-progress-steps">Your custom content before progress steps</div>';
    $after_content = '<div class="after-progress-steps">Your custom content after progress steps</div>';

    return $before_content . $progress_steps . $after_content;
}

Hide progress steps on specific pages

This example hides progress steps on specific pages by adding a custom class to hide the steps.

add_filter('gform_progress_steps', 'hide_progress_steps', 10, 3);

function hide_progress_steps($progress_steps, $form, $page) {
    $pages_to_hide = array(2, 3);

    if (in_array($page, $pages_to_hide)) {
        $progress_steps = str_replace('gf_step', 'gf_step hidden_step', $progress_steps);
    }

    return $progress_steps;
}