Customizing Your HTML Form's Progress Bar

======================================

Progress bars are an essential element for user experience (UX) when working with long forms or surveys online. They provide instant feedback to visitors about their current position within a lengthy process and give them a sense of completion. In this article, we'll dive into how you can customize the appearance and behavior of your HTML form's progress bar using JotForm.

### Accessing Progress Bar Settings

To access the settings for your form's progress bar, follow these steps:

1. Log in to your JotForm account.

2. Find the specific form whose progress bar settings you want to modify.

3. Click on the three dots (⋯) located at the top right corner of the form builder and select Edit Form from the drop-down menu.

### Customizing Progress Bar Appearance

Once inside the Style tab, scroll down until you find the Progress Bar & Page Numbers section:

!'progress-bar-color'(/assets/img/basics/form-builder-progress-bar-settings-01.png)

Here are some key settings to focus on for customizing your progress bar's appearance:

#### 1. Progress Bar Color

Use this setting to choose the background color of the progress bar itself.

#### 2. Header/Footer Text Color

Select a text color that contrasts well with your chosen background so visitors can easily read it, regardless of their visual impairment or screen resolution.

### Customizing Page Numbers Appearance

To customize how page numbers appear in your form's header or footer:

1. Click on the three dots (⋯) at the top right corner of the Form Editor and select Form Settings from the drop-down menu.

2. Scroll down until you find the Page Numbering & Navigation` section.

Here, you can adjust settings like text color, alignment, and more to match your form's overall design:

!'page-number-settings'(/assets/img/basics/form-builder-page-number-settings-01.png)

### Displaying Page Numbers Only

If you prefer not to display a progress bar at all but still want visitors to be able to navigate through multiple pages easily:

1. Go back to the Form Settings by following step 2 above.

2. Under the General` tab, uncheck the box next to `Show Progress Bar`.

### Additional Tips

* Remember that page numbers and/or progress bars will only appear if your form has more than one page.

* To add additional pages to your form:

+ Open your form in JotForm's Form Editor.

+ Click on Insert` > Page Break`.

3. Use these elements judiciously; too many can make the user experience feel clunky.

-------

By following this step-by-step guide, you've learned how to customize every aspect of your HTML form's progress bar and page numbers using JotForm. Whether it's changing colors or deciding what information to display at each stage, these simple adjustments can greatly enhance both functionality and aesthetics for visitors completing long forms online today!.

Html loading bar