Cómo vincular formularios de Webflow a HubSpot sin perder el diseño de tu formulario

Webflow y HubSpot se conectan de forma nativa a través de la aplicación de HubSpot: olvídate de Zapier, de exportar archivos CSV manualmente o de programar envíos de formularios a mano. La integración admite tres métodos de conexión distintos, dependiendo de tu plan de HubSpot y del nivel de control de diseño que necesites sobre el formulario.

Esta guía trata sobre el método de mapeo de formularios: mantener tus formularios de Webflow tal como están diseñados mientras envías los datos directamente al CRM de HubSpot. Los envíos se registran primero en Webflow y luego se sincronizan automáticamente con HubSpot.

Esto es lo que veremos: los requisitos previos antes de empezar, el proceso exacto para mapear formularios de Webflow a HubSpot, cómo solucionar problemas cuando los campos fallan o los envíos desaparecen, y los casos específicos en los que preferirías el mapeo de formularios en lugar de insertar formularios de HubSpot directamente.

3 métodos de integración para conectar formularios de Webflow con HubSpot mediante la aplicación nativa

La aplicación nativa de HubSpot ofrece tres formas de conectar formularios según tu plan de HubSpot y tus necesidades de diseño. El mapeo de formularios es el más rápido y funciona en cualquier plan. La inserción para desarrolladores ofrece el mayor control de estilo, pero requiere un plan Professional o Enterprise.

Elige según la frecuencia con la que tu equipo de marketing necesite editar los campos del formulario y si usas solo entradas de texto o tipos de campo complejos:

Sobre el cumplimiento de la privacidad: El código de seguimiento de HubSpot establece cookies de origen para identificar a los visitantes recurrentes y rastrear su comportamiento entre sesiones. Para sitios que atienden a usuarios de la UE o que operan bajo el RGPD/CCPA, su plataforma de gestión de consentimiento (CookieHub, OneTrust, etc.) no detectará automáticamente el seguimiento de HubSpot.

Deberá integrarlo con la API del banner de cookies de HubSpot o utilizar el banner de consentimiento nativo de HubSpot, añadiendo su dominio de Webflow a la configuración de consentimiento de HubSpot.

Los envíos de formularios sin consentimiento de seguimiento llegan a HubSpot, pero no se asociarán con los datos de sesión del visitante ni con el historial de páginas vistas. Si la cronología de su contacto muestra cero páginas vistas a pesar de haber enviado varios formularios, generalmente significa que los visitantes rechazaron el consentimiento de cookies o bloquearon los scripts de terceros mediante extensiones del navegador.

¿Qué necesita para vincular los formularios de Webflow con HubSpot usando la aplicación nativa?

Antes de empezar, deben cumplirse cuatro requisitos: cuentas activas en ambas plataformas con los niveles de permiso adecuados, un formulario de Webflow publicado con al menos un envío de prueba, un formulario de HubSpot correspondiente y acceso a código personalizado en su plan de Webflow.

Si falta alguno de estos elementos, se producirán fallos silenciosos: la aplicación se instala correctamente, pero los datos del formulario no se transfieren.

Requisitos de Webflow

Los requisitos de Webflow comienzan con un sitio publicado que incluya al menos un formulario. El formulario debe tener un nombre único; los nombres de formulario duplicados provocan fallos de mapeo porque la API de Webflow obtiene los formularios basándose en los envíos más recientes, y los nombres idénticos crean referencias ambiguas.

He depurado este mismo problema en seis sitios de clientes diferentes donde los equipos de marketing duplicaron formularios de boletines en el pie de página en varias páginas sin cambiar el atributo de nombre del formulario.

Cada campo del formulario necesita un elemento HTML Label, no solo un marcador de posición o una etiqueta visual. Aquí es donde ocurren el 90% de los problemas de configuración inicial. Webflow muestra un panel de "Configuración de campo" donde se introduce el atributo de nombre del campo, pero la integración requiere específicamente elementos Label separados con texto coincidente.

