---
title: Centrer un formulaire sur un modèle HubSpot
description: Découvrez comment centrer votre formulaire à l'aide de modules d'espacement horizontal ou CSS.
---

<https://knowledgeqa.hs-sites.com/fr>

# [Centrer un formulaire sur un modèle HubSpot](https://knowledgeqa.hs-sites.com/fr/cos-general/how-to-center-a-form-on-a-hubspot-template)

 Rédigé par [HubSpot Support](https://knowledgeqa.hs-sites.com/fr/author/hubspot-support) | 8 Jul 2019 à 12:44:14

Vous pouvez centrer un formulaire sur un modèle HubSpot à l'aide de modules d'espacement horizontal ou d'un CSS personnalisé.

### Utilisation de modules d'espacement horizontal

- Depuis votre compte HubSpot, accédez à **Marketing** > **Fichiers et modèles** > **Outils de conception**.
- Cliquez sur le **nom du modèle** dans le localisateur pour le modifier.
- Dans l’inspecteur à droite, cliquez sur **+ ****Ajouter** pour insérer deux nouveaux modules d'espacement horizontal : un à gauche et un à droite de votre module de formulaire.

 

### Utiliser les CSS personnalisés

- Depuis votre compte HubSpot, accédez à **Marketing** > **Fichiers et modèles** > **Outils de conception**.
- Dans le localisateur, recherchez votre **[fichier CSS](https://knowledge.hubspot.com/fr/design-manager-user-guide-v2/how-to-create-edit-and-attach-css-files-to-style-your-site)** dans les dossiers, puis cliquez sur ce fichier pour le sélectionner dans l'éditeur.
- Ajoutez le code suivant pour centrer *tous* vos formulaires sur votre site web :

```
/* Pour centrer le formulaire dans son module et appliquer une largeur maximale */
form.hs-form, .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Pour centrer le titre du formulaire dans un module de formulaire */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Pour centrer le bouton Soumettre d’un formulaire */
.hs_submit {
    text-align: center;
}
```

- Si vous souhaitez centrer uniquement des formulaires [spécifiques, vous pouvez ajouter](https://knowledge.hubspot.com/fr/articles/kcs_article/cos-general/can-i-add-css-ids-to-specific-elements-or-modules-on-my-pages) une classe personnalisée au module de votre formulaire sur votre modèle, puis ajuster votre CSS pour qu'il s'applique uniquement aux modules ayant cette classe. Par exemple, si vous ajoutez la classe personnalisée **centrer un formulaire** à votre module de formulaire sur votre modèle, votre CSS ressemblera à ceci :

```
/* Pour centrer le formulaire dans son module et appliquer une largeur maximale */
form.hs-form, .center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Pour centrer le titre du formulaire dans un module de formulaire */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* Pour centrer le bouton Soumettre d’un formulaire */
.center-form .hs_submit {
    text-align: center;
}
```

- Dans l’angle supérieur droit, cliquez sur **Publier les modifications**.

[Voir l'article complet](https://knowledgeqa.hs-sites.com/fr/cos-general/how-to-center-a-form-on-a-hubspot-template)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "HubSpot Support"
  },
  "dateModified" : "2020-07-08T15:13:02.002Z",
  "datePublished" : "2019-07-08T12:44:14Z",
  "headline" : "Centrer un formulaire sur un modèle HubSpot",
  "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/cos-general/how-to-center-a-form-on-a-hubspot-template",
  "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"
  }
}
```