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

# Vista previa en escritorio, tablet y móvil

Revisa tu formulario de dForms 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 cam

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 **Vista previa** en la barra superior del editor, junto al estado de guardado. 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-457ce0f2be23d75369941c47b3e4e9d386c6deec%2Fforms-preview-01-toolbar-button.png?alt=media" alt="La barra superior del editor con el botón 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 por 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-0b72f6ab5d1b9fa5ed469f9ccbc66e76b33422fc%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 **Portada** o **Paso 1 de 4**, y cuenta pantallas: las preguntas que agrupaste en una pantalla son un solo paso, y las flechas avanzan de pantalla en pantalla. 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-6cb1479ab4c52bff166bb950a9abda0799f9d85b%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 la 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**.                                                                                                                                                                                                                                                 |
| Idioma                 | El marco se muestra en el idioma del formulario (**Diseño → Idioma**), sea cual sea el idioma en que usas el editor. Un formulario en **Auto (navegador del visitante)** se previsualiza en el idioma de tu editor.                                                                                                                                  |
| Enviar                 | No se manda nada. El ícono de escudo en la barra dice **Solo vista previa: nada de esto 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 la vista previa** para volver al principio. |
| Punto de envío parcial | No se dispara en la vista previa, por la misma razón.                                                                                                                                                                                                                                                                                                |
| Protección contra spam | La verificación nunca carga en la vista previa, aunque el formulario tenga la protección activa.                                                                                                                                                                                                                                                     |
| Reservas               | Un paso de Agendador muestra el calendario real de Calendly. 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.                                                                                                                                                                                               |
| Formularios insertados | El marco muestra el formulario suelto. Para comprobar cómo se ve dentro de tu propia página, pega el fragmento de **Insertar** 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/dforms/builder/autosave-and-publishing.md): pon el borrador en vivo.
* [Qué ve quien responde](/dapta-docs-es/dforms/respondent-experience.md): el recorrido completo de quien responde.
* [Diseño y marca](/dapta-docs-es/dforms/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 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/dapta-docs-es/dforms/builder/preview.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.