> ## 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.

# Cover page

> Welcome users to your form with an animated cover page. Customize design and add a logo to match your brand.

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 cover page

Click `+ Add page` followed by **Cover**. Then, enter the text.

<img src="https://mintcdn.com/fillout-005a867b/T9p5DaSOFZV4yfO2/images/Screenshot2025-10-01at4.50.00PM.png?fit=max&auto=format&n=T9p5DaSOFZV4yfO2&q=85&s=f01a98fa6b083674c6c7b65a7fb9399e" alt="Screenshot 2025-10-01 at 4.50.00 PM.png" width="2634" height="1437" data-path="images/Screenshot2025-10-01at4.50.00PM.png" />

When the form is opened, the text will **animate smoothly**. On the left-hand panel, you can customize your cover page by:

* Editing the button text
* Adding an image above the title
* Changing the custom cover page [layout](https://www.fillout.com/help/layout)

To customize the **design** of your page and add a [logo](/help/logo), click `Theme` in the upper left area. Learn more [here](/help/themes).

## Related articles

<CardGroup cols={3}>
  <Card title="Page layout" icon="rectangles-mixed" iconType="regular" color="#FFC738" href="/help/layout">
    Change the position of headings, questions, and background image.
  </Card>

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

  <Card title="Add a logo" icon="airbnb" iconType="regular" color="#FFC738" href="/help/logo">
    Add a professional touch and create strong brand identity.
  </Card>
</CardGroup>

<SupportBanner />