Configurer et styliser un formulaire HubSpot sur un site externe

Après avoir créé un formulaire dans HubSpot, vous pouvez l’ajouter à des pages HubSpot ou à des pages que vous avez créées en dehors de HubSpot. Si votre contenu est hébergé en dehors de HubSpot, vous pouvez ajouter des formulaires avec les méthodes suivantes :

• Intégrez le formulaire en copiant le code intégré et en l’ajoutant sur votre page externe.
• Utilisez le lien de partage de formulaire, qui comporte une page web autonome pour votre formulaire vers laquelle vous pouvez accéder.

Quelle que soit la méthode, les modifications apportées au formulaire seront automatiquement mises à jour sur le formulaire publié sur votre site externe. Vous pouvez styliser votre formulaire HubSpot intégré dans l’éditeur de formulaire ou avec CSS dans votre feuille de style externe.

Avant de commencer

• Si vous souhaitez définir votre formulaire comme un formulaire HTML brut, cette option n’est pas disponible dans le nouvel éditeur de formulaire. Seuls les formulaires créés à l’aide de l’éditeur de formulaires hérité peuvent être définis en tant que HTML brut.
• Sivous intégrez votre formulaire HubSpot sur une page externe, vous devez installer le code de suivi HubSpot pour suivre les analytics. Découvrez comment installer le code de suivi HubSpot.

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. 

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. Vous pouvez personnaliser le style des composants de formulaire 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. 

Copier le code d’intégration du formulaire

Vous pouvez intégrer votre formulaire HubSpot 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 accéder au 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.

Utilisez le lien de partage pour partager une page de formulaire autonome 

Vous pouvez partager votre formulaire avec le lien de partage, qui affichera le formulaire sur une page web autonome. Ce lien de partage ne peut pas être masqué ou rendu privé. Toute personne disposant du lien de partage pourra accéder au formulaire. 

Pour accéder au 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. Cela copiera l’adresse web de la page du formulaire dans votre presse-papiers.
7. 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 

Les utilisateurs d’un compte Marketing Hub ou Content Hub Pro ou Entreprise  peuvent intégrer des formulaires et les styliser à l’aide de CSS dans la feuille de style 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.