> 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/share/embed.md).

# Insertar en tu sitio web

Pon un formulario de dForms dentro de tu propio sitio web. Copia el fragmento del diálogo Insertar, pégalo en WordPress, Webflow o HTML plano, y deja que el script ajuste el marco, muestre cada pantal

En lugar de mandar a la gente a un enlace de Dapta, puedes ejecutar el formulario dentro de una de tus propias páginas. La inserción muestra el mismo formulario publicado, recoge las mismas respuestas y dispara las mismas integraciones.

***

**Paso 1:** Abre el formulario en el editor y haz clic en el ícono **Insertar** (los signos de mayor y menor) en la barra superior, entre **Editar enlace** y **Código QR**.

**Paso 2:** Aparece el diálogo **Inserta este formulario en tu sitio** con un fragmento listo. Haz clic en **Copiar fragmento**. El botón cambia a **Copiado**.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-4490b427a534b896aae9479c0382a2b5d509ba2b%2Fforms-embed-01-dialog.png?alt=media" alt="El diálogo Inserta este formulario en tu sitio con su texto de introducción, el fragmento del iframe apuntando a un enlace /f/ y el botón Copiar fragmento"><figcaption><p>El fragmento se genera para este formulario concreto. Cópialo tal cual, no hay que rellenar nada.</p></figcaption></figure>

El fragmento tiene dos partes: un `iframe` que carga tu formulario, y un script pequeño, `embed.js`, que cuida el marco desde tu página.

```html
<iframe data-dapta-forms src="https://app.dforms.ai/acme/f/lead-qualification-quiz?embed=1"
        title="Lead qualification quiz" loading="lazy"
        style="width:100%;border:0;min-height:480px;"></iframe>
<script src="https://app.dforms.ai/embed.js" async></script>
```

| Parte              | Por qué está ahí                                                                                                                                                                                        |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `?embed=1`         | Le dice al formulario que corre dentro de una página, así que se renderiza a la altura de su contenido en vez de llenar una pantalla entera, y le reporta esa altura a tu página.                       |
| `data-dapta-forms` | La marca que busca el script. Consérvala: sin ella el script ignora el marco, así que no hay ajuste de altura, ni desplazamiento a la vista, ni datos de la página.                                     |
| `title`            | El nombre del formulario, que leen los lectores de pantalla. Cámbialo si quieres otra redacción.                                                                                                        |
| `width:100%`       | El formulario toma el ancho de donde lo pongas, así que se mantiene adaptable.                                                                                                                          |
| `min-height:480px` | La altura con la que arranca, y la mínima que llega a tener.                                                                                                                                            |
| `embed.js`         | Ajusta la altura del marco, muestra cada pantalla nueva, hace la redirección final y le dice al formulario en qué página está. Una sola copia del script sirve para todos los formularios de la página. |

> **⚠️ Nota:** Pega las dos líneas, y carga `embed.js` desde la dirección que te da el fragmento. Una copia del script guardada en tu propio servidor sigue ajustando el marco y haciendo la redirección, pero nunca le pasa los datos de tu página al formulario.

***

**Paso 3:** Pega el fragmento en tu página, donde deba aparecer el formulario.

* **WordPress:** edita la página, añade un bloque **HTML personalizado** y pega el fragmento dentro. En el editor clásico, cambia antes de **Visual** a **Texto**.
* **Webflow:** arrastra un elemento **Embed** al lienzo, pega el fragmento en el editor de código y publica el sitio.
* **HTML plano, o cualquier otro constructor:** pégalo en el cuerpo de tu página, dentro del contenedor que deba alojar el formulario.

Si tu constructor separa el código en cajas de «head» y «body», las dos líneas pueden ir en la caja del body, una tras otra.

***

