Cómo abrir un modal de Typeform al hacer clic en un botón en Webflow sin redirigir a los usuarios

Los equipos de marketing crean botones preciosos en Webflow que redirigen a los usuarios a typeform.com/to/form-id. Los usuarios hacen clic en "Empezar", aterrizan en una página externa y algunos nunca terminan el formulario porque la redirección rompe su flujo.

El formulario existe. El botón funciona. Pero enviar a los usuarios fuera del sitio para rellenar un Typeform crea una fricción que mata las conversiones. Cada redirección es una oportunidad para que lo piensen dos veces, se distraigan o simplemente cierren la pestaña pensando: "Ya lo haré luego".

¿Una mejor estrategia? Abrir Typeform como un modal mantiene a los usuarios en tu sitio de Webflow.

Hacen clic en el botón, el formulario aparece como una capa superpuesta, lo envían y el modal se cierra. Esta guía detalla la configuración exacta: usar el createPopup método JavaScript de Typeform, el elemento de inserción de código de Webflow y un ID de botón único.

3 formas de abrir modales de Typeform en Webflow

La implementación del modal de Typeform utiliza el data-tf-popup atributo de Typeform y el script embed.js (~55 KB), que se carga de forma asíncrona tras la renderización inicial de la página, lo que añade una carga mínima al rendimiento a la vez que ofrece un comportamiento de superposición que las inserciones integradas estándar no pueden lograr.

Tienes tres opciones para mostrar Typeform en Webflow:

He implementado el enfoque de superposición modal en más de 40 sitios de clientes. El comportamiento modal elimina la fricción de las redirecciones y permite que los formularios ocupen toda la ventana gráfica para mostrarse correctamente. La configuración técnica toma entre 15 y 20 minutos y requiere entender cómo el script de Typeform añade la funcionalidad modal a los elementos de botón.

¿Qué necesitas para abrir modales de Typeform en Webflow?

Necesitas un plan de Webflow con acceso a código personalizado (planes de sitio de pago o planes de espacio de trabajo Core, Growth, Agency o Freelancer) y un Typeform publicado con su ID de formulario extraído de la URL pública.

Luego, un conocimiento básico de atributos HTML, ya que los modales de Typeform se activan mediante el atributo the data-tf-popup en lugar del sistema de interacción nativo de Webflow. Los planes gratuitos de Webflow no admiten el elemento de incrustación de código necesario para la inyección del script modal.

Antes de empezar, verifica que tienes todo esto.

Acceso a código personalizado de Webflow (obligatorio)

El elemento de incrustación de código solo funciona en:

• Planes de sitio de pago: CMS, Business o Ecommerce
• Planes de espacio de trabajo: Core, Growth, Agency o Freelancer

Las cuentas gratuitas de Webflow no pueden añadir código personalizado. Revisa tu plan en Configuración del proyecto → Planes y facturación. Sin acceso a código personalizado, es imposible implementar el modal. Deberás actualizar tu plan para que el script de incrustación se ejecute.

Typeform publicado e ID de formulario

Necesitas el ID de formulario de la URL pública de tu Typeform. La estructura de la URL es:https://form.typeform.com/to/ABC123XY

El ID del formulario es la parte que sigue a /to/, en este ejemplo, ABC123XY. Cópialo exactamente. El código de incrustación utiliza este ID para cargar el formulario correcto en el modal.

Elemento de botón existente en Webflow (recomendado)

Puedes usar el botón HTML que genera Typeform, pero conectar el comportamiento modal a tus botones existentes de Webflow logra una mejor coherencia en el diseño. El botón necesita un ID o una clase única a la que el código de inserción pueda apuntar.

Dominio HTTPS para pruebas (obligatorio para el sitio publicado)

El script de inserción de Typeform utiliza encabezados de política de seguridad de contenido que bloquean la carga en páginas que no son HTTPS. Tu sitio de Webflow publicado usa HTTPS de forma predeterminada, pero si estás haciendo pruebas en un dominio personalizado, asegúrate de que el SSL esté configurado.