El elemento Label se encuentra en el panel de adición de Webflow, bajo la sección de formularios. Arrástrelo a su formulario, colóquelo cerca de la entrada correspondiente y asegúrese de que el texto de la etiqueta coincida exactamente con el atributo de nombre del campo de entrada.

Si empieza desde cero, el bloque de formulario predeterminado de Webflow ya incluye elementos Label correctamente estructurados. Esto solo se convierte en un problema si ha reconstruido los campos del formulario manualmente o si ha eliminado las etiquetas.

Requisitos de HubSpot

Los requisitos de HubSpot incluyen una cuenta de HubSpot activa con acceso a los formularios que desea conectar. Las cuentas gratuitas de HubSpot admiten el mapeo básico de formularios e incrustaciones iframe. La funcionalidad de incrustación para desarrolladores, que ofrece el mejor control de estilo, requiere planes HubSpot Marketing Professional (890 $/mes) o Enterprise (3.600 $/mes).

Cree un formulario coincidente en HubSpot antes de mapear los campos de Webflow. El formulario de HubSpot no necesita estar publicado en ningún sitio, pero debe existir en su biblioteca de formularios con los nombres de campo exactos que pretende mapear.

Verificación de dominio

La verificación de dominio es relevante cuando desea que el código de seguimiento de HubSpot capture datos de páginas vistas.

Vaya a Configuración de HubSpot → Seguimiento y análisis → Código de seguimiento, y añada su dominio de Webflow a la lista de "Dominios de sitio adicionales". Los sitios creados en cuentas de HubSpot después de noviembre de 2022 también deben añadirse a los dominios externos en la configuración de gestión de consentimiento, bajo Privacidad y consentimiento.

Restricciones del plan de Webflow

Se requiere acceso a código personalizado para instalar el código de seguimiento de HubSpot en su sitio de Webflow. Esto está disponible en los planes de espacio de trabajo de pago (Core, Growth, Agency o Freelancer) y en los planes de sitio de pago (CMS, Business o Ecommerce).

Los planes Starter gratuitos no admiten la inyección de código personalizado, lo que impide que el código de seguimiento de HubSpot se cargue, incluso si la aplicación se instala correctamente.

5 pasos para vincular formularios de Webflow con HubSpot usando la aplicación nativa

La conexión completa implica instalar la aplicación, autenticar ambas cuentas, asignar los campos del formulario a través de la Configuración del sitio de Webflow, habilitar la recopilación de formularios externos de HubSpot y verificar que los datos lleguen a la base de datos de contactos de HubSpot.

Cada paso debe completarse en orden.

Paso 1: Instala la aplicación de HubSpot en tu espacio de trabajo de Webflow

Abre tu proyecto de Webflow en el Diseñador y haz clic en el icono de Aplicaciones e integraciones (la pieza de rompecabezas) en la barra lateral izquierda.

Desplázate hasta Aplicaciones conectadas y haz clic en "Buscar una aplicación". Escribe "HubSpot" en la barra de búsqueda del panel de aplicaciones y selecciona la aplicación oficial de HubSpot.

Verifica que aparezcan las insignias "Aprobado por Webflow" y "Seguridad mejorada" para confirmar que estás instalando la integración certificada y no una alternativa de terceros.

Haz clic en Instalar aplicación y selecciona el sitio de Webflow específico que deseas conectar. La aplicación se conecta a nivel de sitio, no de espacio de trabajo. Debes seleccionar los sitios individualmente durante la instalación. Este alcance a nivel de sitio significa que los equipos de agencias que gestionan varios proyectos de clientes deben instalar y autorizar la aplicación por separado para cada sitio.

El proceso de instalación te redirige a la página de autorización de HubSpot, donde otorgarás a Webflow acceso a recursos específicos de HubSpot. Revisa los permisos con atención: la aplicación solicita acceso a formularios, contactos, datos de seguimiento y archivos.

