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: octobre 19, 2020

Disponible avec :

Tous les produits et les abonnements

Les formulaires peuvent être partagés de deux façons sur votre site externe et non hébergé sur HubSpot.

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.

Découvrez comment ajouter des formulaires HubSpot aux pages ou aux posts WordPress.

Ajouter le code intégré du formulaire

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

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
  • Créez un formulaire ou passez le curseur de votre souris sur un formulaire existant, cliquez sur le menu déroulant Actions  et sélectionnez Modifier le formulaire. 
  • Cliquez sur l'onglet Options pour personnaliser ce qui se produit après la soumission du formulaire par un visiteur. Vous pouvez choisir de rediriger les visiteurs vers une page de remerciement ou d'afficher un message de remerciement en ligne lorsqu'un visiteur soumet un formulaire.
  • Dans l'angle supérieur droit de l'éditeur de formulaire, cliquez sur 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.
  • Cliquez sur Copier.
    forms-editor-share-form-copy-form-embed
  • Dans l'angle supérieur droit, cliquez sur Publier
  • 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. HubSpot collecte les soumissions de formulaires sans code de suivi HubSpot. Cependant, aucune analyse ne sera enregistrée. 

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

Créer une page de formulaire indépendante 

Au lieu de travailler avec JavaScript, il est possible de partager le formulaire via une page de formulaire, qui existera de façon indépendante avec sa propre URL.  

  • Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires
  • Créez un formulaire ou passez le curseur de votre souris sur un formulaire existant, cliquez sur le menu déroulant Actions  et sélectionnez Modifier le formulaire. 
  • Dans l'angle supérieur droit, cliquez sur 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.

share-form-own-page

  • Dans l'angle supérieur droit, cliquez sur Publier.
  • 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.
Si vous intégrez un formulaire sur votre site WordPress, il peut être nécessaire d'appliquer des déclarations CSS supplémentaires dans votre feuille de style externe afin de rendre le formulaire ou le formulaire réactif. 

Si vous remarquez que le formulaire ne fonctionne pas dans WordPress ou que le code intégré est en cours de modification lorsque vous accédez à la page en direct, il peut être nécessaire d'insérer le formulaire en utilisant un plug-in pour vous assurer que le code d'intégration reste intact. Si vous utilisez la dernière version de Gutenberg, qui élimine le code JavaScript en ligne, utilisez le bloc de code JS en ligne pour le plug-in Gutenberg afin d'intégrer des formulaires et des CTA sur votre page.

Personnalisez votre formulaire intégré sur une page externe

Stylisez votre formulaire HubSpot intégré sur des pages externes dans l'éditeur de formulaire ou avec CSS dans votre feuille de style externe.

Dans l'éditeur de formulaire

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. Les thèmes ajoutent des options de personnalisation à vos formulaires, en plus des paramètres de style de formulaire global.

  • Dans votre compte HubSpot, accédez à Marketing > Capture de lead > Formulaires.
  • Cliquez sur le nom d'un formulaire.
  • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et aperçu.
  • Dans le volet de gauche, section Thème, décochez la case Conserver l'ancien thème.

Remarque : Décocher la case Conserver l'ancien thème 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 est uniquement disponible pour les formulaires hérités et ne sera disponible dans aucun nouveau formulaire créé dans votre compte. 

  • Sélectionnez l'un des quatre thèmes.

 

Style (Hub Marketing Starter, Pro, Entreprise ou anciens comptes Hub Marketing Basique uniquement)

Outre les thèmes, vous pouvez styliser des formulaires intégrés à un niveau plus précis.

  • Dans votre compte HubSpot, accédez à Marketing > Capture de lead > Formulaires.
  • Cliquez sur le nom d'un formulaire.
  • Dans l'éditeur de formulaire, cliquez sur l'onglet Style et aperçu.
  • Dans le volet de gauche, cliquez sur la section > Style pour l'agrandir. Vous pouvez également styliser 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 une base de formulaire individuelle et supprimeront les paramètres de style du formulaire global.

Remarque : 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 CSS dans votre feuille de style externe (Hub Marketing Pro, Entreprise, ou anciens comptes Hub Marketing Basique uniquement)

  • Dans votre compte HubSpot, accédez à Marketing > Capture de lead > Formulaires.
  • Cliquez sur le nom du formulaire.
  • 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é.

options-unstyled-form

  • Dans l'angle supérieur droit, cliquez sur Partager.
  • Dans la boîte de dialogue, cliquez sur Copier pour copier le code d'intégration du formulaire.
  • 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 intégré votre formulaire, vous pouvez le modifier 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.