Localhost funciona perfectamente para pruebas locales.

5 pasos para abrir un modal de Typeform al hacer clic en un botón en Webflow

Abrir un modal de Typeform en Webflow requiere extraer el ID de tu formulario desde la URL pública de Typeform, añadir un ID único a tu elemento de botón en Webflow y crear un elemento de inserción de código (Code Embed) con el SDK de JavaScript de Typeform que llame a window.tf.createPopup.

Luego, envuelves la inicialización en window.addEventListener('load') para asegurar que los scripts se carguen antes de la ejecución, y publicas en un dominio real, ya que los modales no funcionan en el modo de vista previa de Webflow.

El proceso utiliza la función createPopup de Typeform en lugar de atributos de datos HTML porque la interfaz actual de Typeform ya no genera código data-tf-popup, y el script de inserción no reconoce esos atributos cuando se añaden manualmente.

Paso 1: Obtén el ID de tu formulario de Typeform

Abre tu Typeform, haz clic en Compartir en la navegación superior y selecciona "Compartir el enlace" en el panel izquierdo del tablero.

Localiza el campo de enlace para compartir que muestra la URL pública de tu formulario con el formato form.typeform.com/to/ABC123XY, y copia solo los caracteres después de /to/, que es el ID de tu formulario.

Este ID de formulario (no la URL completa) es lo que la función JavaScript createPopup necesita para cargar el formulario correcto en la ventana modal.

Lo pegarás en el código JavaScript en el paso 4.

Por qué es importante el ID del formulario

El código JavaScript usa este ID para indicarle al servidor de Typeform qué formulario cargar dentro del modal. Si el ID es incorrecto (un error tipográfico, copiado de otro formulario o incluye caracteres extra de la URL), obtendrás un error 401 y el comportamiento de respaldo de la página de inicio.

Errores comunes:

• Copiar la URL completa en lugar de solo el ID (form.typeform.com/to/JsTfodZL en lugar de JsTfodZL)
• Incluir una barra diagonal al final (JsTfodZL/ en lugar de JsTfodZL)
• Confundir los IDs de varios Typeforms

Verifica dos veces que hayas copiado exactamente los caracteres después de /to/ sin espacios ni barras adicionales.

Paso 2: Añade un ID único a tu botón de Webflow

En el Diseñador de Webflow, haz clic en el botón (puedes arrastrar y soltar uno nuevo) que debería activar el modal de Typeform. El elemento puede tener cualquier texto, estilo o interacción que ya hayas configurado. Añadir la funcionalidad del modal no afectará a tu diseño actual.

Abre la configuración del elemento

Con el botón seleccionado, haz clic en el icono de engranaje en la barra de herramientas superior (o presiona D en tu teclado). Esto abrirá el panel de configuración del elemento.

En el panel de configuración del elemento, localiza el campo ID.

Introduce un identificador único, por ejemplo, typeform-trigger

Este ID puede ser lo que quieras, pero debe:

• Ser único en la página (ningún otro elemento puede usar el mismo ID)
• No contener espacios (usa guiones o guiones bajos en su lugar)
• Coincidir exactamente con lo que referenciarás en el código JavaScript

Referenciarás este ID en el JavaScript que añadirás en el paso 4. La línea document.getElementById('typeform-trigger').onclick = toggle le dirá al navegador: "Busca el elemento con este ID y, cuando se haga clic, ejecuta la toggle función que abre el modal".

Paso 3: Añade los scripts del modal de Typeform al bloque de código de Webflow

En tu Diseñador de Webflow, decide dónde colocar el código de inicialización del modal. Este código no tiene salida visual, por lo que su ubicación no afecta al diseño, pero lo habitual es ponerlo cerca del pie de página para que se cargue después de que los elementos de tus botones se hayan añadido al DOM.

Para empezar, añade un elemento de incrustación de código (Code Embed):

