Comment connecter des formulaires Webflow à HubSpot avec Make ?

Réponse rapide : vous pouvez connecter les formulaires Webflow à HubSpot sans l'application native en créant un scénario Make qui surveille les nouveaux envois de formulaires Webflow, associe les champs aux propriétés de contact HubSpot, gère les doublons et définit automatiquement le bon lifecycle stage. Vous obtenez des données plus propres et plus de contrôle qu'avec l'intégration par défaut.

L'application native HubSpot de Webflow convient pour les configurations de base. Mais si vous avez besoin d'un mappage de champs qui va au-delà du nom et de l'email, d'une logique de déduplication ou d'une attribution automatique du lifecycle stage, vous en atteindrez vite les limites.

Make (anciennement Integromat) comble ce manque. En faisant passer vos envois de formulaires Webflow par un scénario Make, vous obtenez un pipeline entièrement configurable entre votre site web et votre CRM. Aucun code n'est nécessaire, et vous n'aurez pas de casse-tête de qualité des données de l'autre côté.

Ce tutoriel vous guide pas à pas : connecter Webflow et HubSpot dans Make, mapper correctement vos champs, filtrer les doublons et définir les lifecycle stages selon le formulaire envoyé.

Ce qu'il vous faut avant de commencer

Avant de créer le scénario, préparez les éléments suivants :

