Comment utiliser : Personnaliseur de formulaire HubSpot
- Choisissez un préréglage, puis ajustez les polices, les couleurs, les bordures des champs, l’espacement et le bouton. L’aperçu utilise le même balisage que celui généré par HubSpot pour les formulaires intégrés.
- Saisissez votre Portal ID, votre Form ID et votre région (tous les trois se trouvent dans le code d’intégration du formulaire dans HubSpot).
- Cliquez sur Copier pour Webflow (Code Embed), sélectionnez l’emplacement du formulaire dans le Designer, puis appuyez sur Ctrl/⌘+V.
- Vous préférez des pages épurées ? Utilisez « styles + conteneur uniquement » pour la page, puis placez le script dans Paramètres de page → Avant </body> ou dans Paramètres du site → Code personnalisé → Pied de page. Publiez et testez le formulaire sur le domaine en ligne.
Pourquoi les formulaires HubSpot ne ressemblent pas au reste de votre site
Un formulaire HubSpot intégré apporte son propre balisage — .hs-form, .hs-form-field, .hs-input, .hs-button — et, sauf si vous le désactivez, la feuille de style par défaut de HubSpot. Le résultat correspond rarement à un site Webflow soigneusement conçu : polices différentes, champs étroits, colonnes flottantes de demi-largeur et bouton orange générique. Pour styliser le formulaire, il faut remplacer ces classes par un CSS suffisamment spécifique pour l’emporter.
Ce que couvre ce personnaliseur
- Mise en page — champs pleine largeur, espacements cohérents et groupes de deux ou trois colonnes reconstruits avec flexbox (empilés sur mobile).
- Champs — texte, e-mail, liste déroulante (avec une flèche personnalisée), zone de texte, cases à cocher et boutons radio aux couleurs de votre marque.
- États — anneau de focus, champs invalides et messages d’erreur de HubSpot, avec le message récapitulatif « veuillez compléter tous les champs obligatoires » masqué.
- Texte de consentement et liens — mentions RGPD et juridiques dans un style plus petit et lisible.
- Bouton — couleurs, survol, arrondi, marges intérieures et option pleine largeur.
- Message de remerciement — le
.submitted-messageaffiché en ligne après l’envoi.
Toutes les règles sont limitées à la classe de conteneur .hubspot-form, elles ne peuvent donc pas affecter le reste de la page.
Important : formulaires HTML natifs ou formulaires en iframe
Le CSS de votre page ne peut styliser qu’un formulaire affiché dans la page. Les formulaires HubSpot intégrés avec le script classique hbspt.forms.create (v2) s’affichent en HTML lorsque le formulaire est défini comme formulaire HTML brut (options du formulaire dans HubSpot ; disponibilité selon votre offre HubSpot). Les formulaires affichés dans une iframe — y compris ceux créés avec le nouvel éditeur de formulaires de HubSpot — ne peuvent pas être stylisés depuis l’extérieur ; utilisez plutôt les réglages de style de HubSpot. Test rapide : faites un clic droit sur un champ de votre page en ligne et choisissez Inspecter. Si vous voyez class="hs-input" directement dans la page, ce CSS fonctionnera.
L’option css: "" dans le code d’intégration indique à HubSpot de ne pas charger sa feuille de style par défaut, afin que vos styles s’appliquent proprement. Décochez-la si vous préférez ne modifier que quelques détails.
Ajouter un formulaire HubSpot dans Webflow
- Collez le Code Embed généré par cet outil (ou ajoutez un Code Embed et collez le code d’intégration complet).
- Le formulaire n’apparaît que sur le site publié : le Designer affiche un bloc d’intégration vide.
- Si plusieurs formulaires figurent sur une même page, attribuez à chacun un ID de conteneur différent.
- Suivez vos conversions avec des champs masqués et des paramètres UTM, ou écoutez le callback
onFormSubmittedde HubSpot dans votre script de pied de page.
Vous voulez reprendre les couleurs de votre charte graphique ? Convertissez-les avec le convertisseur de couleurs et vérifiez le contraste du texte avec le vérificateur de contraste. Pour les sections natives de Webflow, consultez HTML & CSS vers Webflow.
Aussi recherché comme : css formulaire hubspot, styliser formulaire hubspot, personnaliser formulaire hubspot, formulaire hubspot webflow, code d’intégration hubspot, design formulaire hubspot, hs-form css, hbspt.forms.create.
Outils complémentaires : Personnaliseur de formulaire HubSpot
- Convertisseur de format de date — Saisissez un format de date comme DD.MM.YYYY HH:mm et obtenez son équivalent pour Make, Zapier, n8n, date-fns, Python et PHP, avec un aperçu en direct et des expressions prêtes à coller.
- Trouveur de chemin JSON — Collez un payload de webhook ou une réponse d’API, cliquez sur n’importe quelle valeur et copiez son chemin exact — pour JavaScript, JSONPath, jq, Python, PHP, n8n et Make.
- HTML et CSS vers Webflow — Collez le HTML et son CSS, cliquez sur Copier vers Webflow puis collez dans le Designer.
- Générateur UTM — Ajoutez utm_source, utm_medium, utm_campaign et leurs compagnons à n'importe quel lien, visualisez le canal GA4 dans lequel la visite sera classée et taguez une liste complète d'URL d'un coup.
Questions fréquentes
Pourquoi mon CSS ne modifie-t-il pas le formulaire HubSpot ?
<iframe>, passez le formulaire en formulaire HTML brut dans HubSpot (si votre offre le permet) ou stylisez-le dans les réglages de style des formulaires de HubSpot.Où trouver le Portal ID et le Form ID ?
portalId et formId figurent dans cet extrait, ainsi que la région (par exemple eu1 ou na1).Pourquoi le formulaire est-il vide dans le Designer de Webflow ?
Puis-je styliser les champs en deux colonnes ?
fieldset.form-columns-2 ; le CSS généré transforme ces groupes en ligne flexible qui s’empile sur les écrans de moins de 768 px.