{"id":36061,"date":"2019-11-27T17:03:56","date_gmt":"2019-11-27T17:03:56","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=36061"},"modified":"2024-05-14T11:03:28","modified_gmt":"2024-05-14T11:03:28","slug":"customizing-the-progress-bar","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/customizing-the-progress-bar\/","title":{"rendered":"Customizing the progress bar of your form"},"content":{"rendered":"\n

In this article, you’ll learn how to customize the progress bar of your form using our online form builder<\/a>. <\/p>\n\n\n\n

Once you have created a multipage form by adding a New page\/Page break<\/b>, you will have, by default, a progress bar placed at the top of the page.<\/p>\n\n\n\n

You can display the progress bar in multiple ways. To check out the different options, click on the progress bar placed at the top of the page. The Layout<\/b> options will open on the right-side of the page.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Page<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

a) Percentage<\/b>: this shows the percentage of completion on the form<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Progress<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

b) Steps<\/b>: this is set by default<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Progress<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

c) Page numbers<\/b><\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"Progress<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

d) Hidden:<\/b> you can choose to hide the progress bar<\/p>\n\n\n\n

Below the Layout<\/b> options, you can change each page’s title or disable them by turning off the Show pages titles<\/b> toggle.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Change<\/a><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

Extra customizations<\/strong><\/h2>\n\n\n\n

If you want to bring extra customizations to the progress bar, you can always use custom CSS.\u00a0Learn\u00a0in this article<\/a> how to add custom CSS to your form.<\/p>\n\n\n\n

Here you can find some examples:<\/p>\n\n\n\n

1. Changing the bottom line color<\/b><\/p>\n\n\n\n

#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current] {\n    border-bottom-color:#ff0000;\n}\n\n<\/code><\/pre>\n\n\n\n
\"Change<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
2. Changing the background color<\/b><\/p>\n\n\n\n
#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;
}

<\/pre>\n\n\n\n
\"Change<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
3. Changing the text color<\/b><\/p>\n\n\n\n
#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;
 }

<\/pre>\n\n\n\n
\"Change<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
4. Changing the progress bar color<\/b><\/p>\n\n\n\n
#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\"]\n{background-color: #FF0000}\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\"Progress<\/a><\/figure>\n\n\n\n
<\/p>\n\n\n\n
To learn more about multi-page forms you can also check out our tutorial here:<\/p>\n\n\n\n
\n