Customizing the progress bar
The progress bar is displayed to show how far along a user completed the form. It is a user-friendly component that shows the activity on the form.
Once you have created a multi-page form, it will appear on top of each page.
The completion progress can be displayed as:
- steps
- percentage
- page numbers
- hidden
To change that, click on the progress bar in the main view of your form. The progress bar available options will be listed in the left-side panel.
Navigate to each page to change its title.
With the help of custom CSS codes, you can change its design. Learn in this article how to add custom CSS on 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.