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 multipage form by adding New page/Page break, you will have by default a progress bar placed at the top of the page.
You can display the progress bar different ways. To check out different options, you have to click on the progress bar placed at the top of the page. The options can be found under Layout, Display as:
a) Hidden: you can choose to hide the progress bar
b) Steps: this is set by default
c) Percentage: this shows the percentage of completion on the form
d) Page numbers
In order to change each page’s title, you will have to navigate to each page and edit Page title.
Extra customizations
If you want to bring extra customizations to the progress bar, you can always use custom CSS. . Learn in this article how to add custom CSS to your form.
Here you can find some examples:
#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;
}
#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; }
#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; }
#form > div[data-role="page"] > div[data-role="page-header"] > div[data-role="pagination"][data-type="percents"] > div[data-role="progress-bar"] > div[data-role="progress"]
{background-color: #FF0000}
To learn more on multi-page forms you can also check out our tutorial here:
Related articles
Your email address will not be published.
Here is a list of the most frequently asked questions. For more FAQs, please browse through the FAQs page.
Hello! I want to change the color of the percentage progress bar, but my CSS skills leave a bit to be desired, so I am not able to figure out how to adapt the bottom line color instructions for that purpose. How can I go about making that change?
Hello Jeremy! Please use the below CSS code to change the percentage progress bar:
#form > div[data-role=”page”] > div[data-role=”page-header”] > div[data-role=”pagination”][data-type=”percents”] > div[data-role=”progress-bar”] > div[data-role=”progress”] {
background-color:#ff0000;
}
If you need assistance with anything else, please don’t hesitate to reach out.
Have a great day!