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.

Activate the progress bar Using the progress bar with conditional logic Customize the progress bar Automatically Custom CSS

Activate the progress bar

To enable the progress bar, go to your form Settings → General → enable Progress bar

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 more pages instead of fewer as the respondent advances.

Before executing the page jump, the form cannot know which path the respondent will take, so it cannot predict how much of the form has been completed.

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

Automatically

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. These are the CSS classes needed to customize the progress bar.

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;
}

Paste this code snippet in the Custom CSS box in the design options of your form and adjust the color codes to your own branding.

Click Preview to see the result.

Custom CSS is a Tally Pro feature