Objectifs :
- Apprendre à créer, gérer, et segmenter des contacts dans HubSpot.
- Comprendre l'importance des listes pour le marketing ciblé.
Contenus :
- Création et importation de contacts.
- Utilisation des filtres pour gérer et organiser les contacts.
- Création et gestion des listes statiques et dynamiques.
- Exercice pratique : Importation de contacts et création de listes segmentées pour différentes campagnes.
Partie 1: Comprendre les Listes dans HubSpot
Introduction aux Listes Statiques et Dynamiques
- Listes Statiques : Expliquez que les listes statiques sont des groupes de contacts qui ne changent pas une fois créés, sauf si vous ajoutez ou supprimez manuellement des contacts. Elles sont utiles pour des campagnes ponctuelles ou pour segmenter des contacts à un moment précis.
- Listes Dynamiques : Présentez les listes dynamiques comme des listes qui se mettent à jour automatiquement en fonction des critères définis. Si un contact remplit ou cesse de remplir ces critères, il est respectivement ajouté ou retiré de la liste. Ces listes sont idéales pour des campagnes continues ou pour suivre des segments de contacts qui changent fréquemment.
Partie 2: Importation et Organisation des Contacts
Préparation des Données pour l'Importation
- Nettoyage des Données : Soulignez l'importance de nettoyer les données avant l'importation, en supprimant les doublons, en corrigeant les erreurs, et en s'assurant que les données sont au format correct (CSV).
- Formatage des Fichiers CSV : Expliquez comment structurer un fichier CSV pour l'importation, en incluant des en-têtes de colonnes qui correspondent aux propriétés des contacts dans HubSpot et en formatant les données de manière cohérente.
Partie 3: Création et Personnalisation des Formulaires
- Types de Formulaires : Exploration des différents types de formulaires disponibles dans HubSpot et cas d'utilisation typiques pour chacun.
- Création d'un Formulaire : Démonstration étape par étape de la création d'un formulaire standard, incluant la sélection des champs, la personnalisation du design, et les paramètres de soumission.
- Personnalisation Avancée : Techniques pour personnaliser davantage les formulaires, telles que l'ajout de champs personnalisés, l'utilisation de logique conditionnelle pour afficher des champs basés sur les réponses précédentes, et la personnalisation du message de remerciement.
Partie 4 : Intégration et Gestion des Soumissions de Formulaires
- Intégration sur le Site Web : Instructions pour intégrer des formulaires sur des pages web, y compris l'utilisation du code d'intégration et l'intégration avec des pages HubSpot.
- Gestion des Soumissions : Meilleures pratiques pour gérer et suivre les soumissions de formulaires, y compris la configuration des notifications par email et l'utilisation des données de formulaire pour segmenter les contacts dans HubSpot.
Tâches de l'Exercice
- Création du Formulaire :
- Utilisez HubSpot pour créer un formulaire destiné à être intégré sur la page d'accueil du site "EcoFriendly Gadgets".
- Le formulaire doit inclure les champs suivants : Prénom, Nom, Email, Produit d'Intérêt (avec options comme "EcoChargeur", "EcoLampe", "EcoSac"), et une case à cocher pour s'abonner à la newsletter.
- Configurez un message de remerciement personnalisé qui encourage le partage sur les réseaux sociaux.
- Intégration et Test :
- Intégrez le formulaire sur une page de test dans l'environnement HubSpot, simulant la page d'accueil du site "EcoFriendly Gadgets".
- Testez le formulaire en remplissant les informations et en soumettant. Vérifiez que les soumissions sont correctement enregistrées dans HubSpot et que le message de remerciement s'affiche comme prévu.
- Ajouter un élément Embed à l'endroit où le formulaire doit s'afficher
- Coller le code copié depuis Hubspot
- Cliquer sur "Save and close"
Comment 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 :
É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).