Generic selectors
Exact matches only
Search in title
Search in content

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:

New page

a) Hidden: you can choose to hide the progress bar

b) Steps: this is set by default

Progress bar steps

c) Percentage: this shows the percentage of completion on the form

Percentage new page

d) Page numbers

Page numbers

In order to change each page’s title, you will have to navigate to each page and edit Page title.

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


Change progress bar colour CSS

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


Change background colour CSS

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


Change text colour CSS

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}
Progress bar colour

To learn more on multi-page forms you can also check out our tutorial here:


Related articles

2 comments

  1. 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?

    1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Frequently Asked Questions

Here is a list of the most frequently asked questions. For more FAQs, please browse through the  FAQs page.

Is this service free?
Yes, we offer a free form builder service. Just sign up to the Basic plan and you are all set. This plan is forever free, but you are limited with a few features only, such as 5 forms per account, 100 submissions per month and you have to keep the backlink to 123FormBuilder on your forms. Check out our features matrix for more information.
How many forms can I create?
It depends on the service plan you are on. Higher service plans enable more features, including more web forms for your account. If you need more forms, go to the My Account section of your account and click the upgrade button. To create an unlimited number of forms, either upgrade to the Platinum service plan or higher. Consult our features matrix for more information.
How can I publish my forms?
You can publish your forms in many ways, by using their direct URL or HTML link, embedding them with a JavaScript code, Inline HTML or iFrame, using the Facebook app or the WordPress plugin, using popups, the Blogger code snippet and many more. Once you have created and customized your form, go to the Publish section to complete your work. Read more in our documentation.
How do I change my form design?
You can change the design of your form for more information. in the Themes section, which is located in your form settings. We offer a set of more than 30 predefined form themes for your forms, but you can also create your own from scratch. You can customize the submit button, the logo and more. To apply your own stylesheets, all forms come with a custom CSS editor.

Can't find what you're looking for?