Haz clic en "Elegir cuenta" para seleccionar qué portal de HubSpot se conectará a este sitio de Webflow y, luego, haz clic en "Conectar aplicación" para completar la autenticación OAuth.

Una nota importante para los equipos de agencias: si alguna vez necesitas desconectar y volver a conectar la aplicación de HubSpot (por transferencia de cuenta, cambio de portal o reinstalación), también deberás eliminar y volver a añadir la integración de formularios en cualquier sitio conectado previamente. Volver a conectar la aplicación por sí sola no restaurará las asignaciones de formularios existentes.

Una vez completada la autorización, volverás al Diseñador de Webflow con la aplicación de HubSpot instalada. La aplicación aparecerá en tu panel de aplicaciones con un indicador verde de "Instalada". No intentes asignar formularios de inmediato. La aplicación necesita al menos un envío de formulario en tu sitio publicado para que la detección de campos funcione correctamente.

Paso 2: Publica tu sitio de Webflow y realiza un envío de formulario de prueba

Navega a la página de Webflow que contiene el formulario que deseas conectar y haz clic en Publicar en la esquina superior derecha. Selecciona tu destino de publicación (dominio de prueba o dominio personalizado), espera a que finalice el proceso y abre tu sitio en vivo en una nueva pestaña del navegador.

Localiza el formulario en tu página publicada y completa todos los campos. Los envíos parciales o los campos vacíos pueden causar problemas de asignación durante el paso 4. Usa datos realistas que coincidan con el formato esperado para cada tipo de campo.

Envía el formulario y verifica que aparezca el mensaje de éxito de Webflow. Consulta la pestaña Configuración del sitio → Formularios de Webflow para confirmar que el envío se registró correctamente en la base de datos de formularios de Webflow.

Este envío de prueba tiene dos propósitos: permite que la API de Webflow detecte qué formularios existen en tu sitio y completa la lista de campos que la aplicación de HubSpot utiliza durante la asignación.

Si vas a configurar varios formularios, realiza envíos de prueba para cada uno antes de continuar con la asignación. La aplicación solo puede detectar formularios que hayan recibido al menos un envío en el sitio publicado. Los formularios que existen en el Diseñador pero que aún no se han enviado no aparecerán en la interfaz de asignación.

Paso 3: Habilita la recopilación de formularios externos en HubSpot

La aplicación nativa de HubSpot funciona aprovechando la función de "formularios que no son de HubSpot", que captura automáticamente los envíos de cualquier formulario HTML en tu sitio una vez instalado el código de seguimiento. Debes activar esta función en HubSpot para que los datos de los formularios fluyan desde Webflow.

Inicia sesión en tu cuenta de HubSpot y haz clic en el icono de engranaje de Configuración en la esquina superior derecha. En la barra lateral izquierda, despliega el menú de configuración y ve a Herramientas → Marketing → Formularios. Esto abrirá el área de gestión de formularios de HubSpot.

En la parte superior de la página de formularios, verás varias pestañas. Haz clic en la pestaña "Formularios que no son de HubSpot". Esta sección controla si HubSpot detecta y captura automáticamente los envíos de formularios externos que no se han creado con el generador de formularios de HubSpot.

Busca el interruptor etiquetado como "Recopilar datos de formularios del sitio web" y actívalo (ON).

Cuando está activada, esta configuración permite que el script de seguimiento de HubSpot supervise los envíos de formularios en todo tu sitio web y cree automáticamente registros de contacto a partir de los datos enviados.

Algunas notas importantes sobre esta configuración: HubSpot puede realizar un seguimiento de hasta 10,000 formularios que no son de HubSpot por cuenta. Se registra cada intento de envío de formulario, incluidos los envíos incompletos en los que los usuarios hicieron clic en enviar pero no rellenaron los campos obligatorios.

