Dernière mise à jour: avril 21, 2023
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 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 l'ajout de votre formulaire, vous pouvez styliser votre formulaire HubSpot intégré sur des pages externes dans l'éditeur de formulaire ou avec une 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 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.
- Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
- Passez 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.
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 utiliser un thème ou appliquer votre propre style personnalisé.
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.
Styliser 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 votre 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 ancien formulaire, dans le volet gauche, décochez la case Garder 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.
- Dans l'angle supérieur droit, cliquez sur Publier ou Mettre à jour.
Utiliser un style personnalisé
Si vous avez 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 votre 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 é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 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.
Personnaliser votre formulaire intégré avec une CSS dans votre feuille de style externe
Si vous avez un abonnement Marketing Hub ou CMS Hub Pro 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 une CSS dans votre feuille de style externe.
Pour styliser votre formulaire intégré avec une CSS :
- Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
- Passez votre 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 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 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.
