# Insertar formularios en tu web

> Añade una vez el script de Emailit a tu web, coloca los formularios integrados, abre formularios desde tu propio código y gestiona los tokens, la publicación y las respuestas de los formularios.

Una sola etiqueta script muestra en tu web todos los formularios publicados de tu espacio de trabajo. Esta página explica dónde ponerla, cómo colocar los formularios integrados, cómo abrir un formulario desde tu propio código y cómo comprobar que llegan las respuestas.

## Antes de empezar

- Crea y publica al menos un formulario. Solo los formularios publicados aparecen en tu web. Consulta [Crear un formulario](/es/docs/forms/build/).
- Necesitas poder editar el HTML de tu web o añadir una etiqueta HTML personalizada en tu gestor de etiquetas.

## Añadir el script

1. **Copia el fragmento de código.** En **Email Marketing → Forms**, selecciona **Install**. El fragmento también está en la página de cada formulario, en la tarjeta **Installation**. Tiene este aspecto, con la clave pública de tu espacio de trabajo en la ruta:

```html
<script async src="https://js.emailit.com/js/<WORKSPACE_PUBLIC_KEY>/emailit.js"></script>
```

2. **Añádelo a todas las páginas.** Pégalo una vez en el diseño o la plantilla compartida de tu web, idealmente justo antes de la etiqueta de cierre `</body>`. Es el mismo fragmento para todos los formularios del espacio de trabajo, así que solo lo instalas una vez.

3. **Publica tus formularios.** Los pop-ups, los flyouts, los formularios de página completa y los banners publicados ya aparecen en tu web sin más código.

El script se carga de forma asíncrona y no bloquea tu página. Si algo falla, como un error de red, no muestra nada y tu página sigue funcionando. También funciona cuando se añade a través de un gestor de etiquetas.

Si tu web usa una Content Security Policy, permite `https://js.emailit.com` en `script-src` y `connect-src`.

## Cómo aparecen los formularios superpuestos

| Tipo | Cuándo se muestra |
| --- | --- |
| **Banner** | En cuanto se carga la página. Se muestran todos los banners publicados. |
| **Popup**, **Flyout**, **Full page** | 2,5 segundos después de cargarse la página. Solo se muestra uno de ellos en cada carga de página. |

Para cambiar el retraso, establece `display_delay_seconds` en los `settings` del formulario con [Actualizar un formulario](/es/docs/api-reference/forms/update/).

Cuando un visitante cierra un formulario, sigue oculto en ese navegador durante 7 días. Después de enviarlo, sigue oculto durante un año. Emailit lo recuerda en el almacenamiento local del navegador, con la clave `emailit_forms_v1`, y no usa cookies. Si el almacenamiento local no está disponible, los formularios se muestran en cada carga de página.

## Integrar un formulario en tu página

Los formularios integrados se muestran dentro de tu contenido, por ejemplo en un pie de página o en la barra lateral de un blog. Además del script, necesitan un elemento contenedor:

1. **Copia el elemento contenedor.** Abre la página del formulario integrado. La tarjeta **Installation** muestra el elemento contenedor con el token público del formulario:

```html
<div data-emailit-form="FORM_TOKEN"></div>
```

2. **Colócalo.** Pega el elemento contenedor donde deba aparecer el formulario. Puedes usar el mismo formulario en varios sitios.

3. **Comprueba el script.** Asegúrate de que el [script](#add-the-script) también está en la página.

El script rellena todos los elementos contenedores `data-emailit-form` cuyo token coincide con un formulario integrado publicado. También vigila la página, así que los elementos contenedores que se añaden más tarde, por ejemplo en una aplicación de una sola página, se rellenan cuando aparecen. Los formularios integrados se muestran siempre, tanto si el visitante los ha enviado antes como si no.

## Abrir un formulario desde tu código

Llama a `emailit("show", token)` para abrir un pop-up, un flyout, un formulario de página completa o un banner cuando quieras, por ejemplo desde un botón:

```html
<button type="button" onclick="emailit('show', 'FORM_TOKEN')">
  Join the newsletter
</button>
```

- El formulario se abre de inmediato, aunque el visitante lo haya cerrado o enviado antes.
- El formulario debe estar publicado y el script debe estar en la página.
- Las llamadas que se hacen mientras el script todavía se está cargando se ponen en cola y se ejecutan cuando está listo.
- En un formulario integrado, `show` vuelve a buscar sus elementos contenedores en la página.

`openForm` funciona como alias de `show`.

## Gestionar un formulario publicado

### Actualizar o despublicar

Los cambios que guardas en un formulario publicado, o su despublicación, llegan a tu web en aproximadamente un minuto. Para quitar un formulario de tu web, abre su página y selecciona **Unpublish**. Vuelve a ser un borrador y puedes publicarlo de nuevo más adelante.

### Restablecer el token público

Cada formulario tiene un token público, que aparece como **Public token** en su página. Lo usan los elementos contenedores de los formularios integrados y las llamadas a `emailit("show", ...)`. Para generar uno nuevo, llama a [Restablecer el token público](/es/docs/api-reference/forms/reset-token/):

```bash
curl https://api.emailit.com/v2/forms/frm_8Lq2Wx5nVb3Tk/reset-token \
  -X POST \
  -H "Authorization: Bearer $EMAILIT_API_KEY"
```

El token antiguo deja de funcionar de inmediato, así que actualiza tus elementos contenedores y tu código con el nuevo `token` de la respuesta. Los formularios superpuestos que se muestran automáticamente no se ven afectados.

## Comprobar las respuestas

Envía el formulario en tu web con tus propios datos y después abre la página del formulario en el panel. **Recent submissions** enumera cada respuesta con su hora de **Created** y su **Payload**: los valores enviados, indexados por el nombre de propiedad de cada campo. Filtra la lista por fecha de creación.

Junto con los valores, Emailit guarda con cada respuesta la URL de la página, el referente, la dirección IP del visitante y el user agent de su navegador. Menciónalo en tu aviso de privacidad.

Las respuestas todavía no se añaden a tus contactos ni a tus listas de contactos. Consulta [Respuestas](/es/docs/forms/#submissions).

## Solución de problemas

<details>
<summary>El formulario no aparece</summary>

Comprueba que el formulario está **Live** y que el script está en la página, con la clave de tu espacio de trabajo en su URL. Si cerraste o enviaste el formulario antes, sigue oculto en tu navegador: abre la página en una ventana privada o elimina la entrada `emailit_forms_v1` del almacenamiento local. Recuerda que solo se muestra un pop-up, flyout o formulario de página completa por cada carga de página.

</details>

<details>
<summary>Un formulario integrado no se muestra</summary>

Comprueba que el tipo del formulario es **Embed**, que está publicado y que el valor `data-emailit-form` del elemento contenedor coincide con el token público actual del formulario. Si restableciste el token, actualiza el elemento contenedor.

</details>

## Ver también

  - [Crear un formulario](/es/docs/forms/build/): Diseña los pasos, los campos y los estilos.
  - [API de formularios](/es/docs/api-reference/forms/): Crea, publica y gestiona formularios desde el código.

---
Fuente: https://emailit.com/es/docs/forms/install/