Cómo enviar formularios de Webflow a HubSpot mediante Zapier sin perder datos

Webflow y HubSpot no tienen una conexión directa de datos bidireccional de forma nativa, pero Zapier cierra esa brecha sin necesidad de código personalizado. Configura el activador una vez y cada envío de formulario en Webflow creará o actualizará un contacto en HubSpot en cuestión de segundos.

Este método mantiene tus formularios de Webflow tal como los diseñaste, mientras redirige cada envío directamente a la base de datos de contactos de HubSpot. Webflow recibe el envío primero, por lo que cuenta para los límites de tu plan de sitio, y luego Zapier captura una copia y la envía a HubSpot de inmediato. Olvídate de las exportaciones manuales, las importaciones de CSV o de perder datos durante el fin de semana.

En este artículo cubriremos: los requisitos previos necesarios antes de empezar, cómo crear la conexión en Zapier en el orden correcto, el método de mapeo de campos para evitar la pérdida de datos y los pasos de solución de problemas para cuando los envíos no aparezcan en HubSpot o la integración deje de funcionar de repente tras semanas de éxito.

¿Qué necesitas para conectar los formularios de Webflow con HubSpot mediante Zapier?

Antes de crear tu Zap, debes confirmar tres cosas: un formulario de Webflow publicado con al menos un envío de prueba, cuentas activas en las tres plataformas con los permisos adecuados y nombres de campo coherentes entre tu formulario de Webflow y las propiedades de contacto de HubSpot.

Si falta alguno de estos elementos, la integración fallará durante la configuración o dejará de funcionar silenciosamente una vez que esté activa.

Requisitos de Webflow

Los requisitos de Webflow comienzan con un formulario publicado en tu sitio web real. El formulario debe existir en el dominio publicado (no solo en el Diseñador) y al menos una persona, aunque seas tú mismo haciendo una prueba, debe haber enviado el formulario correctamente.

El activador "New Form Submission" de Zapier extrae datos de la API de envíos de formularios de Webflow, que solo devuelve formularios que ya han recibido envíos. Si tu formulario muestra 0 envíos en Configuración del sitio → Formularios, Zapier no lo detectará durante la configuración.

Cada formulario debe tener un nombre único que identifique claramente su propósito y ubicación. Los nombres de formulario duplicados en varias páginas generan confusión en el menú desplegable de selección de formularios de Zapier.

En lugar de ver "Formulario de contacto" quince veces, pon nombres descriptivos a tus formularios: "Contacto principal de inicio", "Solicitud de demo de precios", "Suscripción al blog en pie de página". Esta convención de nombres evita que mapees el formulario incorrecto por error.

Crea tu Zap siguiendo este orden exacto: publica el formulario → envía una prueba → crea el Zap. Si creas el Zap antes de completar ambos pasos, el formulario no aparecerá en el menú desplegable de Zapier y tendrás que empezar de nuevo.

Requisitos de Zapier

Los requisitos de Zapier incluyen una cuenta gratuita o de pago con asignación de tareas disponible. Cada envío de formulario que activa tu Zap consume una tarea de tu límite mensual. Las cuentas gratuitas obtienen 100 tareas al mes, lo que equivale a 100 envíos de formulario.

Si tu sitio genera más tráfico, considera un plan de pago:

• Profesional: 19,99 $/mes (facturación anual) o 29,99 $/mes (facturación mensual) para 750 tareas; incluye Zaps de varios pasos, aplicaciones premium y webhooks
• Equipo: 69 $/mes (facturación anual) o 103,50 $/mes (facturación mensual) para 2000 tareas; añade espacio de trabajo compartido, roles de usuario y SAML SSO
• Empresarial: Precios personalizados; límites de tareas anuales (las tareas no caducan mensualmente), gestor de cuenta dedicado y permisos avanzados

Monitorea el uso de tus tareas en el panel de control de Zapier para evitar alcanzar los límites a mitad de mes y perder clientes potenciales.

Requisitos de HubSpot