Este límite se refiere a objetos de formulario únicos en todos los sitios conectados a tu cuenta de HubSpot, no al volumen de envíos. Las agencias que gestionan varios sitios de clientes dentro de un mismo portal deben tener en cuenta que los formularios de cada sitio cuentan para el límite compartido.

El sistema crea una nueva entrada de "formulario que no es de HubSpot" en tu panel de control de formularios la primera vez que alguien envía cada formulario único en tu sitio.

Paso 4: Instalar el código de seguimiento de HubSpot en Webflow

El código de seguimiento es lo que realmente captura los envíos de formularios y los envía a HubSpot. Sin este script en tu sitio de Webflow, la función de formularios que no son de HubSpot no funcionará, independientemente de tu configuración.

Vuelve a la Configuración de HubSpot (icono de engranaje) y navega a Gestión de cuenta → Seguimiento y análisis → Código de seguimiento en la barra lateral izquierda. Verás tu código de seguimiento único en un bloque de código. Este fragmento de JavaScript es específico para tu cuenta de HubSpot y contiene tu ID de portal.

Haz clic en el botón "Copiar" para copiar todo el código de seguimiento al portapapeles.

El código debería comenzar con <script> e incluir una etiqueta de script que cargue la biblioteca JavaScript de HubSpot.

Pega el código en el Código personalizado de Webflow

Vuelve a Webflow y abre tu proyecto en el Diseñador. Ve a Configuración del sitio (que se encuentra en la barra lateral izquierda o en el menú del proyecto en la parte superior izquierda). Haz clic en la pestaña Código personalizado para abrir los paneles de inyección de código en todo el sitio.

Pega el código de seguimiento de HubSpot en el campo Código de encabezado (Head Code). La sección de código de encabezado se ejecuta antes de que se renderice la página, lo que garantiza que el script de seguimiento se cargue pronto y pueda supervisar todos los envíos de formularios.

Haz clic en "Guardar cambios" en Webflow y luego publica tu sitio. El código de seguimiento solo se activa en tu sitio publicado, no en la vista previa ni en los entornos de prueba de Webflow.

Para verificar que el código de seguimiento se instaló correctamente, abre tu sitio de Webflow publicado en un navegador y visualiza el código fuente de la página (clic derecho → Ver código fuente de la página). Busca "hs-script-loader" en el código fuente. Si lo encuentras, el código de seguimiento está presente y cargándose correctamente.

Paso 5: Asegúrate de que los nombres de los campos del formulario de Webflow coincidan con las propiedades de HubSpot

La función de formularios que no son de HubSpot depende de los atributos de nombre de los campos del formulario para asignar los datos enviados a las propiedades de contacto correctas. Si los nombres de tus campos de Webflow no coinciden con los nombres de propiedad esperados por HubSpot, los datos no se importarán o crearán propiedades personalizadas en lugar de completar los campos estándar.

En el Diseñador de Webflow, selecciona tu formulario y haz clic en cada campo de entrada individualmente. En el panel de Ajustes a la derecha, busca el campo etiquetado como "Name". Este es el atributo de nombre HTML que HubSpot lee para determinar a dónde deben ir los datos.

Las asignaciones de nombres de campo más comunes son:

• firstname (no "first_name" o "First Name"): propiedad de Nombre de HubSpot
• lastname: propiedad de Apellido
• email: propiedad de Correo electrónico (obligatorio; HubSpot no creará contactos sin esto)
• phone: propiedad de Número de teléfono
• company: propiedad de Nombre de la empresa
• message: propiedad de Mensaje (usado a menudo para áreas de texto)

One limitation to check before mapping fields: The form mapping method only supports plain text inputs. Dropdowns, radio buttons, checkboxes, and text areas won't map to HubSpot via this method. If your form includes these field types, you'll need the iframe embed or developer embed methods instead. Confirm your form only uses text inputs before proceeding.

