Personnalisez votre formulaire intégré sur une page externe

Vous pouvez styliser votre formulaire HubSpot intégré sur vos pages externes de deux façons :

1. Personnalisez votre formulaire intégré dans l’éditeur de formulaire
2. Personnalisez votre formulaire intégré avec CSS dans votre feuille de style externe

Personnalisez votre formulaire intégré 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.

• Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > 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.

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

Style (Marketing Hub Starter, Basic, Pro, et Entreprise uniquement)

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

• Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > 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.

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.

Stylisez votre formulaire intégré avec CSS dans votre feuille de style externe (Marketing Hub Basic, Pro, et Entreprise uniquement)

• Depuis votre compte HubSpot, accédez à Marketing > Capture de leads > Formulaires.
• Cliquez sur le nom du formulaire.
• Dans l’éditeur de formulaire, cliquez sur l’onglet Options.
• Cliquez sur le bouton pour activer l’option Formulaire non personnalisé. 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 le coin 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. Pour en savoir plus sur la personnalisation des formulaires HubSpot avec des sélecteurs d’attributs standard, consultez la documentation des concepteurs HubSpot.
• 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.