Comment intégrer HubSpot et Webflow

Si vous avez choisi de créer et d'héberger votre site sur Webflow tout en souhaitant continuer à utiliser les formulaires HubSpot et connecter les deux outils, vous vous demandez peut-être quelle est la meilleure façon d'y parvenir. Dans cet article, nous explorons les meilleures façons d'intégrer Webflow à HubSpot pour tirer le meilleur parti des deux outils.

Option 1 : l'intégration HubSpot de Webflow Enterprise

Malheureusement, pour le moment, l'intégration « officielle » avec HubSpot n'est disponible que si vous souscrivez la version Enterprise de Webflow. L'intégration est donc assez simple et prête à l'emploi, mais que faire si vous ne souhaitez pas, ou n'avez pas besoin, d'un forfait Webflow Enterprise uniquement pour profiter de l'intégration HubSpot ?

Option 2 : utiliser des formulaires non-HubSpot

HubSpot propose une option de configuration qui permet de suivre les envois de formulaires non-HubSpot sur un site où le code de suivi HubSpot est installé. Pour que cela fonctionne, cette option doit être activée dans vos paramètres HubSpot, sous Formulaires.

Une fois cette option activée, si le code de suivi HubSpot est installé sur le site et sur la page où se trouve le formulaire, HubSpot collectera les informations de ce formulaire. Cela fonctionne sous certaines conditions et comporte quelques limites, listées dans cet article de HubSpot. Pour que les envois de formulaire soient collectés dans HubSpot, votre formulaire doit :

• être un formulaire HTML statique ;
• être encadré par des balises HTML <form> ;
• ne pas se trouver dans une <iframe> ;
• comporter un champ de saisie d'e-mail.

Si vous n'êtes pas très sûr de vous sur ce point, vous aurez peut-être besoin de l'aide d'un développeur. Une fois la configuration terminée, chaque envoi d'un formulaire Webflow apparaîtra dans la section des formulaires de HubSpot. Notez que vous pouvez voir des noms de formulaires inhabituels, car HubSpot reprend le nom du formulaire dans le code CSS du site.

L'outil identifie les formulaires de votre site à partir du sélecteur CSS du formulaire. Ainsi, si votre formulaire a pour ID CSS « gform_7 », il apparaîtra dans votre tableau de bord des formulaires sous le nom « #gform_7 ». Dès qu'un formulaire apparaît dans l'outil des formulaires non-HubSpot, vous pouvez le renommer pour que vous et votre équipe puissiez l'identifier facilement.

L'avantage de l'option 2, c'est que vous utilisez l'outil de création de formulaires de Webflow et que vous stylisez vos formulaires comme vous le souhaitez, sans avoir à intégrer des formulaires Hubspot, dont l'apparence peut différer et qui nécessitent du code JavaScript supplémentaire.

L'autre inconvénient de cette option est que vous ne pouvez pas utiliser les formulaires non-HubSpot comme déclencheurs d'événements pour Google Ads. Ce n'est pas essentiel, mais si vous voulez utiliser les envois de formulaire comme événement dans HubSpot afin de les renvoyer vers Google Ads, il faut que ce soit un formulaire HubSpot, ce qui est un peu gênant.

Option 3 : utiliser des formulaires HubSpot intégrés

La troisième option consiste à utiliser l'option d'intégration classique de HubSpot pour vos formulaires HubSpot. C'est simple : il suffit de copier le code d'intégration du formulaire HubSpot et de le coller dans votre page dans le Designer de Webflow, à l'aide de la fonction d'intégration (embed) de Webflow.

Voici une vidéo issue de la base de connaissances de Webflow sur le code d'intégration. Si vous disposez d'un Workspace Core, Growth, Agency ou Freelancer, ou si votre site a un forfait de site actif, vous pouvez utiliser l'élément Embed.

Voici un exemple de code d'intégration de formulaire HubSpot que vous pouvez obtenir depuis HubSpot en cliquant sur le formulaire, puis sur Partager.

L'inconvénient potentiel de cette option d'intégration des formulaires HubSpot à Webflow est que le style de votre formulaire peut différer de celui des formulaires créés dans Webflow. Vous pouvez certes modifier les paramètres du formulaire dans HubSpot pour supprimer tout style, mais il faut ensuite créer et appliquer des styles CSS à tous les éléments du formulaire pour qu'ils correspondent à vos formulaires Webflow, ce qui est un peu fastidieux.

Résumé

HubSpot et Webflow ne fonctionnent pas aussi bien ensemble que certains autres outils, mais la configuration reste assez simple. La fonction des formulaires non-HubSpot est très utile pour intégrer vos formulaires Webflow à HubSpot, au prix d'une petite perte de fonctionnalités. Le meilleur scénario consiste à intégrer votre formulaire HubSpot et à l'harmoniser avec le style de votre site, ce qui peut nécessiter l'aide d'un développeur web.