> 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/builder/preview.md).

# Preview on desktop, tablet and mobile

Preview your Dapta Form exactly as respondents will see it, in real mobile, tablet and desktop frames, without publishing or submitting anything. Walk through the screens, restart, and check unsaved e

The **Preview** opens your form in a real device frame: a same-origin copy of the public form at a true phone, tablet or desktop width. It always shows the draft you are editing right now, including edits that were not published yet, and nothing you do inside it is ever submitted.

***

**Step 1:** In the editor, click the **Preview** icon (the eye) at the right end of the toolbar. It is available on the **Build**, **Logic** and **Connect** tabs.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-6bf58fc65c4f08e5775bb9695b3ab79f8a55e70e%2Fforms-preview-01-toolbar-button.png?alt=media" alt="The editor toolbar with the Preview eye icon highlighted at its right end"><figcaption><p>The <strong>Preview</strong> icon sits at the end of the toolbar.</p></figcaption></figure>

**Step 2:** The preview modal opens on **Mobile** by default. Use the **Device preview** switch to change the frame: **Mobile** (390 × 844), **Tablet** (768 × 1024) or **Desktop** (1280 × 800). The frame is scaled down when it does not fit the window (the readout next to it says, for example, **1280 × 800 · 45%**) but the layout inside is rendered at the real width, so what you see is what a phone or a laptop shows.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-f4e7af800a6b886716699c44ddfe2f463f392e0a%2Fforms-preview-02-modal-mobile.png?alt=media" alt="The preview modal showing the form inside a mobile phone frame, with the Mobile, Tablet and Desktop switch highlighted"><figcaption><p>The preview opens on <strong>Mobile</strong>. The switch changes the frame.</p></figcaption></figure>

***

**Step 3:** Walk through the form. Answer the questions inside the frame as a respondent would, or use the **Previous screen** and **Next screen** arrows. The counter reads **Step 1 of 4**, **Cover** or the current screen. Logic, scoring and reveal screens behave exactly as they will live.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-24dc3e4c6691471af5c81f2750c8477f22321cee%2Fforms-preview-03-desktop-frame.png?alt=media" alt="The preview modal on the Desktop frame with the Next screen arrow highlighted"><figcaption><p>The same draft in the <strong>Desktop</strong> frame. The arrows move between screens.</p></figcaption></figure>

***

**Step 4:** Click **Restart preview** (the circular arrow) to return to the cover or first question, and **Close** (or press Esc) to go back to the editor.

## What the preview shows and does not do

| Topic                | Behavior                                                                                                                                                                                                                                                                                                           |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Which version        | The draft in the editor, live. You do not need to wait for **Saved** or click **Publish**.                                                                                                                                                                                                                         |
| Submitting           | Nothing is sent. The shield icon in the toolbar reads **Preview only. Nothing here is submitted.** If you press **Submit** on the last question, the frame stays on its **Submitting…** screen and no submission, webhook, HubSpot contact or email is created. Click **Restart preview** to go back to the start. |
| Partial submit point | Does not fire in the preview, for the same reason.                                                                                                                                                                                                                                                                 |
| Bookings             | A Scheduler step shows the real calendar embed. Do not book from the preview: the booking itself happens on the calendar side and would be real.                                                                                                                                                                   |
| Design panel         | The **Design** panel has the same device frame on its right side, so you can watch colors and typography change while you edit them.                                                                                                                                                                               |
| Embeds               | The frame shows the standalone form. To check how it looks inside your own page, paste the **Embed** snippet into a test page.                                                                                                                                                                                     |

> **💡 Tip:** To test the real thing end to end (submissions, webhooks, HubSpot), publish the form and open the public link in a private window. Delete the test rows afterwards from **Submissions**.

## What's next

* [Autosave, drafts & publishing](/dapta-forms/builder/autosave-and-publishing.md): make the draft live.
* [What respondents see](/dapta-forms/respondent-experience.md): the full respondent journey.
* [Design & Branding](/dapta-forms/design.md): style the form with the live preview next to the controls.


---

# 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/builder/preview.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.