Los requisitos de HubSpot incluyen una cuenta activa de HubSpot (la versión gratuita funciona) con permisos para crear y editar contactos. La integración utiliza la acción "Crear o actualizar contacto" de HubSpot, que elimina duplicados basándose en la dirección de correo electrónico.

Cuando llega un envío con un correo electrónico que ya existe en tu base de datos de HubSpot, la acción actualiza las propiedades de ese contacto en lugar de crear un registro duplicado. Esta eliminación de duplicados ocurre automáticamente. No necesitas HubSpot Marketing Professional ni planes de pago para usarla.

Verifica que las propiedades de contacto de HubSpot incluyan todos los campos que deseas completar con los envíos de Webflow. Las propiedades estándar como Nombre, Apellido, Correo electrónico, Número de teléfono y Empresa están disponibles de forma predeterminada.

Las propiedades personalizadas (sector, rango de presupuesto, cronograma del proyecto, fuente de referencia) deben crearse en Configuración de HubSpot → Gestión de datos → Propiedades antes de que puedas asignarles los campos de Webflow. Al crear propiedades personalizadas, activa la opción "Usar en formularios y bots", o Zapier no mostrará la propiedad en su menú desplegable de asignación de campos.

5 pasos para enviar formularios de Webflow a HubSpot mediante Zapier

Crear la conexión entre Webflow y HubSpot en Zapier implica crear el Zap, configurar el activador de Webflow, establecer la acción de HubSpot, asignar los campos y realizar una prueba integral antes de ponerlo en marcha.

El orden importa. Omitir la prueba del activador antes de configurar las acciones puede causar errores de asignación de campos que no saldrán a la luz hasta que los envíos reales no se sincronicen correctamente.

Paso 1: Crea un nuevo Zap y configura el activador de Webflow

Inicia sesión en tu cuenta de Zapier y haz clic en el botón "Crear Zap" en la navegación superior o en el panel de control. Zapier abrirá la interfaz del editor de Zaps, donde construirás tu automatización paso a paso.

En el panel de configuración del activador, busca "Webflow" en el menú desplegable de selección de aplicaciones y selecciónalo como tu aplicación de activación. Zapier mostrará una lista de eventos de activación específicos de Webflow. Elige "Nuevo envío de formulario" en el menú desplegable de eventos.

Este activador se dispara al instante cuando alguien envía un formulario en tu sitio de Webflow publicado, utilizando el sistema de webhooks de Webflow para notificar a Zapier en tiempo real en lugar de buscar nuevos envíos según un horario.

Si la entrega del webhook falla, Zapier recurre a la búsqueda programada. En los planes de pago, esta búsqueda se ejecuta cada 2 minutos. En el plan gratuito, se ejecuta cada 15 minutos, lo que significa que un envío podría tardar hasta 15 minutos en aparecer en HubSpot si el webhook inicial falla.

Haz clic en "Iniciar sesión en Webflow" para autenticar tu cuenta. Zapier te redirigirá a la página de autorización OAuth de Webflow, donde otorgarás permiso a Zapier para acceder a tus sitios y datos de formularios.

Selecciona el espacio de trabajo de Webflow que contiene el sitio con tu formulario y autoriza la conexión. Zapier te devolverá al editor de Zaps con tu cuenta de Webflow conectada.

El menú desplegable "Cuenta" ahora mostrará tu cuenta de Webflow conectada.

Configura el envío

En la siguiente pestaña (Configurar), verás dos campos de configuración adicionales: "Sitio" y "Formulario". Haz clic en el menú desplegable Sitio y selecciona el sitio de Webflow específico que aloja el formulario que deseas monitorear. Solo aparecen en esta lista los sitios dentro del espacio de trabajo autenticado. Si administras varios sitios de clientes en diferentes espacios de trabajo, deberás crear Zaps separados para cada uno.

Después de seleccionar tu sitio, el menú desplegable Formulario se completará con los formularios que hayan recibido al menos un envío. Si tu formulario no aparece en esta lista, significa que aún no se ha publicado, que nadie lo ha enviado o que el nombre del formulario está duplicado en varias páginas.

