> ## 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 banner within your form

> Highlight disclaimers, warnings, or key benefits. Give respondents a quick heads-up or flag invalid input.

export const SupportBanner = () => {
  const titleId = React.useId();
  return <div className="support-banner" role="region" aria-labelledby={titleId}>
      <span className="support-banner__ring support-banner__ring--outer" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--middle" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--inner" aria-hidden="true" />
      <span className="support-banner__ring support-banner__ring--center" aria-hidden="true" />

      <div className="support-banner__content">
        <div className="support-banner__title" id={titleId} role="heading" aria-level="2">Still have questions?</div>

        <div className="support-banner__copy">
          <span className="support-banner__line">Our team is happy to help. Start a live chat using the</span>
          <span className="support-banner__line">
            chat bubble <span className="support-banner__chat-icon" aria-hidden="true" /> in the bottom right, or email us at
          </span>
          <span className="support-banner__line">
            <a href="mailto:support@fillout.com">support{'@'}fillout.com</a>
          </span>
        </div>

        <a className="support-banner__cta" href="mailto:support@fillout.com">Contact us</a>
      </div>
    </div>;
};

## How to add a banner to your form

On the left-hand panel, select `Banner` or drag and drop the field anywhere on your form.

<img src="https://mintcdn.com/fillout-005a867b/vXL9XRlNv0Lls7u6/images/Screenshot2025-10-02at6.12.42PM.png?fit=max&auto=format&n=vXL9XRlNv0Lls7u6&q=85&s=732fe696610bfbac9cf320c3905d410e" alt="Screenshot 2025-10-02 at 6.12.42 PM.png" width="2653" height="1439" data-path="images/Screenshot2025-10-02at6.12.42PM.png" />

Click the banner's <Icon icon="gear-complex" iconType="solid" /> to change its color and icon. The right-hand panel will appear where you can select the appropriate **Alert type**.

<Info>
  This help article does **not** refer to header banners, but rather to banners you can add in your form's body. To add text banners, use the [heading field](https://www.fillout.com/help/heading). For image banners, use the [image field](https://www.fillout.com/help/image-gif).
</Info>

## Show banners only when necessary

Click the banner's <Icon icon="gear-complex" iconType="solid" />. Under **Logic**, `Set conditional logic`.

<img src="https://mintcdn.com/fillout-005a867b/GDuTdz0rJBKQOqLV/images/guides/image-19.png?fit=max&auto=format&n=GDuTdz0rJBKQOqLV&q=85&s=031f94ddeb38f0e83b2ed8483af7b596" alt="PDF Viewer" style={{ width:"83%" }} width="2129" height="672" data-path="images/guides/image-19.png" />

`+ Add condition` to select the relevant question and answer. For this example, we will show the warning banner only when guests are interested in swimming.

<img src="https://mintcdn.com/fillout-005a867b/GDuTdz0rJBKQOqLV/images/guides/image-20.png?fit=max&auto=format&n=GDuTdz0rJBKQOqLV&q=85&s=0ffe58f3b398b3f1311efcc9fa93b480" alt="PDF Viewer" style={{ width:"54%" }} width="936" height="665" data-path="images/guides/image-20.png" />

Take note that default is set to `Show when` and **equals**, which means a banner will appear when a certain option is selected. Alternatively, you can [**conditionally hide fields**](/help/conditional-hiding) and [**add condition groups**](/help/condition-logic-groups).

## Where you can use a form banner

**Inform respondents of policies, rules, and potential dangers**

Banners are a great way to call attention to crucial information and relevant to what a guest or participant will be doing. This gives respondents a better idea of what to expect out of their experience.

**Excite customers and clients with exclusive deals and new features**

You can use a banner to draw a respondent’s focus to a particular service or subscription.

## Related articles

<CardGroup cols={3}>
  <Card title="Hide fields" color="#FFC738" icon="eye-slash" iconType="regular" href="/help/conditional-hiding">
    Hide or show fields based on answers, URL parameters or data.
  </Card>

  <Card title="Condition groups" color="#FFC738" icon="table-tree" iconType="regular" href="/help/condition-logic-groups">
    Show or hide fields based on multiple conditions at once.
  </Card>
</CardGroup>

<SupportBanner />