1. Presiona A para abrir el panel de añadir (o haz clic en el icono + en la parte superior izquierda)
2. Desplázate hasta la sección de componentes
3. Arrastra un elemento de incrustación de código a una sección o contenedor cerca de la parte inferior de tu página

En el panel del navegador, colócalo dentro de un contenedor de pie de página para mantener tu proyecto organizado.

Pega las etiquetas de script de Typeform

Con el elemento de incrustación de código seleccionado, la ventana del editor de código se abre automáticamente.

Pega este código exacto en el editor:

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

Haz clic en Guardar y cerrar.

¿Qué hacen estas dos líneas?

La primera línea carga la hoja de estilos CSS del modal de Typeform. El CSS se encarga de:

• El fondo oscuro que aparece detrás del modal
• La posición del modal (centrado en la pantalla)
• El tamaño del modal y su comportamiento adaptativo
• El estilo del botón de cierre
• Las animaciones de aparición y desaparición gradual

Sin este archivo CSS, el modal intentará abrirse pero se verá mal. Verás el contenido del formulario sin el fondo oscuro, con una posición incorrecta y el ancho de la página cambiará de forma inesperada. Esto es exactamente lo que me pasó durante las pruebas cuando faltaba el CSS.

La segunda línea carga la biblioteca de JavaScript de Typeform.

Los scripts no tienen salida visual.

Simplemente habilitan la funcionalidad del modal para cuando la llames en el paso 4.

Paso 4: Añade JavaScript al botón de conexión del modal

Vuelve al elemento Code Embed que creaste en el paso 3. Haz clic para abrir el editor y añade el siguiente bloque de script justo después de las dos líneas que ya están ahí:

<script>
  window.addEventListener('load', function() {
    const { toggle } = window.tf.createPopup('YOUR-FORM-ID-HERE', {
      size: 70
    });
    document.getElementById('typeform-trigger').onclick = toggle;
  });
</script>

Reemplaza YOUR-FORM-ID-HERE con tu ID de formulario real.

Haz clic en Guardar y cerrar.

Por qué usar este método en lugar de atributos HTML

Quizás hayas visto tutoriales que usan atributos HTML como este:

<button data-tf-popup="form-id">Open</button>

Este era el método antiguo (2022-2024). Según mis pruebas, ya casi no funciona.

Cuando añades esos atributos manualmente, el script de Typeform los ignora. Obtendrás un comportamiento de redirección (el botón abre typeform.com en una pestaña nueva) en lugar de la funcionalidad del modal.

Paso 5: Publica y prueba en el dominio real

Ya has añadido los scripts y conectado el botón. Ahora publica para ver cómo funciona el modal.

En el Webflow Designer:

1. Haz clic en Publicar en la esquina superior derecha
2. Selecciona Publicar en los dominios seleccionados
3. Espera a que Webflow despliegue tus cambios (normalmente entre 10 y 30 segundos)

Webflow mostrará un mensaje de éxito con enlaces a tu sitio publicado.

Si todo está configurado correctamente:

• El modal de Typeform aparecerá como una ventana superpuesta centrada
• Aparecerá un fondo oscuro detrás del modal (esto proviene de popup.css)
• Tu formulario se mostrará dentro del modal con el estilo correcto
• Los usuarios podrán rellenar y enviar el formulario
• Al hacer clic fuera del modal o presionar Escape, este se cerrará
• Al hacer clic en el botón de cerrar (X) en la esquina superior, se cerrará

Typeform ajusta automáticamente el tamaño del modal para dispositivos móviles, así que no necesitas configuraciones móviles por separado.

¿Por qué fallan los modales de Typeform en sitios de Webflow? Consejos para solucionar problemas comunes

Los fallos comunes de los modales de Typeform en Webflow incluyen errores 401 de no autorizado que muestran la página de inicio de Typeform en lugar de tu formulario, modales que no se abren en sitios publicados y un caos visual en el diseño al abrirse el modal.

Incluso las configuraciones correctas pueden tener problemas.

Aquí te explicamos cómo diagnosticar y solucionar los problemas más frecuentes.

