Dans le monde de Webflow, de nombreux clients souhaitent utiliser des formulaires Hubspot pour que leur site s'intègre parfaitement à leur écosystème. Cependant, ajouter un formulaire Hubspot à son site Webflow présente plusieurs défis.
Intégrer un embed Hubspot vs utiliser un outil de no-code (make, Zapier, N8N)?
Une première possibilité pour connecter un formulaire Hubspot à Webflow est d'utiliser directement un code Embed Hubspot. C’est la solution la plus simple et rapide. Cependant, vous ne pourrez pas personnaliser le design du formulaire et les performances de votre site seront impactées.
Si l'on a besoin de préserver les performances d'un site web et de garder un design homogène, l'alternative la plus connue est d'utiliser un outil d'automatisation no-code pour connecter Webflow à Hubspot. On parle ici de Zapier, Make ou encore n8n. Cependant, cette méthode nécessite que le client paie un abonnement. De plus, toutes les modifications du formulaire (ajout/suppression de champs) demandent une intervention et des connaissances sur les outils et les workflows. Cela rend la gestion du formulaire complexe pour le client sur les moyen et long terme.
La méthode que nous allons vous présenter est un peu le meilleur des deux mondes : un formulaire Hubspot parfaitement intégré au design de votre site, et cela sans faire appel à un outil tiers. Et pour cela, il vous suffit d’avoir quelques notions d'HTML et de CSS.
Comment parfaitement intégrer un formulaire embed Hubspot à votre site Webflow?
Récupérer le code Embed HTML
Tout d'abord, connectez-vous à votre compte HubSpot et accédez à la page de votre formulaire. Ensuite, cliquez sur "Modifier le formulaire" et cochez l'option "Définir comme formulaire HTML brut". Cela convertira le formulaire HubSpot en HTML et supprimera le style par défaut de HubSpot. Cela nous permettra d'ajouter notre code CSS à ce formulaire directement depuis Webflow. Copiez ensuite le code d'intégration HTML.
Copier le code d'intégration HubSpot
Après avoir activé l'option "Convertir en formulaire HTML brut", nous pouvons maintenant copier le code HTML fourni par HubSpot.
Ajouter le code Embed dans Webflow
Dans Webflow, créez un élément "Embed" et collez-y le code HTML que vous avez copié. Enregistrez et publiez votre site web. Comme prévu, votre formulaire va s’afficher mais sans le moindre styling.
C’est ici que commence notre petite astuce. En réalité, nous allons Utiliser les classes CSS de Webflow pour personnaliser le formulaire
Répliquer la structure HTML de votre formulaire sur Webflow
Maintenant que le formulaire HubSpot est intégré à notre site Webflow, nous pouvons, théoriquement, lui appliquer le style de votre choix. Pour ce faire, ouvrez l'inspecteur d'éléments de votre navigateur et examinez la structure HTML du formulaire HubSpot et les classes CSS appliquées à chaque éléments.
Vous devrez reproduire cette structure dans Webflow pour appliquer le style.
Voici quelques éléments de base à prendre en compte pour reproduire la structure HTML du formulaire HubSpot dans Webflow :
- Les champs de formulaire sont enveloppés dans la classe "HS-form-field".
- Les cases à cocher ont la structure "HS-form-checkbox", avec une liste non ordonnée et la classe "input-list".
Pour vous faciliter le travail, Finsweet (et oui, toujours lui) a créé un Clonable qui reprend la structure HTML de chaque élément des formulaires Hubspot sur Webflow.
Personnaliser le formulaire selon votre design et votre marque
Maintenant que vous avez reproduit cette structure dans Webflow, il nous suffit d'y appliquer les styles souhaités. Pour cela, utilisons Webflow pour personnaliser le formulaire selon le design et la marque de votre site Web.
Conclusion
Ce tutoriel vous a montré comment intégrer facilement et efficacement des formulaires HubSpot dans vos sites Webflow sans utiliser d'outils tiers. Cette méthode facilite la gestion des formulaires pour vos clients et vous permet de personnaliser entièrement le design et la marque de vos formulaires. Alors, n'hésitez plus et commencez à intégrer des formulaires HubSpot dans vos projets Webflow dès aujourd'hui !