Selecciona el formulario que deseas conectar en el menú desplegable. Zapier mostrará el nombre del formulario que configuraste en los ajustes de Webflow. Por eso es importante usar nombres de formulario únicos y descriptivos durante la configuración.

Paso 2: Prueba el activador y verifica que los datos del campo aparezcan correctamente

Haz clic en el botón "Test trigger" (Probar activador) en la parte inferior del panel de configuración del activador. Zapier consultará la API de Webflow para obtener el envío de formulario más reciente del formulario seleccionado.

Esta prueba de extracción cumple dos objetivos:

• Confirma que Zapier puede comunicarse correctamente con la API de Webflow.
• Carga los datos reales del envío que utilizarás para asignar los campos en el siguiente paso.

Zapier muestra los datos de prueba en un acordeón desplegable que contiene todos los campos del formulario y sus valores enviados. Revisa estos datos con atención. Cada campo de tu formulario de Webflow aparecerá con su valor correspondiente del envío más reciente.

Los campos comunes incluyen: Nombre (el atributo de nombre del campo del formulario), Correo electrónico, Teléfono, Mensaje y cualquier campo personalizado que hayas añadido a tu formulario.

Verifica que todos los campos esperados aparezcan en los datos de prueba. Si falta algún campo, significa que no tiene un atributo de nombre en Webflow o que no se completó durante el envío más reciente. Regresa al Diseñador de Webflow, selecciona cada campo de entrada del formulario y comprueba el campo "Name" (Nombre) en el panel de Configuración.

Cada entrada que desees sincronizar con HubSpot debe tener un atributo de nombre.

Una vez que estés conforme con los datos de prueba, haz clic en "Continue" (Continuar) para pasar al paso de configuración de la acción. Zapier guardará estos datos de prueba y los dejará disponibles en los menús desplegables cuando asignes los campos en los pasos siguientes.

Paso n.º 3: Añade la acción de HubSpot y selecciona crear o actualizar contacto

En el panel de configuración de la acción, busca "HubSpot" en el menú desplegable de selección de aplicaciones y selecciónalo. Zapier mostrará una lista de las acciones disponibles en HubSpot. Desplázate por la lista y selecciona "Create or Update Contact" (Crear o actualizar contacto) en el menú desplegable de eventos de acción.

Esta acción específica es fundamental: evita duplicar contactos al comprobar si ya existe un contacto con la dirección de correo electrónico enviada antes de decidir si crear uno nuevo o actualizar uno existente.

La acción alternativa "Create Contact" (Crear contacto) solo crea contactos nuevos y fallará si encuentra una dirección de correo electrónico que ya existe en tu base de datos de HubSpot.

Haz clic en "Sign in to HubSpot" (Iniciar sesión en HubSpot) para autenticar tu cuenta. Zapier te redirigirá a la página de autorización OAuth de HubSpot, donde otorgarás permiso a Zapier para crear y modificar contactos en tu CRM.

Selecciona el portal de HubSpot que deseas conectar (si gestionas varios) y autoriza la conexión. Zapier te devolverá al editor de Zap con tu cuenta de HubSpot conectada.

El menú desplegable "Account" (Cuenta) mostrará ahora tu cuenta de HubSpot conectada.

Después, en la pestaña Configure (Configurar), Zapier mostrará la interfaz de asignación de campos, donde especificarás qué datos del formulario de Webflow corresponden a qué propiedades de contacto de HubSpot. Esta sección de asignación contiene decenas de campos de HubSpot disponibles, organizados en propiedades estándar y personalizadas.

Paso n.º 4: Asigna los campos del formulario de Webflow a las propiedades de contacto de HubSpot

La interfaz de asignación de campos muestra las propiedades de HubSpot con campos de entrada vacíos. Cada campo de entrada incluye un icono de menú desplegable que revela todos los datos disponibles de tu prueba de activador de Webflow. Usarás este menú para seleccionar qué campo del formulario de Webflow completará cada propiedad de HubSpot.

