Un formulario Flyout se desliza sin problemas desde el borde de la pantalla en lugar de aparecer en el centro como un popup tradicional. Proporciona alta visibilidad sin bloquear contenido, perfecto para campañas optimizadas para móviles.
Esta guía muestra cómo crear, personalizar y optimizar un formulario emergente para tu tienda.
Antes de empezar
Los formularios Flyout utilizan el mismo comportamiento y configuraciones de tema que los formularios popup. Para obtener detalles completos sobre los elementos, diseños, comportamientos y personalización de temas, consulte la Guía del Formulario de suscripción Popup.
El fragmento de JavaScript de Omnisend debe estar instalado en tu sitio web. Para Shopify, BigCommerce o WooCommerce, esto se agrega automáticamente cuando conectas tu tienda. Para plataformas personalizadas, instala el fragmento manualmente.
¿Por qué usar un formulario emergente?
Los formularios emergentes ofrecen tres ventajas clave sobre los popups centrales:
Entrada no intrusiva: Se desliza desde el borde de la pantalla en lugar de bloquear el contenido abruptamente. Los visitantes pueden navegar mientras el formulario permanece visible.
Optimizado para móviles: Se adhiere sin problemas a los bordes de la pantalla sin márgenes horizontales ni recortes incómodos.
Visibilidad persistente: Permanece visible mientras se desplaza; el fondo sigue siendo completamente interactivo y clicable.
💡 Mejor para: Tiendas móviles, ofertas de intención de salida y campañas sutiles de construcción de listas.
Cómo crear un formulario emergente
Paso 1. Crear un nuevo formulario emergente
Ve a Formularios → Crear Formulario → Tipo → Desplegable → Elige una plantilla.
💡 También puedes cambiar el estilo de un formulario existente (por ejemplo, de Popup a formulario Flyout) en Configuraciones de tema → Diseño del formulario.
Paso 2. Personaliza tu formulario
Utiliza el constructor de formularios de arrastrar y soltar para ajustar:
Elementos: Agregar o eliminar campos (correo electrónico, teléfono, nombre), botones, imágenes, bloques de texto o casillas de verificación de consentimiento legal.
Diseños: Elige un paso único o múltiples pasos (recoge el correo electrónico primero, luego el teléfono en el Paso 2). Aprende más sobre formularios de varios pasos
Copia: Escribe titulares orientados a la acción (por ejemplo, "Obtén un 15% de descuento en tu primer pedido" en lugar de "Suscríbete a nuestro boletín").
Mensaje de éxito: Personaliza lo que ven los visitantes después de enviar (texto de agradecimiento, código de descuento o botón de redirección).
💡 Consejo: Mantén los campos al mínimo – los formularios solo de correo electrónico convierten un 20–30% más que las versiones de múltiples campos.
Paso 3. Configurar ajustes de comportamiento
Controla cuándo, dónde y a quién aparece tu formulario emergente:
Disparadores de visualización
Elige uno o más:
Tiempo en la página: Mostrar después de 6–10 segundos (recomendado para visitantes primerizos).
Profundidad de desplazamiento: Trigger al 50% de desplazamiento (bueno para publicaciones de blog).
Intención de salida: Mostrar cuando los visitantes se mueven para cerrar la pestaña (escritorio y móvil).
Trigger personalizado: Utiliza eventos de JavaScript para escenarios avanzados. Ver guía de disparadores personalizados
Nota: Todos los disparadores utilizan lógica "O" – si configuras "10 segundos O 50% de desplazamiento," el formulario aparece cuando cualquiera de las condiciones se cumple.
Segmentación
Decide quién ve el formulario:
Todos los visitantes: Mostrar a todos.
No mostrar a contactos existentes: Dirigirse solo a nuevos visitantes (recomendado para evitar molestar a los suscriptores).
Segmentación por página: Mostrar en URL específicas (por ejemplo,
/collections/sale) o excluir páginas (por ejemplo,/pago).Segmentación por ubicación: Mostrar a visitantes en países o regiones específicas.
💬 Aprende más: Configuraciones de comportamiento de formularios de registro.
Frecuencia
Configura con qué frecuencia el formulario reaparece para el mismo visitante:
Una vez por sesión: Se cierra después de ser desestimado; reaparece en la próxima visita.
Una vez cada X días: Se oculta durante 7/14/30 días después de ser visto.
Paso 4. Personaliza la configuración del tema
Ajusta el formulario emergente a tu marca:
Diseño del formulario: Confirma que el tipo de visualización = Emergent. Ajusta el ancho (móvil vs. escritorio).
Posición: Elige el borde izquierdo o derecho (los formularios emergentes se deslizan desde los lados, no desde el centro).
Colores: Establece los colores de fondo, botón y texto para que coincidan con el tema de tu tienda.
Fuentes: Utiliza las fuentes de tu marca o las predeterminadas de Omnisend.
Botón de cerrar: Mostrar/ocultar el botón X; ajustar color y estilo.
💬 Aprende más: Configuraciones de tema de formularios de registro.
Paso 5. Agregar un teaser (opcional)
Un teaser es un pequeño botón que permanece visible después de que se cierra el formulario emergente. Al hacer clic, vuelve a abrir el formulario completo.
Para agregar: Desplázate hasta el menú inferior en el constructor de formularios → Agregar opción → Teaser.
💡 Mejor para: Formularios emergentes por intención de salida u ofertas de descuento – le da a los visitantes una segunda oportunidad para registrarse sin volver a activar el deslizamiento completo.
Paso 6. Habilita tu formulario
Haz clic en Habilitar formulario en el menú superior izquierdo. Tu formulario emergente se activará de inmediato en tu sitio web.
Antes de habilitar, verifica:
La vista previa móvil se ve bien (prueba en el teléfono o usa la vista móvil del constructor de formularios).
Las reglas de segmentación son correctas (no quieres menús desplegables en las páginas de pago).
La casilla de verificación de consentimiento legal está habilitada si es necesario (cumplimiento del RGPD). Ver guía de RGPD.
Rastrear rendimiento
Después de habilitar, monitorea los resultados en Informes → Formularios → Abre el informe dedicado de tu formulario emergente.
Métricas clave:
Vistas: Cuántos visitantes vieron el formulario emergente.
Envíos: Cuántos enviaron el formulario.
Tasa de registro: Cuántos se registraron como nuevos suscriptores.
💡 Consejo: Ejecuta un Prueba A/B para comparar las tasas de conversión de flyout vs. popup para tu audiencia.
Preguntas Frecuentes
¿Cuál es la diferencia entre un flyout y un popup?
Los formularios emergentes se deslizan desde el borde de la pantalla; los popups aparecen en el centro con un fondo atenuado. Ambos utilizan la misma segmentación, activadores de visualización y opciones de personalización. Los flyouts son menos disruptivos, especialmente en dispositivos móviles.
¿Puedo agregar un teaser a un flyout?
Sí. Agrega un teaser en el Constructor de Formularios (menú inferior → Opción Agregar → Teaser). Después de que se cierra el flyout, el botón del teaser permanece visible. Hacer clic en él vuelve a abrir el formulario completo.
¿Debería usar flyout o popup para visitantes móviles?
Los flyouts son mejores para móviles porque no bloquean toda la pantalla. Los visitantes pueden desplazarse y navegar mientras el flyout permanece visible en el lado.
¿Puedo recopilar tanto el correo electrónico como el SMS en un desplegable?
Sí. Add both Email Input and Phone Number fields. For higher completion rates, use a para recoger el correo electrónico en el Paso 1, el teléfono en el Paso 2.
¿El flyout funciona con intención de salida en móviles?
Sí. La intención de salida en móviles se basa en un desplazamiento rápido hacia arriba (detectado cuando los visitantes deslizan para cerrar la pestaña).
¿Puedo cambiar en qué lado aparece el flyout (izquierda vs. derecha)?
Sí. Ir a Configuraciones del tema → Diseño del formulario → Posición y seleccionar Izquierda o Derecha. Esto determina desde qué borde de la pantalla se desliza el flyout.
¿Puedo redirigir a los visitantes a una página de agradecimiento después de registrarse?
Los formularios de flyout no soportan redirección automática. En su lugar, agrega un botón a tu mensaje de Éxito (después de la presentación) que enlace a tu página de agradecimiento. Alternativamente, usa un Formulario de Landing para la funcionalidad de redirección automática.
¿Puedo programar mi flyout para que se muestre solo durante fechas específicas (por ejemplo, Black Friday)?
Sí. Ir a Comportamiento → Programar y establecer fechas de inicio/fin. Tu flyout solo aparecerá durante ese período. Perfecto para campañas estacionales, ventas flash o ofertas por tiempo limitado.
¿Necesitas ayuda con algo? Nuestro equipo de soporte está listo para ayudar a través de chat en la aplicación o en [email protected].