Style et intégration des formulaires HubSpot sur un site web externe

Utilisez les formulaires HubSpot sur votre site web externe pour capturer des leads et synchroniser automatiquement les données de contact avec votre compte HubSpot. Vous pouvez styliser votre formulaire dans HubSpot et utiliser le code d’intégration du formulaire pour l’ajouter à votre site. Ou utilisez un lien de partage pour envoyer un formulaire distinct à votre audience. 

L’intégration d’un formulaire garantit que les soumissions sont directement synchronisées avec votre compte HubSpot, où vous pouvez gérer les contacts, déclencher l’automatisation et analyser les performances. Par exemple, vous pouvez ajouter un formulaire HubSpot à la page d’un produit sur le site web de votre entreprise pour capturer les demandes de démonstration et envoyer un e-mail de suivi automatisé. 

Si votre formulaire a été créé dans l’éditeur de formulaire hérité, découvrez comment configurer et styliser un formulaire hérité sur un site externe.

Avant de commencer

Avant de commencer à travailler avec cette fonctionnalité, examinez les exigences techniques et les considérations relatives à l’utilisation de formulaires sur des sites externes.

Exigences

• Lorsque vous intégrez un formulaire HubSpot sur un site externe, vous devez ajouter le domaine du site à vos paramètres de suivi. Les soumissions de formulaires provenant de domaines qui ne sont pas ajoutés seront marquées comme spam.
• Pour suivre les analytics sur votre formulaire intégré, vous devez installer le code de suivi HubSpot sur votre page externe.
  

Limites et considérations

• La définition de votre formulaire en tant que formulaire HTML brut n’est pas disponible dans l’éditeur de formulaire mis à jour. Seuls les formulaires créés à l’aide de l’éditeur de formulaires hérité peuvent être définis en tant que HTML brut.
• La personnalisation du code d’intégration d’un formulaire nécessite l’aide d’un développeur qui maîtrise JavaScript. Une personnalisation plus avancée peut être réalisée avec un formulaire personnalisé et l’API Formulaires HubSpot.

Personnaliser votre formulaire 

Personnalisez le texte, les champs de saisie, les boutons et l’arrière-plan de votre formulaire et de ses étapes. La personnalisation du style de formulaire est appliquée à toutes les étapes du formulaire. Il n'est pas possible de personnaliser séparément les différentes étapes du formulaire. 

1. Dans votre compte HubSpot, accédez à Marketing > Formulaires.
2. Créez un nouveau formulaire ou passez le curseur de votre souris sur un formulaire existant et cliquez sur Modifier.
3. Dans le menu latéral de gauche, cliquez sur l’icône styles Style.
4. Dans le panneau Styles de formulaire , vous pouvez personnaliser les composants suivants :
   • Champs : personnalisez le champ, y compris l'arrière-plan et les bordures. Vous pouvez également personnaliser la police, la taille de la police et les couleurs de vos libellés ainsi que les couleurs de votre texte d'aide, de vos espaces réservés et de votre texte d'erreur. 
   • Boutons : personnalisez la hauteur du bouton, son angle arrondi, son arrière-plan et son dégradé, puis ajoutez une ombre portée au bouton. Vous pouvez également personnaliser la police, la taille de la police et la couleur du texte du bouton. 
   • Paragraphe (texte enrichi) : personnalisez le style, la taille et la couleur du corps du texte. 
   • En-tête : personnalisez la police et la couleur du texte de votre en-tête. Vous pouvez ajouter une ombre portée à votre texte d'en-tête. 
   • Arrière-plan : personnalisez l'arrière-plan de votre formulaire et de ses étapes. Vous pouvez définir une couleur d'arrière-plan ou utiliser une image pour l'arrière-plan. Vous pouvez utiliser des assistants IA pour générer des images. Vous pouvez également définir une bordure pour votre formulaire.
   • Barre de progression : personnalisez la barre de progression de votre formulaire, y compris la couleur de la ligne de progression et la police de la barre de progression. 

Partager une page de formulaire autonome 

Utilisez un lien de partage pour afficher votre formulaire sur une page autonome. Toute personne disposant du lien de partage peut accéder au formulaire. Le lien de partage ne peut pas être masqué ou rendu privé.

Pour copier le lien de partage :

1. Dans votre compte HubSpot, accédez à Marketing > Formulaires.
2. Passez le curseur sur un formulaire et cliquez sur Modifier.
3. En haut à droite, cliquez sur Révisez et mettez à jour.
4. Dans le panneau de droite, en bas, cliquez sur Mettre à jour.
5. Dans la boîte de dialogue, cliquez sur Copier un lien de partage.
6. En bas, cliquez sur Copier. L’adresse web de la page sera copiée dans votre presse-papiers.
7. Dans votre navigateur, ouvrez une nouvelle fenêtre ou un nouvel onglet et collez l’URL de votre page dans la barre d’adresse pour le charger. Vous pouvez également partager l'URL de la page de formulaire directement avec d'autres pour leur donner accès au formulaire.

Copier le code d’intégration du formulaire

Intégrez votre formulaire sur votre page externe en copiant le code d’intégration du formulaire et en le collant sur votre page externe. Pour suivre les analytics pour votre formulaire intégré, votre code de suivi HubSpot doit être installé sur la page externe où vous intégrez le formulaire HubSpot.

Pour copier le code d'intégration : 

1. Dans votre compte HubSpot, accédez à Marketing > Formulaires.
2. Passez le curseur sur un formulaire et cliquez sur Modifier. 
3. En haut à droite, cliquez sur Révisez et mettez à jour.
4. Dans le panneau de droite, en bas, cliquez sur Mettre à jour.
5. Dans la boîte de dialogue, cliquez sur Obtenir le code d'intégration.
6. Dans l’onglet Intégrer le code , cliquez sur Copier.
7. Collez le code d'intégration dans le module HTML sur votre page externe.

Accéder au code développeur du formulaire

Intégrez votre formulaire et personnalisez le style à l’aide d’une feuille de style CSS externe. Cette méthode vous permet de remplacer les styles par défaut, d’appliquer un style granulaire à des éléments de formulaire spécifiques et de définir des règles globales pour un style cohérent dans vos formulaires intégrés. Découvrez comment définir un style personnalisé pour les formulaires intégrés à l’aide de CSS . 

Pour accéder au code développeur : 

1. Dans votre compte HubSpot, accédez à Marketing > Formulaires.
2. Passez le curseur sur un formulaire et cliquez sur Modifier. 
3. En haut à droite, cliquez sur Révisez et mettez à jour.
4. Dans le panneau de droite, en bas, cliquez sur Mettre à jour.
5. Dans la boîte de dialogue, cliquez sur Obtenir le code d'intégration.
6. Cliquez sur l’onglet Code développeur (avancé).
7. Pour accepter le risque que des modifications apportées à CSS ou JavaScript en externe provoquent des coupures de votre formulaire, cochez la case Je comprends les risques, montrez-moi le code .
8. En bas, cliquez sur Copier.
9. Ajoutez le code d'intégration du formulaire à votre page externe. Après avoir incorporé votre formulaire, vous pourrez styliser le formulaire dans votre feuille de style externe avec CSS.
   • Les variables CSS que vous pouvez remplacer sont répertoriées dans cet article.
   • Les styles globaux remplaceront le style de premier niveau dans tous vos formulaires intégrés. Vous pouvez également cibler des éléments individuels de vos formulaires, tels qu’une ligne d’élément de formulaire, des boutons de soumission ou des en-têtes de formulaire.