Ignorer et passer au contenu principal
Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
Forms

Configurer et styliser un formulaire HubSpot sur un site externe

Dernière mise à jour: septembre 15, 2022

Disponible avec :

Tous les produits et les abonnements

 Après avoir créé un formulaire dans HubSpot, vous pouvez l'ajouter aux pages HubSpot ou aux pages que vous avez créées en dehors de HubSpot. Les formulaires peuvent être partagés sur votre site externe et non hébergé sur HubSpot :

  • Intégration du code de formulaire sur une page existante
  • Créer une page de formulaire indépendante 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 taper votre formulaire HubSpot intégré sur vos pages externes dans l'éditeur de formulaire ou avec CSS dans votre feuille de style externe.

Si vous utilisez WordPress, découvrez comment insérer un formulaire dans votre article ou page WordPress.

Ajouter le code intégré du formulaire

Pour accéder au code d'intégration du formulaire : 
  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
  • Passez le curseur de la souris sur un formulaire et cliquez sur Actions > Partager
  • Dans la boîte de dialogue, si vous souhaitez ajouter des contacts qui soumettent 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 le code d'intégration à votre site externe.
  • Cliquez sur Copier.
  • Collez le code d'intégration dans le module HTML sur votre page externe. Pour pouvoir effectuer le suivi des 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 Share (Partager). Dans un lien Partager, le formulaire s'affichera sur une page indépendante avec sa propre URL. Ce lien de partage ne peut pas être caché ou rendu privé. Toute personne disposant du lien de partage pourra accéder au formulaire.   

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires
  • Passez le curseur de la souris sur un formulaire et cliquez sur Actions > Partager
  • Dans la boîte de dialogue, cliquez sur l'onglet Partager le lien
  • 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 la page de formulaire 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.

Personnalisez votre formulaire intégré dans l’éditeur de formulaire

Lorsque vous stylisez votre formulaire intégré à l'aide de l'éditeur de formulaire HubSpot, vous pouvez utiliser un thème ou appliquer votre propre style personnalisé. 

Note : les thèmes et les styles définis dans l'éditeur de formulaire s'appliquent uniquement aux formulaires intégrés ou aux pages de formulaire indépendantes. Les formulaires de vos pages HubSpot ne peuvent être stylisés qu'avec les options de style de module de formulaire dans l'éditeur de contenu.

Personnalisez votre formulaire avec un thème

Si vous souhaitez styliser vos formulaires sans rédiger un code personnalisé, vous pouvez appliquer des thèmes prédéfinis à votre formulaire intégré ou à la page de formulaire indépendante. Ces thèmes ajoutent des options de personnalisation à vos formulaires, en plus des paramètres de style de formulaire global.

Pour styliser votre formulaire avec un thème : 

    • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
    • Passez le curseur sur un formulaire et cliquez sur Modifier.
    • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et aperçu.
    • Si vous modifiez un formulaire existant, dans le volet de gauche, décochez la case Conserver l'ancien thème. Cela supprimera l'ancien style par défaut de HubSpot appliqué à ce formulaire. Toute CSS personnalisée ou tout JavaScript que vous avez ajouté au formulaire cessera de fonctionner. Cette case à cocher ne s'applique à aucun nouveau formulaire créé dans votre compte. 
  • Sélectionnez un thème.
  • Dans l'angle supérieur droit, cliquez sur Publier ou Mettre à jour.

 

Utiliser un style personnalisé

Si vous disposez d'un abonnement Marketing Hub Starter, Pro ou Entreprise avec votre compte HubSpot, vous pouvez également styliser les formulaires intégrés à un niveau plus granulaire.

Pour appliquer un style personnalisé : 

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
  • Passez le curseur sur un formulaire et cliquez sur Modifier.
  • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et aperçu.
    • Dans le panneau de gauche, cliquez sur la section Style. Vous pouvez configurer la largeur de champ de formulaire, la famille de polices, les tailles de police, les couleurs de police et le bouton de formulaire. Ces styles sont définis sur une base de formulaire individuelle et supprimeront les paramètres de style du formulaire global.
  • Après avoir personnalisé votre formulaire, dans l'angle supérieur droit, cliquez sur Publier ou Mettre à jour.



Personnalisez votre formulaire intégré avec CSS dans votre feuille de style externe 

Si vous disposez d'un abonnement Marketing Hub ou CMS Hub Pro ou Entreprise avec votre compte HubSpot, vous pouvez intégrer votre formulaire sous forme de formulaire HTML brut, puis styliser ce formulaire intégré avec CSS dans votre feuille de style externe. 

Pour styliser votre formulaire intégré avec CSS : 

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
  • Passez le curseur sur un formulaire et cliquez sur Modifier.
  • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et aperçu.
  • Cliquez pour activer l'option Définir comme formulaire HTML brut. Le formulaire sera affiché sous la forme d'un élément HTML brut sur votre site web, plutôt que dans iFrame, et tout style HubSpot par défaut appliqué au formulaire sera supprimé.
  • Dans l'angle supérieur droit, cliquez sur Publier ou Mettre à jour.
  • Ajoutez le code d'intégration du formulaire à votre page externe. Si vous avez déjà intégré votre formulaire, vous devez remplacer le code d'intégration existant par cette nouvelle version non stylée. Après avoir incorporé votre formulaire ;
    • Vous pourrez modifier le style de votre formulaire dans votre feuille de style externe avec CSS.
    • Vous pouvez également modifier le code d'intégration de formulaire pour personnaliser davantage le formulaire. Comme les formulaires HubSpot sont construits en JavaScript et non en HTML, la personnalisation du code d'intégration de formulaire nécessite l'aide d'un développeur qui sait comment travailler avec JavaScript.

 

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.