> 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/dforms/design.md).

# Design & Branding

Make a dForms form look like your brand from the Design panel inside Build: language and button text, themes, colors, fonts, logos, cover screen and share card, with a live device preview while you ed

Design is the third tab of the editor. Open it and the canvas is replaced by two columns: every visual setting on the left, and a live preview of the real form on the right. Each change shows up in the preview immediately and is saved as a draft; click **Publish** when you want respondents to see it.

***

**Step 1:** Open your form and open the **Design** tab in the editor topbar. Click **Build** to go back to the question canvas.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-f8c64c16a77336635e2e9da29848af1008a30870%2Fforms-readme-design-01-design-mode.png?alt=media" alt="The editor on the Design tab: the Design tab is highlighted, the settings column starts with the Language and Button text cards, and the device preview is on the right"><figcaption><p>The Design tab. Left: settings, grouped in cards, starting with <strong>Language</strong> and <strong>Button text</strong>. Right: the live preview of your form.</p></figcaption></figure>

The left column is organized in cards, top to bottom: **Language**, **Button text**, **Form title**, **Layout** (Slides or One page), **Theme**, **Colors**, **Typography**, **Shape and controls**, **Layout** (logos, attribution badge, alignment, width, transition), **Share card**, **Cover screen**, **Client logos**, a pointer to **Partial submissions** (configured in the question list on the Build tab) and **When the form ends**.

***

**Step 2:** Use the preview controls at the top of the right column. **Mobile**, **Tablet** and **Desktop** switch the device frame (the size and zoom are shown next to it, for example 1280 × 800 · 45%). The arrows walk through the screens (**Previous screen**, **Next screen**), and the circular arrow restarts the preview. The address bar shows the public link, `app.dforms.ai/{account code}/f/{slug}`, with buttons to copy it and open the live form.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-19c30b0ef13bcca843165251c65c377a248f676e%2Fforms-readme-design-02-preview-devices.png?alt=media" alt="The preview column with the step arrows and the Mobile, Tablet and Desktop switch highlighted, and a /f/ link in the address bar"><figcaption><p>The preview runs the real form renderer. Nothing you type in it is submitted.</p></figcaption></figure>

> **💡 Tip:** The preview shows your draft, including unpublished edits, in the form's language (see [Language & button text](/dforms/design/language-and-button-text.md)). Respondents keep seeing the last published version until you click **Publish**.

> **⚠️ Note:** A workspace **Brand kit** can pre-fill logo, colors, font and controls for every new form. Anything you change here applies to this form only.

## Pages in this section

* [Language & button text](/dforms/design/language-and-button-text.md): the language of the buttons and messages visitors see, and your own text for Back, Next and Submit.
* [Themes, colors & background](/dforms/design/themes-colors-background.md): pick one of the nine theme presets, set Background, Text and Accent with contrast checks, and choose a Solid, Gradient, Glow or Image background.
* [Typography & controls](/dforms/design/typography-and-controls.md): choose a typeface (or host your own), and set corners, button style, full-width button and the progress indicator.
* [Logos, layout & transitions](/dforms/design/logos-layout-transitions.md): form logo and cover logo, logo size and position, attribution badge size, question alignment, content width, step transition and the public form title.
* [Cover screen & banner](/dforms/design/cover-screen-and-banner.md): the intro screen shown before the first question, with banner, headline, subheadline, Start button and trust badge.
* [Client logos marquee](/dforms/design/client-logos.md): a "trusted by" strip of logos on the cover, the reveal screen or both.
* [Share card (social preview image)](/dforms/design/share-card.md): the image shown when the link is shared in chat or social, generated from your design or your own.
* [Brand kit (workspace-wide)](/dforms/design/brand-kit.md): the workspace look that new forms start with, and how to apply it to existing forms.


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.dapta.ai/dforms/design.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.