The progress bar on mobile screens ensures that participants can easily track their position within a survey or quiz—no matter the number of steps involved. By reducing uncertainty and offering immediate feedback, the progress bar helps maintain user engagement and improves overall completion rates.
Key Benefits #
- Greater Clarity: Helps users understand how much of the form is left, minimizing drop-off.
- Higher Completion Rates: Progress visibility improves motivation, especially on longer or multi-step forms.
- Professional Aesthetic: Customizable options ensure the progress bar complements your overall design and branding.
How to Enable and Customize the Mobile Progress Bar #
Open Any Survey or Quiz #
Start by accessing the specific survey or quiz you’d like to enhance from the relevant builder.
Navigate to Styles > Footer #
Once inside the form editor, go to the Styles tab in the top navigation. From there, select the Footer section. This is where layout and visual elements related to the form’s footer—such as navigation buttons and visual indicators—are managed. From here, be sure to switch to the mobile view.
Toggle “Enable Progress Bar” #
Locate the toggle labeled Enable Progress Bar. Simply switch it on to activate the progress bar for mobile users. This toggle allows you to enable or disable the feature per form, giving you flexibility to use it only where it’s most beneficial.
Customize the Progress Bar Appearance #
After enabling the bar, a set of customization options will appear, allowing you to match the progress bar with your brand identity or form aesthetics. You can fine-tune the following elements:
- Step Label Text Style: Modify the color of the step indicator text (if shown) to ensure readability and consistency with your brand’s typography.
- Fill Color: Choose the color that represents completed steps. This helps users instantly recognize how far they’ve progressed.
- Inactive Color: Select a shade for steps yet to be completed. Using a neutral or low-saturation tone helps maintain focus on the active section.
Preview the Mobile Experience in Real Time #
Use the preview feature to see how the progress bar will appear and function on mobile devices. You can copy and paste the preview link in a browser on your mobile device or view the live changes in the builder. This live preview updates instantly as you make changes to colors or text styles, allowing you to achieve your desired look.
Whether you’re collecting feedback, running assessments, or creating lead capture flows, this functionality ensures a seamless and intuitive experience for mobile users.
Frequently Asked Questions #
Where do I enable the mobile progress bar? #
Open your survey or quiz, go to the Styles tab, select the Footer section, switch to mobile view, and toggle on Enable Progress Bar.
Can I enable the progress bar for some forms but not others? #
Yes. The Enable Progress Bar toggle is set per form, so you can use it only where it’s most beneficial.
Does the progress bar work for both surveys and quizzes? #
Yes. The mobile progress bar can be enabled for both surveys and quizzes from their respective builders.
What can I customize on the progress bar? #
You can adjust the step label text style, the fill color for completed steps, and the inactive color for steps yet to be completed.
Why use a progress bar on mobile? #
It gives users greater clarity on how much is left, which improves motivation and completion rates, especially on longer multi-step forms.
How do I preview the mobile progress bar? #
Use the preview feature in the builder or open the preview link in a browser on your mobile device; changes update in real time as you edit.