Empieza por los campos obligatorios. El correo electrónico es obligatorio; HubSpot no creará ni actualizará contactos sin él. Haz clic en el campo de entrada de correo electrónico y luego en el icono del menú desplegable para ver los datos disponibles de Webflow.

Selecciona el campo del formulario que contiene la dirección de correo electrónico (normalmente etiquetado como "Email" o "email" en el menú desplegable). Zapier insertará una referencia, como "1. Email", en el campo de entrada, lo que indica que utilizará el valor de Email del paso 1 (tu disparador de Webflow) cada vez que se ejecute el Zap.

Asocia los campos estándar adicionales según lo que recopile tu formulario.

Las asociaciones comunes incluyen:

• Nombre: Selecciona el campo "First Name" o "firstname" de Webflow
• Apellidos: Selecciona el campo "Last Name" o "lastname" de Webflow
• Número de teléfono: Selecciona el campo "Phone" o "phone" de Webflow
• Nombre de la empresa: Selecciona el campo "Company" o "company" de Webflow
• Sitio web: Selecciona el campo "Website" o "URL" de Webflow

La lista de campos de HubSpot es extensa. Tiene más de 100 propiedades, dependiendo de la configuración de tu portal. Primero, desplázate por la sección de propiedades estándar y asocia todo lo que recopile tu formulario.

Luego, dirígete a la sección de Propiedades personalizadas si has creado campos en HubSpot que correspondan a campos únicos de tu formulario, como "Presupuesto del proyecto", "Cronograma", "Fuente de referencia" o calificadores específicos de tu sector.

Si tu formulario de Webflow recopila datos que no tienen una propiedad equivalente directa en HubSpot, tienes dos opciones:

• Crear una nueva propiedad personalizada en HubSpot (Configuración → Gestión de datos → Propiedades → Crear propiedad)
• Usar uno de los campos de texto flexibles de HubSpot, como "Mensaje" o "Descripción", como un cajón de sastre para información diversa

Deja en blanco los campos que no necesites asociar. No es obligatorio asignar todas las propiedades de HubSpot, solo aquellas que tu formulario realmente recopila. Los campos vacíos en la interfaz de asociación no causarán errores; simplemente, Zapier no actualizará esas propiedades cuando se ejecute el Zap.

Paso 5: Prueba el Zap completo y verifica que los datos aparezcan en HubSpot

Haz clic en el botón "Test action" (Probar acción) en la parte inferior de la interfaz de asociación de campos. Zapier ejecutará la acción de HubSpot usando los datos de prueba de tu disparador de Webflow, creando o actualizando realmente un contacto en tu portal de HubSpot con la información del envío de prueba.

Zapier mostrará los resultados de la prueba indicando exactamente qué ocurrió en HubSpot. Busca un mensaje de éxito que confirme que el contacto se creó o actualizó. El panel de resultados incluye el ID de registro del contacto (el identificador interno de HubSpot), la dirección de correo electrónico utilizada para la deduplicación y todas las propiedades que se configuraron durante la prueba.

Cambia a tu portal de HubSpot en una nueva pestaña del navegador.

Ve a Contactos → Contactos y busca la dirección de correo electrónico de tu envío de prueba. El contacto debería aparecer en tu base de datos.

Entra en el registro del contacto, revisa todos los campos asociados y verifica que:

• El nombre y los apellidos aparecen correctamente (no están intercambiados ni truncados)
• El formato del número de teléfono coincide con lo que esperabas
• El nombre de la empresa no terminó en el campo equivocado
• Las propiedades personalizadas se completaron con los valores correctos
• El contenido del mensaje o del área de texto conserva los saltos de línea si es necesario

Revisa la cronología de actividad del contacto desplazándote hacia abajo en su ficha. No verás un evento de "Envío de formulario" aquí. Eso solo aparece cuando usas la acción "Crear envío de formulario" de HubSpot en lugar de "Crear o actualizar contacto". La acción "Crear o actualizar contacto" modifica las propiedades del contacto directamente sin crear un evento en la cronología.

