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

• Multi-Page Forms
• How to remove pages