Los nombres de los campos distinguen entre mayúsculas y minúsculas y deben coincidir exactamente. He depurado múltiples integraciones donde el problema era simplemente "Email" en lugar de "email" o "first_name" con un guion bajo en lugar de "firstname" sin él.

Si no estás seguro de qué nombre de propiedad usar, consulta la lista de propiedades de contacto de HubSpot. Ve a Ajustes → Gestión de datos → Propiedades en HubSpot y busca la propiedad que deseas completar. Haz clic en la propiedad y busca el campo "Nombre interno". Esa es la cadena exacta que debe coincidir con el nombre del campo de tu formulario de Webflow.

Después de actualizar los nombres de los campos en Webflow, publica tu sitio de nuevo. El código de seguimiento lee estos atributos de nombre del HTML publicado, por lo que los cambios no surtirán efecto hasta que vuelvas a publicar.

¿Qué hace que los formularios de Webflow dejen de sincronizarse con HubSpot? / Solución de problemas de integración de formularios

Los fallos de sincronización casi siempre se deben a una de estas cinco causas: discrepancias en los nombres de los campos, código de seguimiento en la ubicación incorrecta, extensiones del navegador que bloquean el script de HubSpot, preferencias de consentimiento de cookies que detienen el seguimiento de la sesión o interferencia de reCAPTCHA.

El síntoma suele ser evidente (los envíos aparecen en Webflow pero no en HubSpot), pero identificar la causa específica requiere comprobar cada una en orden.

Discrepancias en los nombres de los campos

Las discrepancias en los nombres de los campos representan la mayoría de los fallos de sincronización. La función de formularios que no son de HubSpot de HubSpot lee el atributo de nombre HTML de cada campo del formulario e intenta hacerlo coincidir con una propiedad de contacto de HubSpot.

Si tu campo de Webflow se llama "first_name" pero la propiedad de HubSpot es "firstname" (sin guion bajo), los datos no se asignarán correctamente.

Para diagnosticar esto, verifica los nombres de los campos de tu formulario de Webflow en el Diseñador (selecciona cada entrada y mira el campo "Name" en Ajustes), luego compáralos con los nombres de las propiedades de HubSpot. En HubSpot, ve a Ajustes → Gestión de datos → Propiedades, busca la propiedad y comprueba el campo "Nombre interno". Estos deben coincidir exactamente; distinguen entre mayúsculas y minúsculas y no admiten caracteres adicionales.

El enfoque más fiable es utilizar los nombres de propiedad estándar de HubSpot en tus campos de Webflow. Los nombres estándar comunes incluyen: , , , , , , , , , , .firstnamelastnameemailphonecompanywebsiteaddresscitystatezip

Si necesitas propiedades personalizadas, primero busca el nombre interno exacto en los ajustes de propiedad de HubSpot y luego úsalo en el atributo de nombre de campo de tu Webflow.

Errores en la ubicación del código de seguimiento

Los errores en la ubicación del código de seguimiento ocurren cuando el script de HubSpot no se carga correctamente en tu sitio de Webflow publicado. El error más común es pegar el código de seguimiento en el Footer Code en lugar del Head Code. El script debe cargarse antes de que se inicialicen los formularios, lo que significa que debe estar en el Head.

Haz una prueba abriendo tu sitio publicado, haciendo clic derecho en cualquier parte de la página, seleccionando "Ver código fuente de la página" y buscando (Ctrl+F o Cmd+F) "hs-script-loader". Si no encuentras esta cadena, el código de seguimiento no está en la página.

Regresa a Webflow → Site Settings → Custom Code y verifica que el código de seguimiento de HubSpot aparezca en el campo Head Code (no en el Footer Code), luego vuelve a publicar.

Conflictos con extensiones del navegador

