¿Cómo conectar formularios de Webflow con HubSpot usando Make?

Respuesta rápida: puedes conectar los formularios de Webflow con HubSpot sin la app nativa creando un escenario de Make que detecte los nuevos envíos de formularios de Webflow, asigne los campos a las propiedades de contacto de HubSpot, gestione los duplicados y establezca automáticamente la etapa correcta del ciclo de vida. Así obtienes datos más limpios y más control que con la integración por defecto.

La app nativa de HubSpot para Webflow funciona bien para configuraciones básicas. Pero si necesitas un mapeo de campos que vaya más allá del nombre y el email, lógica de deduplicación o la asignación automática de la etapa del ciclo de vida, llegarás rápido a sus límites.

Make (antes Integromat) cubre ese hueco. Al enviar los formularios de Webflow a través de un escenario de Make, tienes un flujo totalmente configurable entre tu sitio web y tu CRM. Sin código y sin problemas de calidad de datos al otro lado.

Este tutorial te guía paso a paso: conectar Webflow y HubSpot en Make, mapear bien los campos, filtrar duplicados y establecer las etapas del ciclo de vida según el formulario enviado.

Lo que necesitas antes de empezar

Antes de crear el escenario, ten preparado lo siguiente:

• Un sitio de Webflow con al menos un formulario publicado
• Una cuenta de HubSpot (sirve cualquier plan, incluido el gratuito)
• Una cuenta de Make (el plan gratuito cubre este escenario)
• Acceso de administrador a las tres plataformas

Paso 1: configura el disparador de Webflow en Make

El disparador de Webflow detecta los nuevos envíos de formulario y lanza el escenario cada vez que llega uno.

1. Abre Make y haz clic en Create a new scenario
2. Busca Webflow y selecciona el módulo Watch Form Submissions
3. Haz clic en Add para crear una nueva conexión con Webflow
4. En Webflow, ve a Site Settings > Integrations > API Access y genera un nuevo token de API
5. Pega ese token en Make y guarda la conexión
6. Selecciona tu sitio en el menú desplegable
7. Selecciona el formulario concreto que quieres vigilar (puedes crear escenarios distintos para formularios que necesiten lógicas diferentes)
8. Establece el límite en 1 para el procesamiento en tiempo real

Haz clic en OK y ejecuta el módulo una vez con un envío de prueba para que Make capture la estructura de los datos. Envía tu formulario de Webflow con datos ficticios antes de pasar al siguiente paso.

Paso 2: busca primero si el contacto ya existe en HubSpot

Omitir la deduplicación es el error más común en este tipo de integración. Sin ella, cada envío de formulario crea un nuevo registro de contacto y tu base de datos de HubSpot se llena de duplicados en pocas semanas.

Añade un módulo Search for a Contact de HubSpot antes de crear nada:

1. Añade un nuevo módulo después del disparador de Webflow
2. Busca HubSpot CRM y selecciona Search for Contacts
3. Conecta tu cuenta de HubSpot mediante OAuth (Make te lo pedirá)
4. Configura el Añade un módulo de filtro para buscar por email usando el valor del email del envío de Webflow (mapéalo desde la salida del paso 1)
5. Establece el límite de resultados en 1

Este módulo devuelve el contacto existente si lo encuentra, o un resultado vacío si no hay coincidencia. El siguiente paso se ramifica según ese resultado.

Paso 3: añade un Router para gestionar contactos nuevos y existentes

Un módulo Router divide tu escenario en dos rutas: una para contactos nuevos y otra para los existentes.

1. Añade un módulo Router después del paso de búsqueda
2. Ruta 1 (contacto nuevo): añade un filtro con la condición «Number of results equals 0»
3. Ruta 2 (contacto existente): añade un filtro con la condición «Number of results greater than 0»

Con esta estructura nunca sobrescribirás por error los datos de un contacto con un campo vacío de un formulario, ni crearás un duplicado.

Paso 4: mapea los campos y crea el contacto en HubSpot (ruta 1)

En la ruta de contacto nuevo, añade un módulo Create a Contact de HubSpot.

El mapeo de campos es donde fallan la mayoría de las integraciones. Los nombres de los campos de Webflow y los de las propiedades de HubSpot rara vez coinciden de entrada. Así se resuelve correctamente:

Mapeos de campos estándar:

Cómo separar un campo de nombre completo:

Si tu formulario de Webflow tiene un único campo «Name», usa las funciones de texto integradas de Make para separarlo:

• Nombre: {{1.name | split: " " | first}}
• Apellido: {{1.name | split: " " | last}}

Mapear la fuente del lead:

Pasa siempre el nombre del formulario o la URL de la página como propiedad de HubSpot para saber de dónde viene cada contacto. Asigna el valor del envío de Webflow pageUrl a una propiedad personalizada de HubSpot llamada lead_source_url.

Paso 5: actualiza el contacto existente (ruta 2)

En la ruta de contacto existente, añade un módulo Update a Contact de HubSpot.

1. Mapea el Contact ID de la salida del módulo de búsqueda (esto indica a HubSpot qué registro actualizar)
2. Mapea solo los campos que deban actualizarse en un nuevo envío (evita sobrescribir campos como createdate o original_source)
3. Una opción segura por defecto: actualizar last_form_submitted y last_activity_date solamente, salvo que tu caso de uso requiera más

Así mantienes limpios tus registros de contactos existentes y, al mismo tiempo, queda registrada la nueva interacción.

Paso 6: establece la etapa del ciclo de vida automáticamente

La etapa del ciclo de vida es una de las propiedades más valiosas de HubSpot y una de las que más a menudo se dejan en blanco. Inclúyela en el escenario para que cada contacto llegue con la etapa correcta ya asignada. Si más adelante revisas el rendimiento de tu embudo, también conviene comparar la progresión entre etapas con benchmarks más amplios de B2B SaaS.

