Points clés de l'article
- Connecter Webflow à HubSpot active votre inbound marketing en quelques étapes clés
- L'application HubSpot sur Webflow s'installe directement depuis le Webflow Apps Marketplace
- L'intégration des formulaires HubSpot dans Webflow Designer capte les leads en temps réel
- Le code de suivi HubSpot permet de tracker chaque visiteur et chaque interaction
- Des solutions alternatives comme Zapier, Make ou Integromat couvrent les cas d'usage avancés
- Le mapping des champs synchronise vos données entre Webflow et le CRM HubSpot
- Les workflows automatisés transforment vos leads en clients sans action manuelle
Tu as un site Webflow performant, mais tes leads disparaissent dans le vide après avoir rempli un formulaire web ? C'est exactement le problème que résout l'intégration HubSpot et Webflow.
Connecter Webflow à HubSpot pour l'inbound marketing, c'est mettre en place un pipeline complet : depuis la capture du formulaire Webflow jusqu'au nurturing automatique dans le CRM HubSpot. Aujourd'hui, trois grandes familles de méthodes existent pour y parvenir. La première passe par l'installation de l'application HubSpot via le Webflow Apps Marketplace, méthode native et no code. La deuxième s'appuie sur l'intégration des formulaires HubSpot dans Webflow Designer via un code embed. La troisième exploite des solutions tierces comme Zapier, Make ou Integromat pour les configurations avancées.
Que tu sois responsable marketing dans une PME, dirigeant d'une startup ou simplement en charge de ton site, ce guide couvre chaque option, étape par étape. Tu découvriras aussi comment configurer le mapping des champs, activer tes workflows et optimiser tes leviers de conversion pour que chaque visiteur compte.
Installation de l'application HubSpot via le Webflow Apps Marketplace
La méthode officielle pour connecter HubSpot dans Webflow repose sur le Webflow Apps Marketplace. C'est l'option la plus directe, sans une seule ligne de code.
- Accède à ton projet dans Webflow Designer
- Ouvre le panneau "Apps" dans la barre latérale gauche
- Recherche "HubSpot" dans le Webflow Apps Marketplace
- Clique sur "Install" pour lancer l'installation de l'application HubSpot sur Webflow
- Autorise la connexion entre ton compte HubSpot et ton site Webflow
En quelques clics, l'application HubSpot est active. Elle synchronise automatiquement les formulaires, active le code de suivi et démarre la collecte de leads directement dans ton CRM HubSpot.
Prérequis et activation de l'application
Avant l'installation, quelques prérequis s'imposent : un compte HubSpot actif (version gratuite suffisante), un plan Webflow autorisant les Apps (à partir du plan Basic ou CMS), et des droits administrateur sur les deux plateformes pour éviter tout blocage lors de l'autorisation OAuth. Une fois ces conditions réunies, l'activation prend moins de cinq minutes. L'application s'authentifie via OAuth, garantissant une connexion sécurisée sans manipulation manuelle de clés API.
Étapes d'installation pas à pas
L'installation suit un processus guidé en six étapes :
- Dans Webflow Designer, clique sur l'icône "Apps" (puzzle) dans le panneau gauche
- Sélectionne l'application HubSpot dans les Webflow Apps disponibles
- Clique sur "Add to site" puis autorise les permissions demandées
- Connecte ton compte HubSpot en cliquant sur "Connect HubSpot"
- Sélectionne le portail HubSpot à associer à ton site Webflow
- Confirme la synchronisation initiale pour importer les formulaires existants
L'application est maintenant opérationnelle. Tes formulaires Webflow peuvent être liés directement aux propriétés de contact du CRM HubSpot.
Intégration des formulaires HubSpot dans Webflow Designer
L'intégration de formulaire HubSpot dans Webflow Designer constitue le cœur de la stratégie de capture de leads. Deux approches coexistent : utiliser les formulaires natifs Webflow reliés à HubSpot, ou intégrer un formulaire HubSpot via code embed. Les formulaires natifs offrent un contrôle total sur le design, tandis que les formulaires HubSpot embarqués apportent toutes les fonctionnalités natives du CRM avec une synchronisation directe. Le chatbot HubSpot peut également être déployé via cette même logique d'embed. Le choix dépend de tes priorités : personnalisation visuelle ou fonctionnalités CRM avancées.
Création et configuration des formulaires HubSpot
Depuis ton compte HubSpot, rends-toi dans "Marketing > Formulaires" pour créer un nouveau formulaire web. HubSpot propose des modèles variés : formulaire de contact, formulaire d'inscription, pop-up ou bannière. Configure ensuite les champs du formulaire HubSpot prénom, nom, email, numéro de téléphone pour les leads B2B, champs personnalisés alignés sur tes propriétés CRM, message de confirmation post-soumission et redirections vers une page de remerciement sur ton site Webflow. Une fois le formulaire prêt, HubSpot génère automatiquement un code embed à coller dans Webflow Designer.
Embed des formulaires dans Webflow Designer
Pour intégrer un formulaire HubSpot dans Webflow, utilise l'élément "Embed" dans le Webflow Designer : glisse un bloc "HTML Embed" à l'endroit souhaité, puis colle le code embed fourni par HubSpot. Ce code comprend un script de chargement pointant vers le CDN HubSpot, un div cible avec l'ID de ton portail et l'ID du formulaire, ainsi que des paramètres de redirection post-soumission optionnels. Publie ta page Webflow et teste le formulaire web : chaque soumission doit apparaître immédiatement dans ton CRM HubSpot sous "Contacts". C'est l'intégration HubSpot et Webflow la plus directe et la plus fiable.
Configuration du code de suivi et du tracking
Au-delà des formulaires, l'intégration de HubSpot dans Webflow passe par l'installation d'un code de suivi global. Ce code HubSpot, aussi appelé pixel de tracking, enregistre le comportement de chaque visiteur pages vues, temps passé, clics, retours et s'installe une seule fois dans le head de ton site Webflow. Il enrichit automatiquement les fiches de contact dans le CRM HubSpot, permet de déclencher des workflows basés sur des comportements précis et active le chatbot HubSpot sur l'ensemble de ton site.
Installation du code de suivi HubSpot
Dans ton compte HubSpot, accède à "Paramètres > Suivi & Analytics > Code de suivi" et copie l'intégralité du snippet JavaScript fourni. Dans Webflow, ouvre les "Paramètres du projet" puis l'onglet "Code personnalisé" et colle le code HubSpot dans la section "Head Code" pour qu'il se charge sur toutes les pages. Quelques bonnes pratiques : place le code dans le pour un chargement prioritaire, évite de le dupliquer (un seul code HubSpot par domaine), active l'option "Respecter les préférences cookies" pour la conformité RGPD, et vérifie l'installation via l'extension Chrome HubSpot Sales.
Vérification et test du tracking
Après installation, utilise le vérificateur intégré HubSpot pour confirmer que le tracking fonctionne : dans "Paramètres > Suivi & Analytics", clique sur "Vérifier l'installation". Si le code HubSpot est bien détecté, une confirmation verte s'affiche. Navigue ensuite sur ton site Webflow depuis un autre navigateur et ouvre "Contacts > Visiteurs du site" dans HubSpot : ta session doit apparaître. Le chatbot HubSpot, s'il est activé, doit s'afficher dans le coin inférieur de ta page. Ce test simple valide l'intégration HubSpot et Webflow de bout en bout.
Méthodes alternatives d'intégration : iFrame, API REST et solutions tierces
L'application native n'est pas toujours la réponse adaptée. Pour des besoins spécifiques, des options d'intégration alternatives permettent de connecter HubSpot et Webflow différemment : l'iFrame intègre n'importe quel formulaire HubSpot sans toucher au code du site, l'API REST HubSpot offre un contrôle total sur les données échangées, et des plateformes comme Zapier, Make (ex-Integromat) ou n8n automatisent les flux sans développement lourd. Ces options conviennent particulièrement aux configurations low code ou aux cas d'usage complexes.
Intégration par iFrame
L'intégration par iFrame est la solution la plus simple pour les utilisateurs non techniques. Dans HubSpot, récupère l'URL de prévisualisation de ton formulaire, puis dans Webflow Designer, place un bloc "HTML Embed" et colle ce code :
Cette méthode a des limites claires : le formulaire conserve le style HubSpot par défaut, les données analytiques croisées sont partielles et les performances de chargement peuvent varier. Elle reste néanmoins utile pour un déploiement ultra-rapide ou pour tester un formulaire web avant une intégration plus poussée.
Utilisation de l'API REST HubSpot
L'API REST HubSpot donne accès à l'ensemble des fonctionnalités du CRM de façon programmatique : créer des contacts, mettre à jour des propriétés, déclencher des workflows ou récupérer des données analytiques. Pour connecter Webflow via l'API REST, génère une clé API privée dans les paramètres de ton compte HubSpot, puis utilise les Webflow Apps ou un script personnalisé pour envoyer les données de formulaire web via une requête POST à l'endpoint /crm/v3/objects/contacts. Cette méthode est idéale pour les développeurs qui veulent un contrôle granulaire sur la synchronisation des données, notamment pour les intégrations impliquant des objets CRM personnalisés.
Solutions tierces : Zapier, Make, Integromat et n8n
Les plateformes d'automatisation comme Zapier, Make (anciennement Integromat) et n8n permettent de connecter HubSpot et Webflow sans écrire de code. Avec Zapier, tu peux déclencher une action HubSpot à chaque soumission d'un formulaire Webflow, créer un contact dans le CRM avec tous les champs mappés, envoyer une notification automatique ou mettre à jour une propriété HubSpot selon les interactions sur le site. Make Integromat va plus loin avec des scénarios multi-branches et des filtres conditionnels. N8n, en version open source, offre une alternative auto-hébergée pour les entreprises soucieuses de leur souveraineté des données. Ces solutions sont particulièrement adaptées si tu utilises déjà un écosystème d'outils no code ou low code, et évitent de toucher au code de ton site Webflow tout en offrant une flexibilité remarquable pour la création de workflows.
Mapping des champs et synchronisation des données
L'intégration HubSpot et Webflow ne s'arrête pas à la connexion initiale. Pour que les données circulent correctement, le mapping des champs entre ton formulaire web et les propriétés du CRM HubSpot doit être configuré avec précision. Un champ "Email" dans Webflow doit correspondre à la propriété "email" dans HubSpot, les champs personnalisés nécessitent un mapping manuel, et une erreur de mapping crée des contacts incomplets inutilisables pour le nurturing. La synchronisation bidirectionnelle est possible via l'API REST ou Make Integromat.
Configuration du mapping de champs
Depuis l'application HubSpot dans Webflow, accède à la section "Formulaires". Pour chaque formulaire connecté, une interface te permet de faire correspondre les champs de ton formulaire web aux propriétés de contact du CRM HubSpot. Sélectionne le formulaire Webflow à configurer, choisis la propriété HubSpot correspondante pour chaque champ, crée de nouvelles propriétés dans HubSpot si nécessaire, vérifie que les types de données correspondent (texte, nombre, date, liste déroulante), puis enregistre et teste avec une soumission réelle. Un bon mapping garantit que chaque prospect entrant dans ton pipeline est immédiatement qualifié et enrichi dans le CRM HubSpot.
Automatisation de la synchronisation bidirectionnelle
La synchronisation unidirectionnelle (Webflow vers HubSpot) suffit pour la plupart des cas. Certaines stratégies inbound nécessitent cependant une synchronisation bidirectionnelle, où les mises à jour d'un contact dans HubSpot se reflètent dans tes autres outils. Pour y parvenir avec Make Integromat ou n8n, configure un webhook HubSpot déclenché lors d'une mise à jour de contact, envoie ces données vers ton site via l'API Webflow, mets à jour les affichages dynamiques si tu utilises le CMS Webflow, et documente chaque flux pour faciliter la maintenance. Cette approche est particulièrement utile quand plusieurs équipes travaillent simultanément sur les mêmes données prospects.
Activation des workflows et automation marketing
Une fois l'intégration HubSpot et Webflow en place, le vrai gain de productivité vient de la création de workflows automatisés. Un formulaire rempli déclenche un email de bienvenue en quelques secondes, le score de lead s'ajuste automatiquement selon les pages visitées sur ton site Webflow, un workflow peut assigner automatiquement un prospect à un commercial, et les relances sont planifiées selon le comportement du contact dans le CRM HubSpot.
Création des workflows marketing
Dans HubSpot, accède à "Automatisation > Workflows" et clique sur "Créer un workflow". Pour un workflow lié à une soumission de formulaire Webflow, sélectionne comme déclencheur "A rempli un formulaire" et choisis le formulaire HubSpot concerné. Ajoute ensuite une action "Envoyer un email" avec ton message de bienvenue personnalisé, configure un délai de 24h puis une relance, et ajoute une condition : si l'email est ouvert, assigne à un commercial ; sinon, continue la séquence. Termine par une action "Mettre à jour une propriété" pour marquer le contact comme "Nurturé". La création de workflows efficaces repose sur une logique claire et des tests réguliers commence simple, mesure, puis affine.
Déclenchement des automations depuis Webflow
Le code de suivi HubSpot installé sur ton site Webflow permet de déclencher des automations basées sur le comportement de navigation. Active le "Suivi des pages" dans les paramètres de ton portail HubSpot, crée des workflows déclenchés par la visite de pages stratégiques (tarifs, contact), utilise le chatbot HubSpot pour qualifier les visiteurs en temps réel, et combine le score de lead avec les données de formulaire pour prioriser tes prospects. Le chatbot HubSpot mérite une attention particulière : activé via le code de tracking, il apparaît sur les pages de ton choix dans Webflow et qualifie automatiquement les visiteurs avant même qu'ils remplissent un formulaire web. C'est un levier de conversion puissant et souvent sous-exploité.
Avantages et inconvénients des méthodes d'intégration
Chaque approche pour connecter HubSpot et Webflow présente des forces et des limites. Voici une comparaison honnête pour choisir la solution adaptée à ton contexte.
Application native HubSpot (Webflow Apps Marketplace)
- Avantages : installation rapide, no code, maintenance simplifiée, synchronisation automatique
- Inconvénients : personnalisation limitée, dépendance aux mises à jour des deux plateformes
Code embed (formulaire HubSpot)
- Avantages : fonctionnalités HubSpot complètes, tracking natif, chatbot HubSpot inclus
- Inconvénients : style par défaut HubSpot, nécessite un ajustement CSS pour le design
iFrame
- Avantages : déploiement immédiat, aucun code à maîtriser
- Inconvénients : expérience utilisateur dégradée, analytics croisées incomplètes, performances réduites
API REST HubSpot
- Avantages : contrôle total, flexibilité maximale, intégration sur mesure
- Inconvénients : nécessite des compétences de développement, maintenance plus lourde
Zapier / Make Integromat / n8n
- Avantages : low code, très flexible, compatible avec des dizaines d'autres outils
- Inconvénients : coût mensuel supplémentaire, latence possible entre la soumission et la création du contact
Pour une PME qui démarre, l'application native via le Webflow Apps Marketplace est la recommandation évidente. Pour une startup avec des besoins de personnalisation avancés, le code embed combiné à des workflows Make Integromat offre le meilleur équilibre. Pour les équipes techniques qui veulent un contrôle total, l'API REST HubSpot reste la référence.
Si tu veux comparer les capacités de Webflow avec d'autres CMS avant de te lancer, notre comparatif Webflow vs WordPress te donnera une vision complète des forces de chaque plateforme.
Optimisation de l'expérience utilisateur et des leviers de conversion
Connecter HubSpot dans Webflow, c'est bien. Optimiser chaque point de contact pour maximiser les conversions, c'est mieux. L'intégration technique n'est que la fondation : un formulaire web trop long fait fuir (limite à 3-5 champs pour les premières conversions), le placement du formulaire HubSpot influence directement le taux de remplissage, la confirmation post-soumission doit orienter vers la prochaine action, et le chatbot HubSpot sur les pages à forte intention remplace avantageusement un formulaire passif. La gestion des leviers de conversion passe aussi par des tests A/B réguliers, que HubSpot propose nativement pour les landing pages et les emails.
Pour aller plus loin sur les stratégies de génération de leads, notre guide sur la génération de leads B2B détaille les approches les plus efficaces selon ton secteur.
Meilleures pratiques UX pour les formulaires
Un formulaire HubSpot bien conçu respecte quelques règles fondamentales d'expérience utilisateur : label visible et clair au-dessus de chaque champ (jamais uniquement en placeholder), validation en temps réel pour signaler les erreurs, bouton de soumission avec un verbe d'action précis ("Obtenir mon devis", "Télécharger le guide"), message de confirmation visible immédiatement après la soumission, et personnalisation CSS alignée avec l'identité visuelle de ton site Webflow. Pour personnaliser le style des formulaires HubSpot dans Webflow, tu peux injecter du CSS personnalisé via l'embed code ou via les paramètres de style globaux de HubSpot, ce qui préserve la cohérence de l'expérience utilisateur tout en conservant les fonctionnalités natives du CRM.
Tests et optimisation des conversions
L'optimisation des leviers de conversion est un processus continu. Après avoir connecter Webflow à HubSpot inbound marketing, mets en place un cycle de mesure régulier : suis le taux de complétion de chaque formulaire web dans les analytics HubSpot, identifie les champs où les utilisateurs abandonnent le plus souvent, teste différentes versions du formulaire (longueur, ordre des champs, libellés), analyse le comportement des visiteurs via le code de suivi pour détecter les points de friction, et corrèle les données de formulaire avec les données de navigation pour comprendre le parcours complet.
Le taux de conversion de ton site web est l'indicateur clé à surveiller. Une intégration HubSpot et Webflow bien configurée devrait faire évoluer ce taux de façon mesurable dès les premières semaines. Pour les équipes qui veulent aller encore plus loin dans l'acquisition, notre article sur l'acquisition digitale et la génération de leads présente les stratégies complémentaires à mettre en place autour de cette intégration.
Conclusion : Webflow et HubSpot, le duo incontournable pour l'inbound
L'intégration de HubSpot dans Webflow est aujourd'hui accessible à tous les niveaux de maturité technique. L'application native via le Webflow Apps Marketplace est le point de départ idéal. L'embed de formulaire HubSpot et le code de suivi forment la colonne vertébrale de ton tracking. Le mapping des champs assure la qualité des données dans ton CRM HubSpot. Et les workflows automatisés transforment chaque lead capturé en opportunité commerciale réelle. Pour les besoins avancés, Zapier, Make Integromat ou l'API REST prennent le relais sans friction.
Tu veux aller plus loin et construire un site Webflow pensé dès le départ pour la conversion et l'intégration CRM ? Découvre nos services de création de site internet et parlons de ton projet. Connecter Webflow à HubSpot pour l'inbound marketing, c'est la décision qui transforme un site vitrine en véritable machine à leads.
