{"id":47141,"date":"2025-12-16T08:42:29","date_gmt":"2025-12-16T13:42:29","guid":{"rendered":"https:\/\/docs.gravityforms.com\/?p=47141"},"modified":"2026-01-28T12:22:01","modified_gmt":"2026-01-28T17:22:01","slug":"using-progress-bars-in-multi-page-forms","status":"publish","type":"post","link":"https:\/\/docs.gravityforms.com\/using-progress-bars-in-multi-page-forms\/","title":{"rendered":"Using Progress Bars in Multi-Page Forms"},"content":{"rendered":"\n
<\/span>Dario:<\/b> https:\/\/github.com\/gravityforms\/support-backlog\/issues\/1403<\/pre>\n\n\n\n
Overview<\/h2>\n\n\n\n
Multi-page forms help break long forms into smaller, manageable sections. Gravity Forms includes built-in tools to display a user\u2019s progress, including a progress bar and step indicators when adding the Page Break<\/a> field to a form. These visual cues help users understand their current position in the process, thereby enhancing overall usability.<\/p>\n\n\n\n
This article explains how to enable the Progress Bar or Steps indicator in a multi-page form, how to control navigation, and how to customize the display.<\/p>\n\n\n\n
Requirements<\/h2>\n\n\n\n
A form containing a Page Break<\/a> field (multi-page forms).<\/p>\n\n\n\n
Enabling Multi-Page Navigation<\/h2>\n\n\n\n
    \n
  1. Go to Forms \u2192 Open<\/strong> your form.<\/li>\n\n\n\n
  2. Add one or more Page<\/strong> fields from Standard Fields<\/strong>.
    The first Page field becomes Start Paging<\/strong>.<\/li>\n\n\n\n
  3. Select the Start Paging<\/strong> field.<\/li>\n\n\n\n
  4. Enable your preferred Progress Indicator<\/strong> option.<\/li>\n<\/ol>\n\n\n\n
    The Progress Indicator indicates to users their current position in the form. Refer to the Page Break Common Settings<\/a> for more information about each setting.<\/p>\n\n\n\n
    Progress Indicator Options<\/h2>\n\n\n\n
    Click on the Start Paging<\/strong> element within your form editor screen, and then choose the Field Settings<\/strong> tab in the right-hand panel. The Progress Indicator<\/strong> setting is available there.<\/p>\n\n\n\n
    \"Image<\/a><\/figure>\n\n\n\n
    Progress Bar<\/h3>\n\n\n\n
    Displays a horizontal bar that fills as the user advances through form pages.<\/p>\n\n\n\n
    \"Image<\/a>
    Image showing Progress Bar settings within the form editor<\/figcaption><\/figure>\n\n\n\n
    \"Image<\/a>
    Image showing the Progress Bar in a form.<\/figcaption><\/figure>\n\n\n\n
    Steps<\/h3>\n\n\n\n
    Displays labeled steps for each page in the form. This option is useful when pages represent clear, named sections.<\/p>\n\n\n\n
    \"Image<\/a>
    Image showing the Steps settings in the form editor<\/figcaption><\/figure>\n\n\n\n
    \"Image<\/a>
    Image showing the Steps Progress Indicator in a form.<\/figcaption><\/figure>\n\n\n\n
    None<\/h3>\n\n\n\n
    When the None option is selected, no progress indicator will be shown in the form.<\/p>\n\n\n\n
    \"Image<\/a>
    Image showing the None option selected as a progress indicator.<\/figcaption><\/figure>\n\n\n\n
    Navigation Controls<\/h2>\n\n\n\n
    Navigation controls define how users move between pages in a multi-page form. Conditional logic allows you to <\/span>refine the experience.<\/p>\n\n\n\n
    \"Image<\/a><\/figure>\n\n\n\n
    Next Button<\/h3>\n\n\n\n
    The Next button is used to advance users to the next page of the form. Every multi-page form relies on the Next button to guide users through the sequence of pages. You can update the label to match the tone of the form (e.g., “Continue”, “Next Step”, “Proceed”) or use a custom image to align with your site\u2019s design.<\/p>\n\n\n\n
    Previous Button<\/h3>\n\n\n\n
    The Previous button allows users to navigate back to an earlier page. The Previous button is used when users need to review or adjust their answers before submitting, such as in an application, order form, or multi-step registration.<\/p>\n\n\n\n
    Conditional Logic<\/h3>\n\n\n\n
    Gravity Forms offers two distinct methods for controlling user navigation through multi-page forms: Page Conditional Logic<\/strong> and Next Button Conditional Logic<\/strong>. While both influence navigation, they serve different purposes.<\/p>\n\n\n\n
    Page Conditional Logic<\/strong><\/p>\n\n\n\n
    What it does<\/strong>
    Determines whether an entire page should be shown or skipped<\/em> based on the user\u2019s earlier answers.<\/p>\n\n\n\n
    When to use it<\/strong>
    Use Page Conditional Logic when the content of a full page is only relevant for a subset of users.<\/p>\n\n\n\n
    Example<\/strong>
    A car insurance application asks:
    “Do you want to add coverage for additional drivers?<\/em>“
    Yes<\/strong> \u2192 Show a page that collects information about each additional driver.
    No<\/strong> \u2192 Automatically skip that page and move on.<\/p>\n\n\n\n
    \"Image<\/a><\/figure>\n\n\n\n
    Next Button Conditional Logic<\/strong><\/p>\n\n\n\n
    What it does<\/strong>
    Controls whether the Next<\/strong> button is displayed or enabled. If the conditions aren\u2019t met, the user cannot proceed to the next page.<\/p>\n\n\n\n
    When to use it<\/strong>
    Use this when the user must meet a requirement before<\/em> advancing without hiding any pages.<\/p>\n\n\n\n
    Example<\/strong>
    A volunteer signup form includes required agreement fields:
    “I understand and agree to the volunteer safety guidelines.<\/em>“
    If the user selects Agree<\/strong>, the Next button appears\/enables.
    If they select Do not agree<\/strong>, they cannot proceed<\/span> to the next page.<\/p>\n\n\n\n
    \"Image<\/a><\/figure>\n\n\n\n
    \"Image<\/a><\/figure>\n\n\n\n
    <\/a><\/figure>\n\n\n\n
    Displaying Completion Text<\/h2>\n\n\n\n
    When using the Progress Bar, you may enter Completion Text<\/strong> to display once the user reaches the final page or the confirmation message. This text replaces the standard progress display at 100%.<\/p>\n\n\n\n
    \"Image<\/a>
    Image showing progress bar confirmation message settings.<\/figcaption><\/figure>\n\n\n\n
    \"Image
    Image showing progress bar confirmation message in the front end, including the confirmation message.<\/figcaption><\/figure>\n\n\n\n