Crear y mostrar formularios emergentes

Published: 16 de julio de 2026 · Last updated: 21 de julio de 2026 · By Marcus Biel

Un formulario emergente se muestra sobre el contenido de tu sitio web. Coloca la oferta de suscripción directamente en el campo de visión del visitante, mientras mantiene la página subyacente en su lugar.

Los formularios emergentes son útiles para ofertas de boletines, descuentos, registros a eventos, recursos descargables y otras llamadas a la acción específicas. Como interrumpen la experiencia normal de la página, el momento y la frecuencia son tan importantes como el diseño.

Esta guía explica los ajustes específicos de los formularios emergentes. Los diseños, bloques de contenido, campos de suscriptor, etiquetas, tipografía, capas y flujos de suscripción se explican en la guía principal del Creador de formularios de suscripción.

Creación de un formulario emergente

Abre “Signup Forms”, haz clic en “Create Form” y selecciona “Popup”. Introduce un nombre interno claro y continúa al creador.

También puedes editar un formulario emergente existente haciendo clic en su nombre en la Vista general de formularios de suscripción.

Usa un nombre que explique la oferta o la ubicación, como “Popup de descuento de la página de inicio”, “Popup de registro al seminario web” o “Popup de descarga de la guía”. El nombre interno no se muestra automáticamente a los visitantes.

Elección de una plantilla de formulario emergente

Los formularios emergentes ofrecen un formulario en blanco, un formulario estándar y cuatro plantillas diseñadas:

• Descuento limpio
• Guía acogedora
• Seminario web oscuro
• Comunidad suave

Elige una plantilla cuyo tamaño y estructura de contenido se adapten a la oferta. Después puedes cambiar todo el texto, los campos, los colores, las imágenes, el espaciado y el diseño.

Diseño del formulario emergente

Usa el creador visual para organizar el formulario emergente. Puedes combinar el formulario de suscripción con texto, imágenes, vídeos, listas, botones, enlaces sociales, un contador de suscriptores, espaciadores y separadores.

Mantén el mensaje principal lo bastante breve para entenderlo de inmediato. Un encabezado claro, una explicación breve y un botón de envío específico suelen ser más eficaces que varios mensajes que compiten entre sí.

Selecciona el bloque del formulario de suscripción para configurar los campos, la información obligatoria, las etiquetas ocultas, el indicador de progreso, el contador de suscriptores, los campos de entrada y el botón de envío. Abre “Page settings” para cambiar el fondo general del formulario emergente y las opciones predeterminadas de apariencia.

El formulario emergente aparece sobre el sitio web con un control de cierre. Deja suficiente espacio visual alrededor del texto y los campos importantes para que el formulario siga siendo fácil de usar en una pantalla pequeña.

Configuración del comportamiento del formulario emergente

Selecciona el bloque del formulario de suscripción y abre “Widget Settings”. Esta sección controla cuándo se muestra el formulario emergente y con qué frecuencia puede verlo un visitante.

Retraso de visualización

“Display Delay” define cuántos segundos espera Maildroppa antes de mostrar el formulario emergente en una página web integrada.

Introduce 0 para mostrarlo sin retraso adicional. Usa un valor mayor cuando quieras que los visitantes tengan tiempo de leer la página antes de que aparezca la oferta. El creador acepta un retraso de hasta 86.400 segundos.

Elige el retraso según la página. Un retraso corto puede ser adecuado en una página de campaña específica, mientras que un retraso más largo puede resultar menos intrusivo en un artículo.

Frecuencia de visualización

“Display Frequency” controla el periodo que debe transcurrir antes de que el formulario emergente vuelva a mostrarse al mismo visitante. Las opciones disponibles son:

• Siempre
• Una vez por hora
• Una vez al día
• Una vez por semana
• Una vez al mes

Usa “Always” con cuidado. Un formulario emergente que interrumpe repetidamente al mismo visitante puede resultar frustrante. Una frecuencia diaria o semanal suele ser un mejor punto de partida para una oferta de un sitio web general.

La frecuencia se almacena en el navegador del visitante. Por eso, las pruebas realizadas en otro navegador, en una ventana de navegación privada o después de borrar el almacenamiento del navegador pueden producir un resultado diferente.

Uso de la intención de salida

Activa “Exit Intent Popup” cuando quieras que el formulario emergente se abra después de que el visitante mueva el puntero fuera del área de la página, lo que indica que podría estar a punto de salir.

Cuando la intención de salida está activada, el formulario emergente espera este comportamiento en lugar de seguir el retraso de visualización normal. La frecuencia seleccionada sigue evitando que se muestre de nuevo demasiado pronto.

La intención de salida se basa en el movimiento del puntero y, por tanto, es principalmente relevante en navegadores de escritorio y portátiles. Los dispositivos táctiles no proporcionan la misma señal de salida. Asegúrate siempre de que los visitantes móviles puedan descubrir la oferta de suscripción a través de la propia página o de otro formulario adecuado.

Apertura manual de un formulario emergente desde un elemento de la página

Un formulario emergente puede abrirse cuando un visitante hace clic en un botón, una imagen o un enlace específicos de tu sitio web. Este es el activador manual por clic. Es diferente de “Exit Intent Popup”, que reacciona cuando el visitante mueve el puntero fuera de la página.

