Dernière mise à jour: 30 avril 2025
Disponible avec le ou les abonnements suivants, sauf mention contraire :
Tous les produits et les abonnements
|
Après avoir créé un formulaire dans HubSpot, vous pouvez l’ajouter à des pages HubSpot ou à des pages créées en dehors de HubSpot. Les formulaires peuvent être partagés sur votre site externe non hébergé par HubSpot :
- en intégrant le code du formulaire dans une page existante ;
- en créant une page de formulaire autonome vers laquelle vous pouvez créer un lien.
Quelle que soit la méthode, les modifications apportées au formulaire dans HubSpot sont automatiquement prises en compte sur le formulaire sur votre site externe. Après avoir ajouté votre formulaire, vous pouvez styliser votre formulaire HubSpot intégré sur vos pages externes dans l'éditeur de formulaire ou avec CSS dans votre feuille de style externe.
Remarque : Il n'est pas possible de définir votre formulaire en tant que HTML brut dans l'éditeur mis à jour. Seuls les formulaires créés à l'aide de l'éditeur hérité peuvent être définis en tant que HTML brut.
Personnaliser votre formulaire
Personnalisez le texte, les champs de saisie, le bouton et l'arrière-plan de votre formulaire et de ses étapes. Les options de style configurées dans l'onglet Style global seront appliquées à toutes les étapes du formulaire. Il n'est pas possible de personnaliser séparément les différentes étapes du formulaire.
- Dans votre compte HubSpot, accédez à Marketing > Formulaires.
- Créez un nouveau formulaire ou passez le curseur de votre souris sur un formulaire existant et cliquez sur Modifier.
- Sur le côté gauche, cliquez sur l'icône Style.
- Lorsque vous personnalisez votre texte, vos champs de saisie ou votre bouton, vous pouvez choisir parmi les styles existants à l'aide de Styles d'entrée rapide de champ. Vous pouvez également personnaliser manuellement le style de chaque composant de votre formulaire :
- 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 les 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.
Ajouter le code intégré du formulaire
Pour accéder au code d’intégration du formulaire :
- Dans votre compte HubSpot, accédez à Marketing > Formulaires.
- Passez le curseur sur un formulaire et cliquez sur Actions > Partager.
- Cliquez sur l’onglet Intégrer le code .
- Dans la boîte de dialogue, si vous souhaitez ajouter des contacts ayant soumis le formulaire à une campagne Salesforce, cliquez sur le menu déroulant Ajouter des contacts à une campagne Salesforce et sélectionnez une campagne. Si vous associez une campagne Salesforce à votre formulaire, le code d’intégration du formulaire sera modifié. Dans ce cas, vous devez ajouter à nouveau le code d’intégration sur votre site externe.
- Cliquez sur Copier.
- Collez le code d'intégration dans le module HTML sur votre page externe. Pour suivre analytics de votre formulaire, votre code de suivi HubSpot doit être installé sur la page externe sur laquelle vous placez un formulaire HubSpot.
Créer une page de formulaire indépendante
Vous pouvez également partager votre formulaire via le lien Partager. Dans un lien de partage, le formulaire s’affichera sur une page autonome à sa propre URL. Ce lien de partage ne peut pas être masqué ou rendu privé. Toute personne disposant du lien de partage pourra accéder au formulaire.
- Dans votre compte HubSpot, accédez à Marketing > Formulaires.
- Passez le curseur sur un formulaire et cliquez sur Actions > Partager.
- Dans la boîte de dialogue, cliquez sur l'onglet Share link .
- Cliquez sur Copier pour copier l'URL de la page de formulaire dans votre presse-papiers.
- Dans votre navigateur, ouvrez une nouvelle fenêtre ou un nouvel onglet et collez l'URL de votre page de formulaire dans la barre d'adresse pour la charger. Vous pouvez également partager l'URL de la page de formulaire directement avec d'autres pour leur donner accès au formulaire.
Personnaliser votre formulaire intégré avec une CSS dans votre feuille de style externe
Si vous disposez d’un abonnement Pro ou Entreprise Marketing Hub ou Content Hub avec votre compte HubSpot, vous pouvez intégrer des formulaires et les styliser en utilisant CSS dans votre feuille de style externe.
Vous pouvez remplacer les styles par défaut et appliquer un style granulaire à des éléments de formulaire spécifiques, ainsi que définir des règles globales pour maintenir un style cohérent dans tous les formulaires intégrés.
Pour accéder au code développeur :
- Dans votre compte HubSpot, accédez à Marketing > Formulaires.
- Passez la souris sur un formulaire et cliquez sur Modifier.
- Dans l’éditeur de formulaires, cliquez sur Vérifier et mettre à jour dans l’angle supérieur gauche.
- Dans la boîte de dialogue, cliquez sur Obtenir le code d’intégration.
- Cliquez sur l’onglet Code développeur (avancé).
- Sélectionnez la case à cocher Je comprends les risques, montrez-moi le code .
- Cliquez sur Copier.
- 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 les styles de niveau supérieur 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.
Découvrez-en davantage sur la définition d’un style personnalisé pour les formulaires intégrés à l’aide de CSS .
