Customizing the progress bar of your form

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:

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

4. Changing the progress bar colour

#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

• Multi-Page Forms
• How to remove pages