> ## Documentation Index
> Fetch the complete documentation index at: https://fillout.com/help/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a progress bar

> Customize the default progress bar that shows up when respondents answer your Fillout form.

## What is a progress bar?

A **progress bar** lets respondents know how much of the form have been completed and how much remains. By default, respondents will see a progress bar at top of the form.

<img src="https://mintcdn.com/fillout-005a867b/h_QfN-F56vlvgBC6/images/Screenshot2025-02-25at4.57.47PM.png?fit=max&auto=format&n=h_QfN-F56vlvgBC6&q=85&s=629b8b11a2032893cdcaea0bde2eca9f" alt="Screenshot of the Form designer tab of a form" width="2695" height="1443" data-path="images/Screenshot2025-02-25at4.57.47PM.png" />

## How to change the color

Click `Theme` to open the **Form designer**. Then, change the `Primary` color.

<img src="https://mintcdn.com/fillout-005a867b/X5Knozc6R2mf_oWT/images/Screenshot2025-12-01at11.31.12AM.png?fit=max&auto=format&n=X5Knozc6R2mf_oWT&q=85&s=10f02ad8dac8613c465c77df8ce0a004" alt="Screenshot 2025-12-01 at 11.31.12 AM.png" width="2609" height="1443" data-path="images/Screenshot2025-12-01at11.31.12AM.png" />

<Note>
  Changing the primary color will also update your button color. If you want your button to stay the same, adjust it directly in its settings. More info [here](https://www.fillout.com/help/button-types#customize-button).
</Note>

## Use a multi-step progress bar

<Steps>
  <Step title="Add a progress bar field">
    On the left-hand panel of your form, click `Progress bar`.

    <img src="https://mintcdn.com/fillout-005a867b/X5Knozc6R2mf_oWT/images/Screenshot2025-12-01at12.22.12PM.png?fit=max&auto=format&n=X5Knozc6R2mf_oWT&q=85&s=988885db64d90e84fe510d600cce4b11" alt="Screenshot 2025-12-01 at 12.22.12 PM.png" width="2609" height="1439" data-path="images/Screenshot2025-12-01at12.22.12PM.png" />
  </Step>

  <Step title="Customize your progress bar">
    Click the **progress bar** to customize it. This will open the right-hand panel where you can configure its settings.

    <img src="https://mintcdn.com/fillout-005a867b/X5Knozc6R2mf_oWT/images/Screenshot2025-12-01at12.32.14PM.png?fit=max&auto=format&n=X5Knozc6R2mf_oWT&q=85&s=e036f13ee0649e71c8f5f36d9d29e71f" alt="Screenshot 2025-12-01 at 12.32.14 PM.png" title="Screenshot 2025-12-01 at 12.32.14 PM.png" style={{ width:"88%" }} width="2101" height="1333" data-path="images/Screenshot2025-12-01at12.32.14PM.png" />

    Your progress bar will default to 3 steps. You can edit their names and `+ Add new steps` if needed.
  </Step>

  <Step title="Reference steps">
    Navigate to each page (except Cover and Ending) and choose which step they should go into in **Current page progress**.

    <img src="https://mintcdn.com/fillout-005a867b/X5Knozc6R2mf_oWT/images/Screenshot2025-12-01at12.30.42PM.png?fit=max&auto=format&n=X5Knozc6R2mf_oWT&q=85&s=f6fdfa01d2a06544c1d520d3cbfdcee5" alt="Screenshot 2025-12-01 at 12.30.42 PM.png" title="Screenshot 2025-12-01 at 12.30.42 PM.png" style={{ width:"89%" }} width="2094" height="1329" data-path="images/Screenshot2025-12-01at12.30.42PM.png" />
  </Step>
</Steps>

## Remove the progress bar

If you used a multi-step progress bar, you remove it in the right-hand panel. Either way, you can click form settings on the upper right area.

<img src="https://mintcdn.com/fillout-005a867b/y7OTwbmw3ifD57iM/images/formsettings.png?fit=max&auto=format&n=y7OTwbmw3ifD57iM&q=85&s=f8b06647697e32309d06a0c1ef3d6e0b" alt="form settings.png" title="form settings.png" style={{ width:"35%" }} width="737" height="137" data-path="images/formsettings.png" />

Navigate to `Form behavior` and untoggle the `Show progress bar` switch.

<img src="https://mintcdn.com/fillout-005a867b/X5Knozc6R2mf_oWT/images/Screenshot2025-12-01at12.39.44PM.png?fit=max&auto=format&n=X5Knozc6R2mf_oWT&q=85&s=6f23893dd93cc9a048b3597bcdacf04e" alt="Screenshot 2025-12-01 at 12.39.44 PM.png" width="2541" height="604" data-path="images/Screenshot2025-12-01at12.39.44PM.png" />

## **Related articles**

<CardGroup cols={3}>
  <Card color="#FFC738" icon="palette" iconType="regular" href="/themes" title="Themes">
    Select from hundreds of themes or create your own.
  </Card>

  <Card color="#FFC738" icon="rectangles-mixed" iconType="regular" href="/layout" title="Page layout">
    Edit the position of your form's fields and background image.
  </Card>

  <Card color="#FFC738" icon="rabbit" iconType="regular" href="/auto-jump" title="Auto jump">
    Auto-redirect to the next page after making a selection.
  </Card>
</CardGroup>