**Paso 4:** Carga la página y responde la primera pregunta para comprobarlo. El formulario debería quedar a ras dentro de tu diseño, sin barra de desplazamiento propia. Después envía una respuesta de prueba y ábrela en **Respuestas**: la fila **Página** debería mostrar tu página.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-1bad8685e34d471811e2374b6b7bd22be8fdc218%2Fforms-embed-02-live-page.png?alt=media" alt="Una página web sencilla con el formulario de dForms corriendo dentro, bajo el encabezado de la página"><figcaption><p>El mismo formulario publicado, corriendo dentro de una página web normal.</p></figcaption></figure>

***

## La altura se ajusta sola

Las preguntas no tienen todas el mismo tamaño: una pregunta de cuatro opciones es más alta que un solo campo de correo. Cada vez que cambia el contenido, el formulario reporta su altura nueva y `embed.js` ajusta el marco, así que la página crece y encoge con él y quien visita nunca hace scroll dentro de una caja. Después de la última respuesta, el marco se encoge hasta el tamaño de la pantalla final.

El marco es fluido, así que una columna angosta recibe un formulario angosto:

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fgit-blob-ff8e6fc49d981a237109a5447ece9c98890be056%2Fforms-embed-03-mobile.png?alt=media" alt="La misma página y el formulario insertado en una pantalla de tamaño teléfono" width="375"><figcaption><p>La inserción en un teléfono. El formulario se adapta al espacio que le da tu diseño.</p></figcaption></figure>

> **💡 Tip:** Puedes insertar varios formularios en una página. Añade la línea del `iframe` de cada uno y mantén una sola línea de `embed.js`: cada marco se atiende por su cuenta.

***

## El formulario se desplaza a la vista

Cuando el formulario reemplaza toda su pantalla, la pantalla nueva empieza arriba del marco. En una página larga, quien visita puede seguir desplazado hacia abajo, donde pulsó el botón, así que `embed.js` desplaza tu página de vuelta al inicio del formulario.

* Pasa cada vez que un formulario de **Diapositivas** cambia de pantalla, y cuando cualquiera de los dos diseños pasa a la pantalla de envío, de revelación, de reserva o final.
* Solo desplaza cuando el inicio del formulario está fuera de la pantalla. A quien ya lo ve no se le mueve.
* El desplazamiento es suave, o instantáneo para quien pidió a su dispositivo reducir el movimiento.
* Nunca pasa al cargar la página.

***

## Adónde va la redirección

Cuando la [pantalla final](/dapta-docs-es/dforms/logic/ending-screen.md) redirige a otra página, un formulario insertado abre esa página en toda la pestaña del navegador, reemplazando tu página, igual que un enlace normal. Esto es lo que permite que las páginas de pago que no aceptan correr dentro de un marco funcionen desde una inserción.

* Con `embed.js` en la página, es tu página la que hace la redirección.
* Sin él, el formulario redirige toda la pestaña por su cuenta.
* Hay una configuración que no puede redirigir: un iframe con un atributo `sandbox` que no incluye `allow-top-navigation`, en una página sin `embed.js`. Si tu constructor de sitios pone los iframes en sandbox, deja el script en la página.

***

## Lo que tu página le cuenta al formulario

Un formulario dentro de un iframe no puede ver la página que lo rodea: la dirección, el título y las cookies de esa página son de tu sitio. `embed.js` corre en tu página, así que el formulario se lo pregunta, una vez al cargar y otra cada vez que guarda respuestas. El script responde con:

| Dato                       | Qué es                                                                                              |
| -------------------------- | --------------------------------------------------------------------------------------------------- |
| Dirección de la página     | La URL completa de tu página, con su query string.                                                  |
| Título de la página        | El título de tu página, tal como lo muestra la pestaña del navegador.                               |
| Página y portal de HubSpot | El ID de página y el ID de portal de HubSpot, cuando tu página corre HubSpot.                       |
| Cookie de HubSpot          | La cookie `hubspotutk` de quien visita, cuando tu página carga el código de seguimiento de HubSpot. |

Nada viaja en sentido contrario: tu página nunca recibe lo que escribe quien responde.

Qué hace el formulario con esos datos:

