The progress bar provides a clear way for respondents to understand how much of the form they have completed and encourages them to continue until the end.
Progress bar is a free Tally feature.
Activate the progress barUsing the progress bar with conditional logicCustomize the progress barAutomatic designCustom CSS
Activate the progress bar
To enable the progress bar:
- Open the form you want to add a progress bar
- Click on your form
Settings
- Under the
Generalsection, turn on theProgress bartoggle.
- Click the
Save changesbutton at the bottom of your page.
Now you can go back to the form editor and click
Preview to see the progress bar in action.
The color of the progress bar will automatically adjust when you add a cover image.
Using the progress bar with conditional logic
If your form contains multiple page jumps, the progress bar may change according to your conditional logic in ways that are counterintuitive. For instance, based on the conditional logic, the progress bar may show an incorrect number of pages left in the form as the respondent advances.
That’s because the form can’t know which path the respondent will take, so it can’t show how much of the form is left to complete.
To avoid confusion for your respondents, we advise you to disable the progress bar if your form contains multiple page jumps.
Customize the progress bar
Automatic design
The color scheme of the progress bar will automatically adjust according to the text color, cover image, and design theme of your form.
Custom CSS
With Custom CSS, you can manually change the design of the progress bar. Below are the CSS classes needed to customize the progress bar.
Custom CSS is a Tally Pro feature.
Description | CSS Class |
Progress bar container | .tally-progress-bar |
Progress bar item | .tally-progress-bar-item |
Progress bar completed item | .tally-progress-bar-item::after |
This example code snippet changes the colors of the progress bar into dark and light blue.
.tally-progress-bar-item { background-color: #CCE4FE; } .tally-progress-bar-item::after { background-color: #0057FF; }
Click on
Design after hovering over your form title. Then, paste this code snippet in the Custom CSS box in the design options of your form and adjust the color HEX codes to your own branding.
Click
Preview to see the result.