--- title: Personnalisez votre formulaire intégré sur une page externe description: Découvrez comment styliser votre formulaire HubSpot intégré sur des pages externes dans l’éditeur de formulaire ou avec CSS dans votre feuille de style externe. --- # [Personnalisez votre formulaire intégré sur une page externe](https://knowledgeqa.hs-sites.com/fr/forms/how-do-i-style-my-embedded-formkbopentab) Rédigé par [HubSpot Support](https://knowledgeqa.hs-sites.com/fr/author/hubspot-support) | 7 Jul 2020 à 4:00:00 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](https://knowledgeqa.hs-sites.com/fr/forms/how-do-i-style-my-embedded-formkbopentab?hs_amp=true#style-your-embedded-form-in-the-form-editor) 2. [Personnalisez votre formulaire intégré avec CSS dans votre feuille de style externe](https://knowledgeqa.hs-sites.com/fr/forms/how-do-i-style-my-embedded-formkbopentab?hs_amp=true#style-your-embedded-form-with-css)   ### 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](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) à la page [de formulaire indépendante](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#create-a-standalone-form-page). Les thèmes ajoutent des options de personnalisation à vos formulaires, en plus des paramètres [de style de formulaire global](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/set-global-form-colors-and-fonts). - 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](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/set-global-form-colors-and-fonts). **Note :**les thèmes et les styles définis dans l’éditeur de formulaire s’appliquent uniquement aux [formulaires intégrés](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) ou [aux pages de formulaire indépendantes](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#create-a-standalone-form-page). Les formulaires de vos pages [HubSpot ne peuvent être stylisés ](https://knowledge.hubspot.com/fr/articles/kcs_article/forms/style-forms-on-your-hubspot-pages)[qu’avec les options de style de module](https://knowledge.hubspot.com/fr/articles/kcs_article/forms/style-forms-on-your-hubspot-pages) 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](https://knowledgeqa.hs-sites.com/fr/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code) 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](https://designers.hubspot.com/docs/cos/hubspot-form-markup#styling-forms) la documentation des concepteurs HubSpot. - Vous pouvez également modifier [le code d’intégration](https://developers.hubspot.com/docs/methods/forms/advanced_form_options) 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. [Voir l'article complet](https://knowledgeqa.hs-sites.com/fr/forms/how-do-i-style-my-embedded-formkbopentab) ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "HubSpot Support" }, "dateModified" : "2020-07-08T13:58:53.043Z", "datePublished" : "2020-07-07T04:00:00Z", "headline" : "Personnalisez votre formulaire intégré sur une page externe", "image" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "mainEntityOfPage" : "https://knowledgeqa.hs-sites.com/fr/forms/how-do-i-style-my-embedded-formkbopentab", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : 60, "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png", "width" : 60 }, "name" : "FR | Knowledge Quick Answers" } } ```