Añade esta lógica tanto a la ruta de creación como a la de actualización:

Opción A: establecer una etapa del ciclo de vida fija por formulario

Si tu formulario «Request a Demo» siempre genera Sales Qualified Leads, fija lifecyclestage como salesqualifiedlead en el módulo de ese escenario.

Opción B: usar una condición según el nombre del formulario

Si tienes un escenario que gestiona varios formularios, añade un módulo Set Variable antes del módulo de HubSpot y usa una condición:

If form name = "Request a Demo" → lifecyclestage = salesqualifiedlead
If form name = "Download Guide" → lifecyclestage = lead
If form name = "Contact Us" → lifecyclestage = marketingqualifiedlead

Después, asigna esa variable al campo lifecyclestage en HubSpot.

Valores de la etapa del ciclo de vida de HubSpot (usa exactamente estas cadenas):

• subscriber
• lead
• marketingqualifiedlead
• salesqualifiedlead
• opportunity
• customer

Paso 7: añade gestión de errores para que no se pierda nada

Los escenarios de Make fallan en silencio por defecto. Un tiempo de espera agotado de la API de HubSpot o un campo mal formado descartará el envío sin avisar.

Añade un gestor de errores básico para detectar los fallos:

1. Haz clic con el botón derecho en el módulo Create/Update de HubSpot
2. Selecciona Add error handler
3. Elige Resume y conéctalo a un módulo Send an Email o Slack que te avise cuando algo falle
4. Incluye en la notificación los datos en bruto del envío para poder añadir el contacto manualmente si hace falta

Se configura en cinco minutos y evita la pérdida de datos cuando el escenario falla.

Paso 8: prueba el escenario completo

Antes de activar el escenario, haz una prueba completa de principio a fin:

1. Haz clic en Run once en Make
2. Envía tu formulario de Webflow con una dirección de email nueva
3. Comprueba que el contacto aparece en HubSpot con los campos y la etapa del ciclo de vida correctos
4. Envía el mismo formulario otra vez con el mismo email
5. Comprueba que HubSpot muestra un solo contacto, no dos, y que los campos relevantes se han actualizado

Si la ruta de deduplicación no se activa, comprueba que el módulo de búsqueda filtra por el campo de email correcto de la salida de Webflow. El nombre del campo varía según cómo esté etiquetado tu formulario en Webflow.

Paso 9: activa y programa el escenario

Cuando las pruebas den resultado correcto:

1. Cambia el escenario a Active
2. Establece el intervalo de programación en cada 15 minutos (plan gratuito de Make) o usa disparadores instantáneos si tienes un plan de pago
3. Revisa la pestaña Scenario History durante las primeras 24 horas para detectar casos límite

Para formularios de alto volumen, pasa al plan Core de Make para tener disparadores instantáneos y límites de operaciones más altos.

¿Por qué usar Make en lugar de la app nativa de HubSpot para Webflow?

La integración nativa de HubSpot con Webflow gestiona el paso básico de campos. Make es la mejor opción cuando necesitas:

• Lógica de deduplicación antes de crear los registros
• Asignación condicional de la etapa del ciclo de vida según el tipo de formulario
• Flujos de trabajo de varios pasos (por ejemplo, avisar también a Slack o crear un deal en HubSpot junto con el contacto)
• Mapeo de campos personalizado para propiedades no estándar
• Gestión de errores con notificaciones de respaldo

Para equipos que usan más de un formulario o gestionan un CRM con datos existentes, Make ofrece un control que la app nativa no da. Si esos formularios están en páginas de conversión importantes, afinar la integración resulta aún más valioso combinado con unas buenas prácticas para landing pages de SaaS.

Preguntas frecuentes

P: ¿Puedo conectar varios formularios de Webflow con HubSpot usando un solo escenario de Make?

R: Sí. Usa un módulo Router para ramificar el escenario según el nombre del formulario que aparece en la salida del disparador de Webflow. Cada rama puede tener su propio mapeo de campos y su propia lógica de etapa del ciclo de vida. También puedes crear escenarios separados por formulario para facilitar el mantenimiento.

P: ¿Funciona con los formularios nativos de Webflow o solo con formularios incrustados?

R: Este tutorial usa los formularios nativos de Webflow mediante el disparador de la API. Funciona con cualquier formulario creado con el constructor de formularios nativo de Webflow. Si usas formularios de HubSpot incrustados directamente en Webflow, esos envíos van directos a HubSpot y no necesitan Make de intermediario.

P: ¿Qué pasa si HubSpot no está disponible cuando se envía un formulario?

R: Make reintenta automáticamente las operaciones fallidas según la configuración de tu gestor de errores. Con el gestor de errores configurado como se describe en el paso 7, cualquier envío fallido activa una notificación para que puedas resolverlo manualmente. Make también registra todas las ejecuciones fallidas en la pestaña Scenario History.

P: ¿Cómo evito sobrescribir la etapa del ciclo de vida de los contactos existentes?

R: En la ruta Update Contact, establece únicamente lifecyclestage si el valor actual está en una fase anterior del embudo que el nuevo. Usa un filtro antes del módulo Update que compruebe la etapa del ciclo de vida del contacto existente y solo continúe con la actualización si la nueva etapa supone un avance (por ejemplo, pasar de lead en marketingqualifiedlead).

P: ¿Make es gratis para este caso de uso?

R: El plan gratuito de Make incluye 1000 operaciones al mes e intervalos de sondeo de 15 minutos. Para un formulario de volumen bajo o medio (menos de 500 envíos al mes), el plan gratuito cubre el escenario descrito aquí. Un volumen mayor o los disparadores instantáneos requieren un plan de pago a partir de unos 9 $ al mes.