Los conflictos con las extensiones del navegador ocurren cuando los visitantes usan bloqueadores de anuncios, extensiones de privacidad o bloqueadores de scripts que impiden que el código de seguimiento de HubSpot se ejecute. Los culpables habituales incluyen uBlock Origin, Privacy Badger, Ghostery y los escudos integrados del navegador Brave. Estas herramientas detectan el script de HubSpot como un píxel de seguimiento y lo bloquean por completo.

No puedes controlar las extensiones de los navegadores de tus visitantes, pero puedes verificar que la integración funcione haciendo pruebas en una ventana de incógnito o privada con las extensiones desactivadas.

Si los envíos aparecen en HubSpot durante las pruebas en modo incógnito pero fallan en tu navegador habitual, se confirma que el bloqueo por extensiones es la causa. Esto también afecta a un porcentaje de tus visitantes reales.

Barreras de consentimiento de cookies

Las barreras de consentimiento de cookies bloquean el seguimiento de sesiones cuando los visitantes rechazan las cookies a través de tu banner de consentimiento. El código de seguimiento de HubSpot establece cookies de origen para identificar a los visitantes recurrentes y vincular las visitas a las páginas con los registros de contacto.

Si un visitante rechaza las cookies, HubSpot aún puede capturar el envío del formulario (porque es una entrega de datos directa, no basada en cookies), pero no lo vinculará a su historial de navegación.

Esto se manifiesta cuando los contactos en HubSpot muestran envíos de formularios pero cero visitas a páginas en su cronología. Para verificarlo: abre un registro de contacto, revisa la cronología de actividad y busca eventos de "Page view". Si solo ves eventos de "Form submission", el seguimiento de cookies está bloqueado o ha sido rechazado.

Si utilizas una plataforma de gestión de consentimiento como CookieBot o OneTrust, asegúrate de que esté configurada correctamente para funcionar con el código de seguimiento de HubSpot. Algunas plataformas de consentimiento bloquean todos los scripts de forma predeterminada hasta que se otorga el consentimiento, lo que impide que el código de seguimiento se cargue incluso cuando los visitantes aceptan las cookies.

Conflictos con reCAPTCHA

reCAPTCHA cambia la forma en que se dirigen los envíos cuando los formularios de Webflow incluyen reCAPTCHA y están vinculados a HubSpot. Cuando reCAPTCHA está activo, el formulario ya no se envía a través del gestor de formularios estándar de Webflow, por lo que el envío no aparecerá en la pestaña de envíos de formularios de Webflow.

Los datos llegan a HubSpot, pero tu registro de envíos en Webflow se queda en blanco, lo que puede parecer un error de sincronización cuando en realidad no lo es.

La solución: elimina reCAPTCHA de los formularios que estás sincronizando con HubSpot (y confía en la detección de bots integrada de HubSpot) o cambia a los métodos de iframe o incrustación para desarrolladores de HubSpot, que admiten los campos nativos de reCAPTCHA de HubSpot.

Más allá de la captura básica de formularios

El mapeo de formularios gestiona un flujo de datos unidireccional: envíos de Webflow hacia contactos de HubSpot. Para los equipos que necesitan más —como activar flujos de trabajo de HubSpot desde eventos de página en Webflow, sincronizar datos del CRM de HubSpot de vuelta al CMS de Webflow o crear automatizaciones de varios pasos entre ambas plataformas—, hay dos caminos que vale la pena conocer.

Explora la integración de Webflow con Zapier para conectar los envíos de formularios de Webflow con flujos de trabajo de HubSpot, notificaciones de Slack, Google Sheets y más de 5,000 aplicaciones adicionales sin necesidad de código personalizado. Es la herramienta ideal cuando necesitas lógica condicional entre plataformas que la aplicación nativa de HubSpot no cubre.

Consulta la documentación para desarrolladores de Webflow para integraciones a nivel de API, mapeo de campos personalizados, sincronización bidireccional o flujo de datos del CMS entre HubSpot y Webflow.