Customizing the progress bar
In this article, you’ll learn how to customize the progress bar of your form using our online form builder.
Once you have created a multi-page form, it will appear on top of each page.
You can display the completion progress as:
- steps
- percentage
- page numbers
- hidden
To change that, click on the progress bar in the main view of your form. The display options will be listed in the left-side panel.
Navigate to each page to change its title.
With the help of custom CSS codes using our CSS form generator, you can change the progress bars design. Learn in this article how to add custom CSS to your form.
Below we have listed a few examples.
1. Changing the bottom line color.
#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current] {
border-bottom-color:#ff0000;
}
2. Changing the background color.
#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current] {
background-color: #a4d7e8;
}
3. Changing the text color.
#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current]
{
color:#a4d7e8;
}
Related articles
Similar Articles
Frequently Asked Questions
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.