Si necesitas que los envíos de formularios aparezcan en la cronología para que el equipo de ventas los vea, tendrás que añadir un segundo paso de acción usando "Crear envío de formulario" con un formulario de marcador de posición de HubSpot.

Una vez que la prueba sea exitosa, vuelve a Zapier y haz clic en "Publicar" en la esquina superior derecha del editor de Zap. Zapier activará tu Zap y comenzará a monitorear tu formulario de Webflow en busca de nuevos envíos.

A partir de este momento, cada envío de formulario en tu sitio de Webflow publicado activará el Zap, creando o actualizando un contacto en HubSpot en un plazo de 5 a 10 segundos.

¿Qué hace que las integraciones entre Webflow, Zapier y HubSpot fallen o dejen de funcionar?

La mayoría de los fallos son problemas de configuración, no errores de la plataforma. La integración funcionaba al configurarla, pero se rompió cuando algo cambió en Webflow, HubSpot o Zapier sin las actualizaciones correspondientes en los otros sistemas.

Cinco causas específicas explican casi todos los fallos, y cada una tiene un camino claro para el diagnóstico.

Cambios en los campos del formulario en Webflow

Los cambios en los campos del formulario en Webflow son la causa más frecuente de fallos. Alguien de tu equipo edita un formulario de Webflow (añade un campo nuevo, cambia el nombre de uno existente o modifica el atributo de nombre de un campo) sin darse cuenta de que Zapier hace referencia a esos nombres exactos en su mapeo.

Cuando el Zap se ejecuta después del cambio de campo, no puede encontrar el campo renombrado en los datos del envío, por lo que esa información nunca llega a HubSpot. El Zap parece tener éxito (marca de verificación verde en el historial de tareas) porque Zapier creó o actualizó un contacto correctamente, pero a la ficha del contacto en HubSpot le falta la información del campo modificado.

Para diagnosticar esto, compara la estructura actual de tu formulario de Webflow con los mapeos de campos en tu Zap. Abre el Diseñador de Webflow, selecciona cada campo del formulario y anota el valor exacto en el campo "Nombre" (Name).

Luego abre tu Zap, haz clic en Editar y revisa los mapeos de campos en la acción de HubSpot. Cada campo mapeado debería existir todavía en Webflow con el mismo atributo de nombre. Si encuentras discrepancias, actualiza los mapeos para que hagan referencia a los nombres de campo actuales, prueba la acción y vuelve a publicar el Zap.

Cambios en las propiedades de HubSpot

Los cambios en las propiedades de HubSpot rompen los mapeos de campos cuando alguien modifica propiedades personalizadas sin actualizar la integración.

Aquí tienes algunos escenarios comunes:

• Una propiedad personalizada se elimina porque parece no estar en uso
• Una propiedad se renombra para mayor claridad
• El tipo de campo de una propiedad cambia de texto de una sola línea a un menú desplegable con valores predefinidos

Cuando Zapier intenta escribir datos en una propiedad eliminada, la acción falla con un error como "La propiedad 'project_budget' no existe". Cuando intenta escribir texto libre en una propiedad desplegable que solo acepta valores específicos, HubSpot rechaza el envío.

Consulta Configuración de HubSpot → Gestión de datos → Propiedades para verificar que todas las propiedades personalizadas a las que hace referencia tu Zap sigan existiendo y acepten el tipo de datos que envía tu formulario.

Si se eliminó una propiedad, vuelve a crearla con el mismo nombre interno o actualiza el mapeo de tu Zap para usar una propiedad de HubSpot diferente. Si cambia el tipo de campo de una propiedad, ajusta tu formulario de Webflow para enviar valores que coincidan con las nuevas restricciones (por ejemplo, opciones desplegables, rangos numéricos, formatos de fecha).

Límites de tareas de Zapier

Los límites de tareas de Zapier provocan fallos silenciosos cuando tu cuenta se queda sin tareas disponibles a mitad de mes. El Zap deja de procesar nuevos envíos de formularios, pero no envía notificaciones de error a menos que hayas configurado alertas.

