Using the Mobile Progress Bar for Surveys and Quizzes

What is the Mobile Progress Bar?

The mobile progress bar is a visual indicator that shows respondents their current position within a multi-step survey or quiz when viewed on a mobile device. It displays the number of steps completed and the number remaining, helping to guide users through the form. This feature is automatically hidden on desktop views and on single-step forms to maintain a clean interface.

Benefits of the Mobile Progress Bar

  • Reduce Abandonment: By showing clear progress, users are more likely to complete the form.
  • Brand Alignment: Customize the colors to match your brand identity.
  • Universal Compatibility: Works seamlessly with both the 'Stick to card' and 'Stick to page' footer types.
  • Improved User Experience: Provides clear feedback, encouraging users to finish.

How to Enable the Mobile Progress Bar

Step 1: Access Surveys or Quizzes

From your sub-account's side navigation bar, click on Sites. Then, in the top navigation ribbon, select either Surveys or Quizzes.

Step 2: Open a Survey or Quiz

To edit an existing survey or quiz, click the three dots icon next to its name and select Edit. To create a new one, click the blue + Add Survey or + Add Quiz button in the upper right corner.

Step 3: Open the Styles & Options Menu

In the builder interface, click on Styles & Options located at the top-right of the page.

Step 4: Activate the Progress Bar

Scroll down to the Footer Section and expand it. Use the device selector dropdown next to Footer and choose Phone. You must be in phone mode to enable this feature. Then, toggle the Enable Progress Bar switch to the on position.

Step 5: Customize the Colors

You can set three distinct colors to match your branding:

  • Step Text Color: Controls the color of the step counter (e.g., "1 of 3").
  • Progress Bar Fill: Sets the color of the completed portion of the bar.
  • Progress Bar Inactive: Defines the color of the remaining, unfilled segment.

Once you have configured the colors, click the blue Save button to apply your changes.

Frequently Asked Questions

Does the progress bar appear on desktop?

No, this feature is designed exclusively for mobile devices and remains hidden on desktop views.

Why is the Enable Progress Bar toggle grayed out?

This happens when the builder is in desktop mode. You must switch the device selector to Phone to access and activate the toggle.

What happens with a single-step survey?

The progress bar is automatically hidden on single-step surveys and quizzes because there is no progression to display.

Yes, it works correctly with both the 'Stick to card' and 'Stick to page' footer settings.

Are existing surveys updated automatically?

No, the progress bar is disabled by default. You need to enable it manually for each individual survey or quiz.