Configurer et styliser un formulaire HubSpot sur un site externe

 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 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.

Si vous travaillez avec WordPress, apprenez comment insérer un formulaire dans votre article ou page WordPress.

Veuillez noter : à partir du 16 mai 2024, lorsque vous ajoutez le code d'intégration de votre formulaire sur une page externe, le domaine de la page doit être ajouté en tant que domaine de site pour être traité comme un domaine de confiance. Si ce n'est pas le cas, les soumissions au formulaire seront également filtrées vers votre spam submissions.

Ajouter le code intégré du formulaire

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Passez 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 un lien Partager. Dans un lien Partager, le formulaire s'affichera sur une page autonome à sa propre URL. Ce lien de partage ne peut pas être masqué ou défini comme privé. Toute personne disposant du lien de partage pourra accéder au formulaire. 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires. 
• Passez la souris sur un formulaire et cliquez sur Actions > Partager.
• Dans la boîte de dialogue, cliquez sur l'onglet Share link . 
• Cliquez sur Copy pour copier l'URL de la page du 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 du formulaire directement avec d'autres personnes pour leur donner accès au formulaire.
  
  

Personnaliser votre formulaire intégré dans l'éditeur de formulaires

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

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

Styliser votre formulaire avec un thème

Si vous souhaitez styliser vos formulaires sans écrire de code personnalisé, vous pouvez appliquer des thèmes prédéfinis à votre formulaire intégré  ou à votre page de formulaire autonome . Ces thèmes ajoutent des options de personnalisation à vos formulaires, en plus des paramètres globaux de style de formulaire de .

Pour donner un style à votre formulaire avec un thème : 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Passez votre curseur sur un formulaire et cliquez sur Modifier.
• Dans l'éditeur de formulaire, cliquez sur l'onglet Style & Preview .
• Si vous modifiez un ancien formulaire, dans le volet 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 pas aux nouveaux formulaires créés dans votre compte. 
• Sélectionnez un thème.
• En haut à droite, cliquez sur Publish ou Update.

Utiliser un style personnalisé

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

Pour appliquer un style personnalisé : 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Passez votre curseur sur un formulaire et cliquez sur Modifier.
• Dans l'éditeur de formulaire, cliquez sur l'onglet Style & Preview .
• Dans le volet gauche, cliquez sur la section Style. Vous pouvez également configurer la largeur du 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 la base d'un formulaire individuel et remplacent les paramètres globaux de style de formulaire de .
• Après avoir personnalisé votre formulaire, cliquez en haut à droite sur Publish ou Update.
  
  

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

Si vous avez un abonnement Marketing Hub ou CMS Hub Professional ou Entreprise avec votre compte HubSpot, vous pouvez intégrer votre formulaire en tant que formulaire HTML brut, puis styliser ce formulaire intégré avec CSS dans votre feuille de style externe. 

Pour styliser votre formulaire intégré à l'aide de CSS : 

• Dans votre compte HubSpot, accédez à Marketing > Formulaires.
• Passez votre curseur sur un formulaire et cliquez sur Modifier.
• Dans l'éditeur de formulaire, cliquez sur l'onglet Style & preview .
• Cliquez sur ce bouton pour activer l'option Set as raw HTML form . 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é.
• En haut à droite, cliquez sur Publish ou Update.
• 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 stylisée. Après avoir intégré votre formulaire :
  
  • Vous pourrez styliser le formulaire dans votre feuille de style externe à l'aide d'une CSS.
  • Vous pouvez également modifier le code d'intégration du formulaire pour personnaliser davantage le formulaire. Les formulaires HubSpot étant construits en JavaScript et non en HTML, la personnalisation du code d'intégration du formulaire nécessite l'aide d'un développeur qui sait comment travailler avec JavaScript