• Un site Webflow avec au moins un formulaire publié
• Un compte HubSpot (toutes les offres conviennent, y compris la version gratuite)
• Un compte Make (l'offre gratuite suffit pour ce scénario)
• Un accès administrateur aux trois plateformes

Étape 1 : configurer le déclencheur Webflow dans Make

Le déclencheur Webflow surveille les nouveaux envois de formulaires et lance le scénario à chaque nouvel envoi.

1. Ouvrez Make et cliquez sur Create a new scenario
2. Recherchez Webflow et sélectionnez le module Watch Form Submissions
3. Cliquez sur Add pour créer une nouvelle connexion Webflow
4. Dans Webflow, allez dans Site Settings > Integrations > API Access et générez un nouveau jeton d'API
5. Collez ce jeton dans Make et enregistrez la connexion
6. Sélectionnez votre site dans le menu déroulant
7. Sélectionnez le formulaire précis que vous souhaitez surveiller (vous pouvez créer des scénarios distincts pour différents formulaires s'ils nécessitent une logique différente)
8. Réglez la limite sur 1 pour un traitement en temps réel

Cliquez sur OK et exécutez le module une fois avec un envoi de test afin que Make capture la structure des données. Envoyez votre formulaire Webflow avec des données fictives avant de passer à l'étape suivante.

Étape 2 : rechercher d'abord un contact existant dans HubSpot

Ignorer la déduplication est l'erreur la plus courante dans ce type d'intégration. Sans elle, chaque envoi de formulaire crée une nouvelle fiche contact, et votre base HubSpot se remplit de doublons en quelques semaines.

Ajoutez un module HubSpot Search for a Contact avant de créer quoi que ce soit :

1. Ajoutez un nouveau module après le déclencheur Webflow
2. Recherchez HubSpot CRM et sélectionnez Search for Contacts
3. Connectez votre compte HubSpot via OAuth (Make vous y invitera)
4. Réglez le Ajoutez un module pour rechercher par email à partir de l'email de l'envoi Webflow (mappez-le depuis la sortie de l'étape 1)
5. Réglez la limite de résultats sur 1

Ce module renvoie le contact existant s'il en trouve un, ou un résultat vide s'il n'y a aucune correspondance. L'étape suivante crée des branches selon ce résultat.

Étape 3 : ajouter un Router pour distinguer contacts nouveaux et existants

Un module Router divise votre scénario en deux chemins : l'un pour les nouveaux contacts, l'autre pour les contacts existants.

1. Ajoutez un module Router après l'étape de recherche
2. Chemin 1 (nouveau contact) : ajoutez un filtre avec la condition « Number of results equals 0 »
3. Chemin 2 (contact existant) : ajoutez un filtre avec la condition « Number of results greater than 0 »

Cette structure évite d'écraser par erreur les données d'un contact avec un champ vide issu d'un formulaire, et de créer le moindre doublon.

Étape 4 : mapper les champs et créer le contact HubSpot (chemin 1)

Sur le chemin des nouveaux contacts, ajoutez un module HubSpot Create a Contact.

Le mappage des champs est l'endroit où la plupart des intégrations échouent. Les noms de champs Webflow et les noms de propriétés HubSpot correspondent rarement d'emblée. Voici comment procéder correctement :

Mappages de champs standards :

Séparer un champ de nom complet :

Si votre formulaire Webflow comporte un seul champ « Name », utilisez les fonctions de texte intégrées de Make pour le séparer :

• Prénom : {{1.name | split: " " | first}}
• Nom de famille : {{1.name | split: " " | last}}

Mapper la source du lead :

Transmettez toujours le nom du formulaire ou l'URL de la page comme propriété HubSpot afin de savoir d'où vient chaque contact. Mappez la valeur de l'envoi Webflow pageUrl vers une propriété HubSpot personnalisée appelée lead_source_url.

Étape 5 : mettre à jour le contact existant (chemin 2)

Sur le chemin des contacts existants, ajoutez un module HubSpot Update a Contact.

1. Mappez le Contact ID à partir de la sortie du module de recherche (cela indique à HubSpot quelle fiche mettre à jour)
2. Ne mappez que les champs qui doivent être mis à jour lors d'un nouvel envoi (évitez d'écraser des champs comme createdate ou original_source)
3. Une valeur par défaut sûre : mettre à jour last_form_submitted et last_activity_date uniquement, sauf si votre cas d'usage exige davantage

Vos fiches contact existantes restent ainsi propres, tout en enregistrant la nouvelle interaction.

Étape 6 : définir automatiquement le lifecycle stage

Le lifecycle stage est l'une des propriétés les plus précieuses de HubSpot, et l'une des plus souvent laissées vides. Intégrez-le au scénario pour que chaque contact arrive avec le bon stade déjà défini. Si vous analysez plus tard la performance de votre funnel, il est aussi utile de comparer la progression entre les stades avec des benchmarks B2B SaaS plus larges.

Ajoutez cette logique aux chemins de création et de mise à jour :

Option A : définir un lifecycle stage fixe par formulaire

Si votre formulaire « Request a Demo » génère toujours des Sales Qualified Leads, définissez en dur lifecyclestage comme salesqualifiedlead dans le module de ce scénario.

Option B : utiliser une condition basée sur le nom du formulaire

Si un seul scénario gère plusieurs formulaires, ajoutez un module Set Variable avant le module HubSpot et utilisez une condition :

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

Mappez ensuite cette variable vers le champ lifecyclestage dans HubSpot.

Valeurs de lifecycle stage HubSpot (utilisez exactement ces chaînes) :

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

Étape 7 : ajouter une gestion des erreurs pour ne rien perdre

Par défaut, les scénarios Make échouent en silence. Un délai d'attente dépassé de l'API HubSpot ou un champ mal formé fera disparaître l'envoi sans prévenir.

Ajoutez un gestionnaire d'erreurs de base pour intercepter les échecs :

1. Faites un clic droit sur le module HubSpot Create/Update
2. Sélectionnez Add error handler
3. Choisissez Resume et connectez-le à un module Send an Email ou Slack qui vous prévient en cas d'échec
4. Incluez les données brutes de l'envoi dans la notification afin de pouvoir ajouter le contact manuellement si besoin

La configuration prend cinq minutes et évite les pertes de données lorsque le scénario plante.

Étape 8 : tester le scénario complet

Avant d'activer le scénario, effectuez un test complet de bout en bout :

1. Cliquez sur Run once dans Make
2. Envoyez votre formulaire Webflow avec une nouvelle adresse email
3. Vérifiez que le contact apparaît dans HubSpot avec les bons champs et le bon lifecycle stage
4. Envoyez à nouveau le même formulaire avec la même adresse email
5. Vérifiez que HubSpot affiche un seul contact, et non deux, et que les champs concernés ont été mis à jour

Si le chemin de déduplication ne se déclenche pas, vérifiez que votre module de recherche filtre bien sur le bon champ email issu de la sortie Webflow. Le nom du champ varie selon l'intitulé de votre formulaire dans Webflow.

Étape 9 : activer et planifier le scénario

Une fois les tests concluants :

1. Passez le scénario sur Active
2. Réglez l'intervalle de planification sur 15 minutes (offre gratuite de Make) ou sur des déclencheurs instantanés si vous avez une offre payante
3. Surveillez l'onglet Scenario History pendant les 24 premières heures pour repérer d'éventuels cas particuliers

Pour les formulaires à fort volume, passez à l'offre Core de Make pour bénéficier de déclencheurs instantanés et de limites d'opérations plus élevées.

Pourquoi utiliser Make plutôt que l'application native Webflow HubSpot ?

L'intégration native Webflow HubSpot gère la transmission de champs de base. Make est le meilleur choix lorsque vous avez besoin de :

• Logique de déduplication avant la création des fiches
• Attribution conditionnelle du lifecycle stage selon le type de formulaire
• Workflows en plusieurs étapes (par exemple, notifier Slack ou créer un deal HubSpot en plus du contact)
• Mappage de champs personnalisé pour les propriétés non standard
• Gestion des erreurs avec notifications de secours

Pour les équipes qui gèrent plusieurs formulaires ou un CRM contenant déjà des données, Make offre un contrôle que l'application native n'offre pas. Si ces formulaires se trouvent sur des pages de conversion importantes, renforcer l'intégration est encore plus utile lorsqu'on l'associe à de solides bonnes pratiques de landing page SaaS.

FAQ

Q : puis-je connecter plusieurs formulaires Webflow à HubSpot avec un seul scénario Make ?

R : oui. Utilisez un module Router pour créer des branches selon le nom du formulaire issu de la sortie du déclencheur Webflow. Chaque branche peut avoir son propre mappage de champs et sa propre logique de lifecycle stage. Vous pouvez aussi créer un scénario distinct par formulaire pour faciliter la maintenance.

Q : cela fonctionne-t-il avec les formulaires natifs de Webflow ou seulement avec les formulaires intégrés ?

R : ce tutoriel utilise les formulaires natifs de Webflow via le déclencheur d'API. Il fonctionne avec tout formulaire créé dans le form builder natif de Webflow. Si vous utilisez des formulaires HubSpot intégrés directement dans Webflow, ces envois vont directement dans HubSpot et n'ont pas besoin de Make comme intermédiaire.

Q : que se passe-t-il si HubSpot est en panne au moment de l'envoi d'un formulaire ?

R : Make relance automatiquement les opérations en échec selon les paramètres de votre gestionnaire d'erreurs. Avec le gestionnaire d'erreurs configuré comme indiqué à l'étape 7, chaque envoi en échec déclenche une notification, ce qui vous permet de le résoudre manuellement. Make consigne également toutes les exécutions en échec dans l'onglet Scenario History.

Q : Comment éviter d'écraser le lifecycle stage des contacts existants ?

R : Sur le chemin Update Contact, définissez uniquement lifecyclestage si la valeur actuelle se situe plus bas dans le funnel que la nouvelle. Utilisez un filtre avant le module Update qui vérifie le lifecycle stage du contact existant et ne poursuit la mise à jour que si le nouveau stade représente une progression (par exemple, passer de lead sur marketingqualifiedlead).

Q : Make est-il gratuit pour ce cas d'usage ?

R : L'offre gratuite de Make comprend 1 000 opérations par mois et des intervalles d'interrogation de 15 minutes. Pour un formulaire à volume faible ou moyen (moins de 500 envois par mois), l'offre gratuite couvre le scénario décrit ici. Un volume plus élevé ou des déclencheurs instantanés nécessitent une offre payante, à partir d'environ 9 $ par mois.