El modal se abre pero muestra la página de inicio de Typeform en lugar de tu formulario

Si la ventana superpuesta del modal aparece correctamente pero muestra la página de inicio o la pantalla de inicio de sesión de Typeform en lugar de tu formulario:

Causa 1: El formulario no está publicado en Typeform

Abre tu panel de control de Typeform y comprueba que el formulario muestre el indicador verde de "Publicado". Si dice "Borrador", haz clic en Publicar antes de volver a probar. Los formularios no publicados devuelven errores 401 de no autorizado. El modal intenta cargar el formulario, el servidor de Typeform rechaza la solicitud y terminas viendo la página de inicio por defecto.

Causa 2: El ID del formulario pertenece a otro Typeform

Comprueba que hayas copiado el ID del formulario de Typeform correcto. Si tienes varios formularios, es fácil confundirse de ID. Empieza revisando la consola del navegador.

Haz clic derecho en tu página publicada → Inspeccionar → pestaña Consola, y busca errores como:

GET https://api.typeform.com/me 401 (Unauthorized)

Esto confirma que el ID del formulario es incorrecto o que el formulario no está publicado.

Los botones no hacen nada en el sitio publicado

Si al hacer clic en el botón de tu sitio publicado no ocurre nada, revisa tu primer elemento de Código incrustado. Debería contener:

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

Si falta la línea de CSS, añádela y vuelve a publicar. Sin el CSS, verás un desastre visual o directamente no aparecerá ningún modal.

Además, asegúrate de que tus elementos de Código incrustado estén en el orden correcto:

1. Primer Código incrustado: Etiquetas de script (popup.css + embed.js)
2. Segundo Código incrustado: Código de conexión del botón

Y verifica que el código de conexión del botón utilice window.addEventListener('load'):

window.addEventListener('load', function() {
  // code here
});

Sin este envoltorio, el JavaScript intenta ejecutarse antes de que se cargue la librería de Typeform y obtendrás errores de "window.tf is undefined".

Crea mejores experiencias con Typeform en Webflow más allá de los modales

Los modales de Typeform resuelven el problema de la fricción al redirigir, manteniendo a los usuarios en tu sitio de Webflow durante el envío del formulario, pero son solo una pieza de una estrategia de formularios más amplia.

Los embudos de calificación de varios pasos que dirigen a los usuarios a diferentes páginas de Webflow según sus respuestas en Typeform, las calculadoras integradas con resultados en tiempo real que se actualizan mientras el usuario escribe y los flujos de reserva programados que se sincronizan con calendarios, requieren implementaciones más sofisticadas que las simples superposiciones modales usando el método createPopup.

Los modales de Typeform funcionan bien para captar clientes potenciales y formularios de contacto, pero son disparadores estáticos. El usuario hace clic en un botón, ve un formulario y lo envía.

Para obtener más contexto sobre cómo encaja Typeform en el ecosistema de formularios de Webflow, consulta la página de integración de Webflow con Typeform.

¿Qué pasa si necesitas:

• Embudos de calificación de varios pasos donde las respuestas de Typeform determinan qué página de Webflow se carga a continuación
• Experiencias de formulario condicionales donde las selecciones del usuario en Webflow filtran qué preguntas de Typeform aparecen
• Flujos de trabajo de perfilado progresivo que recuerdan envíos anteriores y solo preguntan lo nuevo
• Validación de formularios en tiempo real que verifica dominios de correo o tamaño de empresa antes de permitir el envío en Typeform
• Pruebas A/B con diferentes activadores modales para optimizar cuándo y cómo aparecen los formularios

Esto requiere más que el SDK de JavaScript; necesita conexiones API, integraciones de webhooks y lógica de formulario personalizada.

Para equipos que crean experiencias de formulario avanzadas en Webflow, explore el ecosistema de componentes de código de Webflow. Los componentes de código le permiten crear elementos de formulario personalizados que se integran con la API de Typeform, manejan lógica de validación compleja y crean flujos de conversión que los modales estándar no admiten.