> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-forms/design/cover-screen-and-banner.md).

# Cover screen & banner

Add an intro screen to your Dapta Form: turn on the cover, write the eyebrow, headline, subheadline, Start button text and trust badge, and add a banner strip with its own color, height and scope.

The cover screen is the first thing a respondent sees: a headline, a short pitch and a **Start** button, shown before the first question. The banner is a thin strip of text along the top of the form that you can use for an announcement or an offer. Both live in the **Design** panel of the editor and update in the live preview as you type.

By default a new form has no cover: respondents land straight on question 1. This page shows you how to turn the cover on, fill it in and style the banner.

***

**Step 1:** Open your form and click **Design** in the toolbar. Scroll down the left column to the **Cover screen** section and turn on **Show a cover screen**. The preview on the right switches to the cover right away.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-bb8bce49d01c2abfac1231734cef9eebfcb57789%2Fforms-cover-screen-and-banner-01-show-cover-switch.png?alt=media" alt="The Design panel scrolled to the Cover screen section, with the Show a cover screen switch turned on and the cover showing in the preview"><figcaption><p>Turn on <strong>Show a cover screen</strong>. The preview on the right shows the cover as respondents will see it.</p></figcaption></figure>

> **💡 Tip:** Use the **Cover** arrows above the preview to move between the cover and the questions, and the **Mobile** / **Tablet** / **Desktop** toggle to check the cover at each size.

***

**Step 2:** Add a banner if you want one. Type something in **Banner text**. As soon as the field has text, the banner controls appear below it: **Show the banner on**, **Banner color**, **Banner text color** and **Banner height**.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-61318eb9cbc5600ce9fd7b0f13c1600294f32f0f%2Fforms-cover-screen-and-banner-02-banner-settings.png?alt=media" alt="The banner settings: Banner text, Show the banner on, Banner color, Banner text color and Banner height"><figcaption><p>The banner controls only show once <strong>Banner text</strong> has a value. Leave the text empty and there is no banner.</p></figcaption></figure>

* **Show the banner on**: **Every screen** keeps the strip visible on the cover and on every question. **Cover only** shows it on the cover and hides it once the respondent starts.
* **Banner color** and **Banner text color**: click the swatch to pick a preset or type a hex value. Leave the banner color empty and the strip uses a soft tint of your accent color. A contrast readout (for example **AAA 12.2:1**) appears next to the text color so you can see the strip is readable.
* **Banner height**: **Slim**, **Standard** or **Tall**.

***

**Step 3:** Write the cover copy. Every field is optional; the cover simply skips the parts you leave empty.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-0d4a0a1df034aaf800434df67ea81be618a2ab64%2Fforms-cover-screen-and-banner-03-cover-copy-fields.png?alt=media" alt="The cover copy fields: Eyebrow, Badge, Headline, Subheadline, Start button text and Trust badge, with the cover rendered in the preview"><figcaption><p>Fill in the cover fields. The preview renders each one where respondents will see it.</p></figcaption></figure>

| Field                 | Where it shows on the cover                                                                                    |
| --------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Eyebrow**           | Small uppercase pill above the headline (for example a program or campaign name).                              |
| **Badge**             | Shows in the same pill as the eyebrow. It is only used when **Eyebrow** is empty.                              |
| **Headline**          | The large title. If you leave it empty, the form title is used.                                                |
| **Subheadline**       | One or two lines under the headline. Also used as the description of the link preview when the form is shared. |
| **Start button text** | The label on the button that opens question 1. Empty shows **Start**.                                          |
| **Trust badge**       | A small line of reassurance under the subheadline, such as "Takes under a minute".                             |

> **💡 Tip:** Keep the headline short. On phones it wraps onto two lines quickly, and the share card truncates very long headlines.

***

**Step 4:** Click **Publish** and open the public link. The cover, banner and Start button render exactly as in the preview, on desktop and on mobile.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-52b47e1f377016ae40f3d393157eda821a4cba73%2Fforms-cover-screen-and-banner-04-public-cover-desktop.png?alt=media" alt="The published cover on desktop: yellow banner strip across the top, eyebrow pill, headline, subheadline, trust line and a Let&#x27;s go button"><figcaption><p>The published cover on desktop, with the banner across the top and the customized Start button.</p></figcaption></figure>

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-4759f3cd5d55dab5a4585a210dfcec79a1a2d2fb%2Fforms-cover-screen-and-banner-05-public-cover-mobile.png?alt=media" alt="The same cover on a phone: banner strip, form title header, eyebrow pill, headline, subheadline, trust line and a full-width Let&#x27;s go button" width="375"><figcaption><p>On mobile the Start button sits at the bottom of the screen, within thumb reach.</p></figcaption></figure>

## All cover and banner settings

| Setting                 | Options                            | What it does                                                                                                                                              |
| ----------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show a cover screen** | On / Off                           | Adds the intro screen before the first question. Off hides the whole cover (the banner can still show on the questions if its scope is **Every screen**). |
| **Banner text**         | Free text                          | The text in the strip at the top. Empty removes the banner and hides the banner controls.                                                                 |
| **Show the banner on**  | **Every screen** / **Cover only**  | Whether the strip stays visible during the questions or only on the cover.                                                                                |
| **Banner color**        | Swatch or hex                      | Background of the strip. Empty uses a soft tint of the accent.                                                                                            |
| **Banner text color**   | Swatch or hex                      | Text color of the strip, with a live contrast readout.                                                                                                    |
| **Banner height**       | **Slim** / **Standard** / **Tall** | Thickness of the strip.                                                                                                                                   |
| **Eyebrow**             | Free text                          | Uppercase pill above the headline.                                                                                                                        |
| **Badge**               | Free text                          | Same pill as the eyebrow; used only when the eyebrow is empty.                                                                                            |
| **Headline**            | Free text                          | Main title. Falls back to the form title.                                                                                                                 |
| **Subheadline**         | Free text                          | Supporting line. Also feeds the link preview description.                                                                                                 |
| **Start button text**   | Free text                          | Label of the cover button. Falls back to **Start**.                                                                                                       |
| **Trust badge**         | Free text                          | Small reassurance line under the subheadline.                                                                                                             |

## Good to know

* **One-page layout**: on a **One page** form the cover renders as a header above the questions. There is no Start button, so **Start button text** is not used there. See [One-page layout](/dapta-forms/builder/one-page-layout.md).
* **Logo on the cover**: the cover can show a logo that is different from the one on the questions. Set it in **Cover logo URL** under the **Layout** section of the Design panel. See [Logos, layout & transitions](/dapta-forms/design/logos-layout-transitions.md).
* **Client logos**: a "Trusted by" strip of logos can sit on the cover under the trust badge. See [Client logos marquee](/dapta-forms/design/client-logos.md).
* **Share card**: the headline, subheadline and banner text are reused on the image that appears when the link is shared. See [Share card](/dapta-forms/design/share-card.md).
* **Analytics**: when a cover is on, the first row of the drop-off table is **Cover / landing**, so you can see how many people opened the form versus how many pressed Start. See [Analytics](/dapta-forms/results/analytics.md).

## What's next

* [Logos, layout & transitions](/dapta-forms/design/logos-layout-transitions.md)
* [Client logos marquee](/dapta-forms/design/client-logos.md)
* [Share card (social preview image)](/dapta-forms/design/share-card.md)
* [Themes, colors & background](/dapta-forms/design/themes-colors-background.md)
* [What respondents see](/dapta-forms/respondent-experience.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dapta.ai/dapta-forms/design/cover-screen-and-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.