> 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/logos-layout-transitions.md). # Logos, layout & transitions Add a logo to your Dapta Form (form logo on every question, cover logo on the cover screen), set logo size and position, question alignment, content width and step transition, and give the form a publ The **Layout** card in the Design panel places your brand on the form and decides where things sit: which logo shows where, how big it is, whether questions are left-aligned or centered, how wide the content is and how the form moves from one step to the next. The **Form title** card at the very top of the panel sets the public name respondents see. *** **Step 1:** Open your form, stay on **Build**, click **Design** in the toolbar and scroll to the **Layout** card (the one below **Shape and controls**). *** **Step 2:** Paste a public image link into **Form logo URL**. This logo is shown at the top of every question screen. If you use a cover screen, paste the logo for it into **Cover logo URL**; it is shown on the cover screen only. Leave either field empty for no logo in that place.

Two logos, two fields. The form logo goes on every question screen; the cover logo only on the cover.

| Field | Where it shows | Notes | | ------------------ | ---------------------------- | -------------------------------------------------------------------------------------------------- | | **Form logo URL** | Top of every question screen | Leave empty for no logo. When there is no form logo, the form title is shown as text in its place. | | **Cover logo URL** | The cover screen only | The field is hidden while the cover screen is switched off. Leave empty for no logo there. | > **💡 Tip:** Use a direct link to a PNG, SVG or JPG that starts with `https://` and is reachable without a login. Links with other protocols are rejected with **This URL protocol is not allowed for images.** If the image cannot be loaded, the question screens fall back to the title text. > **⚠️ Note:** The preview in the editor may show the form title as text where the logo goes. After you **Publish**, use **Open form** to see the image on the live form. *** **Step 3:** Set the remaining controls in the same card. Each is a toggle; the preview updates as you click.

Large logo on the left, left-aligned questions, wide content and a fade between steps.

| Setting | Options | What it does | | ---------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------- | | **Logo size** | **Small**, **Medium**, **Large** | Height of the form logo on question screens. | | **Logo position** | **Left**, **Center** | Where the form logo sits in the top bar of each question screen. | | **Question alignment** | **Left**, **Center** | Whether the question text, helper text and inputs are left-aligned or centered. | | **Content width** | **Narrow**, **Wide** | The maximum width of the question card. **Wide** gives long option labels and paragraphs more room. | | **Step transition** | **Slide**, **Fade**, **None** | The animation between screens: slide sideways, fade, or switch instantly. | > **⚠️ Note:** On a **One page** form the logo sits in a hero at the top rather than a top bar, so **Logo size**, **Logo position**, **Question alignment** and **Step transition** do not apply and are not shown. **Content width** still applies. *** **Step 4:** Scroll to the top of the panel and fill in **Form title**. This is what visitors see: the browser tab, share previews and the cover heading. Leave it empty to use the form's internal name (the one in the editor top bar).

The Form title card with the public title set to Book your demo — The public title. The internal name in the top bar stays the same.

*** **Step 5:** Click **Publish** and open the live form. With a cover screen on, the cover logo appears above the headline; on the questions, the form logo replaces the title text.

The cover screen shows the Cover logo URL image and the form title as the headline.

A question screen: Large logo, Left position, Left alignment, Wide content.

## What's next * [Cover screen & banner](/dapta-forms/design/cover-screen-and-banner.md): turn the cover on and write its headline, subheadline and Start button. * [Client logos marquee](/dapta-forms/design/client-logos.md): add a "trusted by" strip under the cover. * [Share card (social preview image)](/dapta-forms/design/share-card.md): how the title and logo end up in the social preview. * [Brand kit (workspace-wide)](/dapta-forms/design/brand-kit.md): set one logo for every new form in the workspace. --- # 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/logos-layout-transitions.md?ask=&goal= ``` `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.