Activate the progress bar

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 bar Using the progress bar with conditional logic Customize the progress bar Automatic design Custom 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 General section, turn on the Progress bar toggle.

Click the Save changes button 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.