Consulta Zapier → Uso para ver tu consumo actual de tareas y el límite mensual. En el plan gratuito, los Zaps se detienen al alcanzar las 100 tareas al mes. En los planes de pago, Zapier utiliza por defecto la facturación por tarea: los Zaps siguen funcionando después de superar tu límite y se te cobra 1,25 veces la tarifa por tarea de tu plan.

Los Zaps solo se detienen si has desactivado el pago por tarea o has alcanzado el límite de 3x. Consulta Zapier → Facturación y uso para ver el consumo actual y si el pago por tarea está activado.

Caducidad de la autenticación de la API

La caducidad de la autenticación de la API ocurre cuando cambias la contraseña de tu cuenta de Webflow o HubSpot, activas la autenticación de dos factores o cuando los tokens OAuth caducan tras largos periodos de inactividad.

Zapier almacena tokens de acceso que le permiten interactuar con tus cuentas sin pedirte las credenciales de inicio de sesión cada vez. Cuando esos tokens caducan o dejan de ser válidos, el Zap falla con errores de autenticación como "No se pudo autenticar con Webflow" o "Token de acceso no válido para HubSpot".

Soluciona esto volviendo a conectar tus cuentas. Ve a Zapier → Mis aplicaciones, busca la aplicación problemática (Webflow o HubSpot), haz clic en el menú de tres puntos y selecciona "Volver a conectar". Zapier te pedirá que inicies sesión y vuelvas a autorizar el acceso.

Después de volver a conectar, prueba tu Zap para verificar que puede acceder a tus datos de nuevo y luego vuelve a publicarlo.

Envíos duplicados por errores de Zapier

Los envíos duplicados por errores de Zapier ocurren ocasionalmente cuando el sistema de webhooks de Zapier procesa el mismo envío de formulario varias veces, creando contactos duplicados en HubSpot aunque la opción "Crear o actualizar contacto" debería evitar duplicados.

Esto sucede rara vez (menos del 1% de los envíos en mis implementaciones para clientes), pero cuando ocurre, es frustrante. La causa raíz suele ser la lógica de reintento del webhook. Webflow envía la notificación de envío a Zapier, Zapier la procesa correctamente, pero la confirmación de respuesta se agota antes de que Webflow la reciba.

Webflow interpreta el tiempo de espera como un fallo y vuelve a intentar el webhook, lo que provoca que Zapier procese el envío de nuevo.

No puedes evitar esto por completo (es un problema de tiempo del webhook fuera de tu control), pero puedes reducir su impacto añadiendo un paso de "Buscar contacto" antes de tu acción de "Crear o actualizar contacto".

El paso de búsqueda (Find) rastrea en HubSpot un contacto con la dirección de correo electrónico enviada. Si lo encuentra, el Zap actualiza ese contacto. Si no, el Zap crea uno nuevo. Este flujo de trabajo explícito de buscar y luego actualizar evita duplicados de forma más fiable que la deduplicación automática de "Crear o actualizar contacto".

El inconveniente: tu Zap utiliza dos tareas de Zapier por envío en lugar de una (una para buscar y otra para crear/actualizar).

¿Necesitas la conexión sin Zapier de por medio?

Una vez configurado, Zapier gestiona los envíos de formularios de Webflow a HubSpot de forma fiable. Para los equipos que desean la conexión sin depender de terceros, o cuyos formularios utilizan menús desplegables, casillas de verificación o áreas de texto que Zapier gestiona pero la aplicación nativa de HubSpot no, existen dos caminos que vale la pena conocer.

Explora la aplicación nativa de HubSpot para conectar formularios de Webflow directamente con HubSpot, sin pasar por Zapier. Es más rápida de configurar y no tiene coste por envío. El inconveniente: solo admite entradas de texto plano y no permite lógica de varios pasos ni enrutamiento condicional.

Consultala documentación para desarrolladores de Webflow para obtener control a nivel de API, sincronización bidireccional, flujo de datos del CMS entre plataformas o asignación de campos personalizados más allá de lo que permite cualquiera de los dos métodos.