Configura e instala el activador manual por clic de la siguiente manera:

1. Abre el formulario emergente en el Creador de formularios de suscripción.
2. Haz clic en el bloque del formulario de suscripción en el lienzo y abre “Settings” a la derecha.
3. Expande “Widget Settings” y activa “Open popup when a customer clicks a page element”.
4. Haz clic en “Save changes”.
5. Vuelve a la Vista general de formularios de suscripción y activa el formulario emergente si está inactivo.
6. Haz clic en “Show Code Snippet” en la fila de ese formulario emergente.

El cuadro de diálogo contiene los dos valores necesarios en tu sitio web:

1. Copia el código completo de la pestaña “JavaScript” y añádelo a la página del sitio web en la que el formulario emergente debe estar disponible.
2. Debajo del código, copia el ID que aparece en “Add this ID to element from which you want to manually trigger Popup”.
3. Añade ese valor exacto al atributo id del botón, la imagen o el enlace que debe abrir el formulario emergente.

El ID sigue este formato:

maildroppa-popup-btn-[form-id]

Por ejemplo:

<button id="maildroppa-popup-btn-[form-id]">Obtener la guía</button>

El JavaScript carga el formulario emergente. El ID conecta el formulario emergente con el elemento de página seleccionado. Ambos deben estar presentes en la misma página publicada. Cuando un visitante hace clic en el elemento con ese ID exacto, el script de Maildroppa abre el formulario emergente.

Si el botón de tu sitio web ya tiene un ID de otro sistema de formularios emergentes, sustitúyelo por el ID del activador de Maildroppa cuando Maildroppa deba gestionar el clic. No coloques el formulario emergente de Maildroppa dentro de un segundo formulario emergente proporcionado por el creador de tu sitio web.

Usa cada ID HTML una sola vez por página. Si varios elementos deben abrir el mismo formulario emergente, pide a la persona que implementa el sitio web que conecte esos elementos sin duplicar el mismo ID.

Conexión del flujo de suscripción

Revisa el flujo de suscripción asignado en el encabezado del creador. Este controla la respuesta inmediata tras el envío, el correo electrónico de confirmación Double Opt-in y el resultado después de la confirmación.

Puedes seleccionar un flujo existente, editarlo o crear un flujo independiente para este formulario emergente. Un flujo específico resulta útil cuando la oferta necesita su propio mensaje de confirmación o la entrega de un recurso descargable.

Vista previa y guardado

Haz clic en “Preview” para comprobar el diseño y el comportamiento del formulario emergente sin cambiar la versión utilizada en tu sitio web. Revisa el diseño, el control de cierre, el orden de los campos, el espacio para la validación y la respuesta tras el envío.

Haz clic en “Save changes” cuando el formulario emergente esté listo. Después, vuelve a la Vista general de formularios de suscripción.

Activación e inserción automática del formulario emergente

Activa el formulario emergente desde su menú de acciones de tres puntos si aún no está activo. Después, haz clic en “Show Code Snippet” y copia el código completo de la pestaña “JavaScript”.

Añade el script a todas las páginas del sitio web en las que el formulario emergente debe estar disponible. El código contiene el ID de formulario único del formulario emergente y carga su configuración guardada actual.

La pestaña “HTML” proporciona el marcado generado para implementaciones personalizadas. Si la usas, prueba cuidadosamente todo el comportamiento y los pasos de envío, ya que el código y los estilos de tu sitio web pueden afectar al resultado.

Esta sección se aplica cuando el formulario emergente debe abrirse automáticamente según su retraso de visualización o su comportamiento de intención de salida. Para abrirlo al hacer clic en un botón, una imagen o un enlace, sigue

Para obtener instrucciones generales de inserción, consulta Creación e inserción de un formulario integrado.

Prueba del formulario emergente en tu sitio web

Prueba el formulario emergente en la página real del sitio web después de añadir el código:

1. Comprueba el retraso configurado.
2. Prueba el botón de cierre y haz clic fuera del formulario.
3. Si está activada, mueve el puntero fuera de la página para probar la intención de salida.
4. Si está activado, haz clic en el elemento de página configurado para probar el activador manual.
5. Comprueba el diseño en una pantalla estrecha.
6. Envía el formulario y completa el proceso Double Opt-in.
7. Verifica el suscriptor y las etiquetas ocultas en Maildroppa.

La configuración de frecuencia puede impedir que el formulario emergente vuelva a aparecer durante pruebas repetidas. Usa una ventana de navegación privada o borra el almacenamiento del navegador correspondiente cuando necesites una visita de prueba limpia.

Actualización o desactivación del formulario emergente

Para actualizar el formulario emergente, ábrelo en Maildroppa, edita el diseño o el comportamiento, obtén una vista previa y haz clic en “Save changes”. El fragmento de JavaScript seguirá usando el mismo ID de formulario.

Para dejar de mostrarlo temporalmente, selecciona “Deactivate” en el menú de acciones. La desactivación conserva el formulario emergente y sus datos de informes anteriores. Elimina también el script o el elemento activador del sitio web si ya no son necesarios.