> ## Documentation Index
> Fetch the complete documentation index at: https://fillout-005a867b-dependabot-npm-and-yarn-form-data-4-0-6.mintlify.site/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-dependabot-npm-and-yarn-form-data-4-0-6/EDZ5NrQNXN0RrO9B/images/Screenshot2025-02-25at4.57.47PM.png?fit=max&auto=format&n=EDZ5NrQNXN0RrO9B&q=85&s=3353dc1babacf768791093794cc831ad" 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-dependabot-npm-and-yarn-form-data-4-0-6/iDs8lNUK7TJTojmP/images/Screenshot2025-12-01at11.31.12AM.png?fit=max&auto=format&n=iDs8lNUK7TJTojmP&q=85&s=5a30e311afa0fb80d16ae7294eba9ba4" 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-dependabot-npm-and-yarn-form-data-4-0-6/iDs8lNUK7TJTojmP/images/Screenshot2025-12-01at12.22.12PM.png?fit=max&auto=format&n=iDs8lNUK7TJTojmP&q=85&s=863bff1f32a37781d68627c091e90441" 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-dependabot-npm-and-yarn-form-data-4-0-6/iDs8lNUK7TJTojmP/images/Screenshot2025-12-01at12.32.14PM.png?fit=max&auto=format&n=iDs8lNUK7TJTojmP&q=85&s=a2d92d8fbb3c2a1ae2fe72851310d229" 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-dependabot-npm-and-yarn-form-data-4-0-6/iDs8lNUK7TJTojmP/images/Screenshot2025-12-01at12.30.42PM.png?fit=max&auto=format&n=iDs8lNUK7TJTojmP&q=85&s=4aaa0c077cd0355be68a19f503ffa0c0" 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-dependabot-npm-and-yarn-form-data-4-0-6/KaRHLex9fqtFXaSO/images/formsettings.png?fit=max&auto=format&n=KaRHLex9fqtFXaSO&q=85&s=ef36b4441f89f5763d1c0ce0f10e3dc7" 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-dependabot-npm-and-yarn-form-data-4-0-6/iDs8lNUK7TJTojmP/images/Screenshot2025-12-01at12.39.44PM.png?fit=max&auto=format&n=iDs8lNUK7TJTojmP&q=85&s=9829c5c7c5a3c30379177544dc155c9e" 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>