* **La página se guarda con la respuesta.** Aparece como la fila **Página** cuando abres una respuesta en [Respuestas](/dapta-docs-es/dforms/results/submissions.md), como la columna **URL de la página** de la [exportación CSV](/dapta-docs-es/dforms/results/export-csv.md) y como el objeto `visit` del [payload del webhook](/dapta-docs-es/dforms/connect/webhooks/payload-reference.md).
* **Las UTMs de tu página cuentan.** Si el `src` del iframe no tiene parámetros `utm_`, se guardan con la respuesta los de la dirección de tu página, todos juntos. Si el `src` lleva algún parámetro `utm_`, esos ganan y los de tu página se ignoran.
* **HubSpot puede enlazar la visita.** Con la cookie, HubSpot enlaza la respuesta con las páginas que la persona vio antes. Lo que necesitas para eso está en [Página de origen y atribución en HubSpot](/dapta-docs-es/dforms/connect/hubspot/attribution.md).

Unas reglas lo limitan a tu propio formulario:

* El script solo responde a iframes marcados con `data-dapta-forms` cuyo `src` está en la misma dirección desde la que se cargó el script. El fragmento ya lo cumple.
* Añade `data-dapta-forms-context="off"` al iframe para no enviar nada de tu página en ese formulario.
* Si la persona rechazó el seguimiento de HubSpot (una cookie `__hs_opt_out` o `__hs_do_not_track`), la cookie de HubSpot se queda fuera. La dirección y el título de la página sí se envían.
* El script lee cookies. Nunca escribe ninguna.

Con el `iframe` solo y sin `embed.js`, nadie responde. El formulario espera una fracción de segundo y luego guarda solo lo que el navegador reporta como página de origen, normalmente solo el dominio de tu sitio, sin UTMs de tu página y sin cookie.

***

## Bueno saberlo

* La inserción siempre muestra la versión **publicada**. Las ediciones que aún no publicaste se quedan en tu borrador.
* Las respuestas desde una inserción son respuestas normales: la misma tabla de **Respuestas**, las mismas **Analíticas**, las mismas integraciones y correos.
* Si activas una portada, se muestra también dentro de la inserción. Para un formulario que tiene que sentirse parte de la página, deja la portada apagada y empieza en la primera pregunta.
* Los fragmentos que pegaste antes siguen funcionando, también los que tienen un enlace antiguo. Si pegaste solo la línea del `iframe`, añade la línea de `embed.js`.
* Para fijar el idioma del formulario dentro de la inserción, añade `&lang=es` o `&lang=en` al `src` del iframe. Mira [Idioma y texto de los botones](/dapta-docs-es/dforms/design/language-and-button-text.md).
* Con la [protección contra spam](/dapta-docs-es/dforms/connect/spam-protection.md) activa, la verificación corre dentro del marco. No hay nada que configurar en tu sitio.
* Los IDs de seguimiento del formulario (GTM, píxel de Meta) se cargan y se disparan dentro del marco, no en tu página. Mira [Seguimiento y píxeles](/dapta-docs-es/dforms/connect/tracking-and-pixels.md#formularios-insertados).

***

## Qué sigue

* [Tu enlace público](/dapta-docs-es/dforms/share/public-link.md): el enlace pelado, para correos, chats y botones.
* [Página de origen y atribución en HubSpot](/dapta-docs-es/dforms/connect/hubspot/attribution.md): enlaza las respuestas insertadas con las páginas que la persona vio antes en HubSpot.
* [Portada y banner](/dapta-docs-es/dforms/design/cover-screen-and-banner.md): decide qué muestra la primera pantalla.
* [Seguimiento y píxeles](/dapta-docs-es/dforms/connect/tracking-and-pixels.md): mide el formulario insertado junto al resto de tu sitio.
* [Analíticas](/dapta-docs-es/dforms/results/analytics.md): vistas, inicios y abandono, donde sea que corra el formulario.


---

# 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/share/embed.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.