Vous souhaitez intégrer un formulaire HubSpot sur votre site Web, mais vous vous heurtez à des limitations de personnalisation et de style ? Ne vous inquiétez pas, car il existe une méthode simple et efficace pour intégrer et personnaliser vos formulaires HubSpot dans Webflow, sans avoir à écrire la moindre ligne de code.

HubSpot offre certes des fonctionnalités puissantes en matière de marketing et de gestion des contacts, mais lorsqu'il s'agit de personnalisation visuelle, ses options sont souvent limitées. C'est là que Webflow entre en jeu. Avec Webflow, une plateforme de création de sites Web intuitive, vous pouvez exploiter pleinement les possibilités de personnalisation en utilisant les classes CSS.

Dans ce tutoriel, nous vous guiderons étape par étape pour intégrer et personnaliser un formulaire HubSpot dans Webflow. Vous découvrirez comment tirer parti des fonctionnalités de Webflow avec les classes CSS, pour créer des formulaires qui correspondent parfaitement à votre identité de marque et qui optimisent l'expérience utilisateur.

Étape 1 : Créer un formulaire dans Hubspot

La première étape, si vous ne l'avez pas déjà faite, va consister à se connecter à votre compte Hubspot, aller dans Formulaires (dans le menu déroulant "Marketing") et de créer un nouveau formulaire.

Vous pouvez choisir formulaire intégré et commencer avec un modèle ou non.

Ensuite, dans l'onglet "Formulaire", vous pouvez créer le formulaire adapté à vos besoins en ajoutant les champs (propriétés) proposés par l'outil.

Étape 2 : Activer l'option "Définir comme formulaire HTML brut"

Une fois que vous avez fini de paramétrer votre formulaire Hubspot, vous pourrez directement vous rendre dans l'onglet "Style et aperçu".

Dans ce dashboard, vous trouverez un bouton "Définir comme formulaire HTML brut" que vous devrez cocher. Lorsque nous convertirons le formulaire de HubSpot en HTML, nous enlèverons le style par défaut de HubSpot. Cela signifie que nous pourrons intégrer notre propre code CSS à ce formulaire à partir de Webflow.

À noter qu'il faut un plan Marketing Hub Pro au minimum pour activer cette option essentielle.

Il faut également bien penser à cliquer sur le bouton "Mettre à jour" de Hubspot pour être certain que le formulaire prenne en compte les changements.

Étape 3 : Récupérer et copier le code d'intégration du formulaire

Ensuite, il vous faudra cliquer sur le bouton "Intégrer" en haut à droite.

Un pop-up va apparaître et vous devrez aller dans l'onglet "Intégrer le code" puis cliquer sur le bouton "Copier".

Étape 4 : Intégrer le code dans un élément Embed Webflow

Vous allez maintenant pouvoir vous rendre dans votre projet Webflow.

Une fois dans le Designer, vous devrez :

• Ajouter un élément Embed à l'endroit où le formulaire doit s'afficher
• Coller le code copié depuis Hubspot
• Cliquer sur "Save and close"

Étape 5 : Dupliquer le clonable Finsweet "Hubspot Form Elements in Webflow"

Maintenant, pour pouvoir modifier le style du formulaire, on va venir cloner le projet Hubspot Form Elements in Webflow de Finsweet.

Ce clonable contient tous les éléments avec les classes d'un formulaire Hubspot que l'on va pouvoir styliser dans le Designer de Webflow. Ces classes CSS viendront s'appliquer sur les éléments de notre formulaire Hubspot.

Étape 6 : Recréer la structure de son formulaire

Après avoir dupliqué le projet de Finsweet, vous allez pouvoir reproduire le formulaire que vous avez fait dans Hubspot sur Webflow. Pour ce faire, il suffit de copier coller les éléments du clonable pour refaire la structure de votre formulaire.

Il faut : Copier les éléments (les inputs) présents dans votre formulaire de base et reproduisez la structure dans votre projet webflow.

Un formulaire entier est déjà proposé dans le clonable, vous pouvez copier-coller ce formulaire dans votre projet et remplacer ou ajouter les champs nécessaires.

Étape 7 : Personnaliser le formulaire à votre manière

Une fois que vous avez reproduit votre formulaire dans Webflow grâce au clonable Finsweet, vous pouvez styliser les éléments à l'intérieur grâce aux nombreuses options du Designer.

Attention à ne pas modifier le nom des classes CSS, car ce sont elles qui appliquent les styles au formulaire Hubspot ensuite.

Vous pourrez ensuite cacher le formulaire Webflow présent sur votre page (ou l'insérer directement dans votre page style guide) pour ne pas qu'il s'affiche une fois le projet publié.

Étape 8 : Publier et Tester

La modification ne se verra qu'une fois le site publié, il faudra donc publier votre projet et vérifier que l'implémentation est correcte.

À noter que si vous faites une modification dans Hubspot le formulaire se mettra automatiquement à jour sur votre site live (après avoir cliqué sur le bouton "Mettre à jour" dans Hubspot).

Pour aller plus loin dans l'implémentation de formulaires Hubspot x Webflow

Vous pouvez retrouver la vidéo complète de Harshit sur le sujet (vous pourrez notamment comprendre dans celle-ci les options de personnalisation supplémentaire) ci-dessous :

Ce tutoriel vous permet maintenant d'intégrer des formulaires hubspot 100% personnalisés dans votre projet Webflow sans avoir besoin de passer par un autre outil tel que Make, Zapier ou autre. Profitez donc de la puissance de cette intégration pour booster vos conversions.

Si vous souhaitez avoir un site web qui reflète votre image de marque, vous pouvez regarder notre offre de Design Figma.

Découvrez également notre comparaison Webflow vs Hubspot CRM.