> 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-docs-es/dapta-forms/builder/preview.md).

# Vista previa en escritorio, tablet y móvil

Revisa tu formulario de Dapta exactamente como lo verá quien responde, en marcos reales de móvil, tablet y escritorio, sin publicar ni enviar nada. Recorre las pantallas, reinicia y comprueba los camb

La **Vista previa** abre tu formulario dentro del marco de un dispositivo real: una copia del formulario público, del mismo origen, al ancho verdadero de un teléfono, una tablet o un escritorio. Siempre muestra el borrador que estás editando en ese momento, incluidos los cambios que aún no se publicaron, y nada de lo que hagas dentro se envía nunca.

***

**Paso 1:** En el editor, haz clic en el ícono de **Vista previa** (el ojo) al final derecho de la barra de herramientas. Está disponible en las pestañas **Construir**, **Lógica** y **Conectar**.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-6bf58fc65c4f08e5775bb9695b3ab79f8a55e70e%2Fforms-preview-01-toolbar-button.png?alt=media" alt="La barra de herramientas del editor con el ícono de ojo de Vista previa resaltado en su extremo derecho"><figcaption><p>El ícono de <strong>Vista previa</strong> está al final de la barra de herramientas.</p></figcaption></figure>

**Paso 2:** La ventana de vista previa se abre en **Móvil** por defecto. Usa el selector **Vista previa del dispositivo** para cambiar el marco: **Móvil** (390 × 844), **Tablet** (768 × 1024) o **Escritorio** (1280 × 800). El marco se reduce cuando no cabe en la ventana (el indicador de al lado dice, por ejemplo, **1280 × 800 · 45%**) pero el contenido se renderiza al ancho real, así que lo que ves es lo que muestra un teléfono o un portátil.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-f4e7af800a6b886716699c44ddfe2f463f392e0a%2Fforms-preview-02-modal-mobile.png?alt=media" alt="La ventana de vista previa mostrando el formulario dentro del marco de un teléfono, con el selector Móvil, Tablet y Escritorio resaltado"><figcaption><p>La vista previa se abre en <strong>Móvil</strong>. El selector cambia el marco.</p></figcaption></figure>

***

**Paso 3:** Recorre el formulario. Responde las preguntas dentro del marco como lo haría quien responde, o usa las flechas **Pantalla anterior** y **Pantalla siguiente**. El contador dice **Paso 1 de 4**, **Portada** o la pantalla actual. La lógica, el puntaje y las pantallas de revelación se comportan exactamente como lo harán en vivo.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-24dc3e4c6691471af5c81f2750c8477f22321cee%2Fforms-preview-03-desktop-frame.png?alt=media" alt="La ventana de vista previa en el marco de Escritorio con la flecha Pantalla siguiente resaltada"><figcaption><p>El mismo borrador en el marco de <strong>Escritorio</strong>. Las flechas mueven entre pantallas.</p></figcaption></figure>

***

**Paso 4:** Haz clic en **Reiniciar vista previa** (la flecha circular) para volver a la portada o a la primera pregunta, y en **Cerrar** (o pulsa Esc) para volver al editor.

## Qué muestra la vista previa y qué no hace

| Tema                   | Comportamiento                                                                                                                                                                                                                                                                                                                                    |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Qué versión            | El borrador del editor, en vivo. No hace falta esperar a **Guardado** ni hacer clic en **Publicar**.                                                                                                                                                                                                                                              |
| Enviar                 | No se manda nada. El ícono de escudo en la barra dice **Solo vista previa. Nada de aquí se envía.** Si pulsas **Enviar** en la última pregunta, el marco se queda en su pantalla de **Enviando…** y no se crea ninguna respuesta, ni webhook, ni contacto de HubSpot, ni correo. Haz clic en **Reiniciar vista previa** para volver al principio. |
| Punto de envío parcial | No se dispara en la vista previa, por la misma razón.                                                                                                                                                                                                                                                                                             |
| Reservas               | Un paso de Agendador muestra el calendario real incrustado. No reserves desde la vista previa: la reserva ocurre del lado del calendario y sería real.                                                                                                                                                                                            |
| Panel de diseño        | El panel **Diseño** tiene el mismo marco de dispositivo a su derecha, así que puedes ver cómo cambian los colores y la tipografía mientras los editas.                                                                                                                                                                                            |
| Incrustaciones         | El marco muestra el formulario suelto. Para comprobar cómo se ve dentro de tu propia página, pega el fragmento de **Incrustar** en una página de prueba.                                                                                                                                                                                          |

> **💡 Tip:** Para probar todo de punta a punta (respuestas, webhooks, HubSpot), publica el formulario y abre el enlace público en una ventana privada. Después borra las filas de prueba desde **Respuestas**.

## Qué sigue

* [Guardado automático, borradores y publicación](/dapta-docs-es/dapta-forms/builder/autosave-and-publishing.md): pon el borrador en vivo.
* [Qué ve quien responde](/dapta-docs-es/dapta-forms/respondent-experience.md): el recorrido completo de quien responde.
* [Diseño y marca](/dapta-docs-es/dapta-forms/design.md): dale estilo al formulario con la vista previa en vivo junto a los controles.


---

# 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-docs-es/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.