### [Comment centrer un formulaire](https://wpforms.com/developers/how-to-center-a-form/)
**Publié le :** 6 novembre 2020
**Auteur :** Umair Majeed
**Extrait :** Ce tutoriel vous montrera comment utiliser CSS pour centrer un formulaire avec WPForms.
**Contenu :**
Voulez-vous centrer vos formulaires sur vos pages WordPress ? Bien que les formulaires WPForms aient par défaut une largeur de 100 % de leur conteneur, vous pouvez facilement les centrer à l'aide de CSS personnalisé.
Ce guide vous montrera comment centrer parfaitement vos formulaires et leurs éléments.
## Configuration du formulaire
Tout d'abord, vous devrez créer votre formulaire. Si vous avez besoin d'aide pour cela, vous pouvez toujours [consulter cette documentation pour obtenir de l'aide](https://wpforms.com/docs/creating-first-form/ "Créer votre premier formulaire").
Une fois que vous avez créé votre formulaire et ajouté vos champs, vous devrez définir la taille de chaque **Taille de champ** sur **Grande**.
Pour ce faire, cliquez sur l'onglet **Avancé** et sélectionnez **Grande** dans le menu déroulant **Taille de champ**.
### Ajout de la classe CSS
Après avoir défini la taille du champ sur Grande, vous devrez ensuite ajouter une classe CSS spéciale. Pour ce faire, ouvrez le constructeur de formulaire et accédez à **Paramètres » Général**. Faites ensuite défiler jusqu'à la section **Avancé** et localisez le champ **Classe CSS du formulaire**. Entrez `wpf-center` dans ce champ.
**Remarque :** L'étape de la classe CSS est cruciale – sans elle, le CSS de centrage ne fonctionnera pas. Assurez-vous d'entrer le nom de la classe exactement comme indiqué.
## Ajout du code CSS
Voici le code CSS de base pour centrer votre formulaire :
Remarque : Pour obtenir de l'aide sur l'ajout de CSS à votre site, [veuillez consulter ce tutoriel.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Comment ajouter des styles CSS personnalisés pour WPForms")
Ce code :
- Centre le formulaire en utilisant `margin: 0 auto`
- Définit une largeur maximale de 500 pixels. Vous pouvez jouer avec ce montant jusqu'à ce que vous trouviez celui qui répond à vos besoins
- Assure la réactivité mobile en ajustant la largeur sur les petits écrans
## Centrage de tous les éléments du formulaire
Si vous souhaitez tout centrer à l'intérieur du formulaire (libellés, descriptions, boutons), utilisez cette version étendue :
## Personnalisation de la largeur
Pour ajuster la largeur du formulaire, modifiez ces deux lignes dans le CSS :
```
max-width: 500px !important;
width: 500px !important;
```
Remplacez `500px` par la largeur souhaitée. Par exemple, pour un formulaire plus large :
```
max-width: 800px !important;
width: 800px !important;
```
## Foire aux questions
#### Q : Pourquoi le CSS ne fonctionne-t-il pas pour moi ?
**R :** Tout d'abord, vérifiez que vous avez ajouté le nom de classe `wpf-center` dans la page **Paramètres » Général** de votre formulaire. C'est la raison la plus courante pour laquelle le CSS ne fonctionne pas. Si cela ne fonctionne toujours pas, videz le cache de votre navigateur et actualisez la page.
#### Q : Comment centrer uniquement le bouton d'envoi ?
**R :** Utilisez ce CSS simplifié et ajoutez la classe `wpf-center-button` (au lieu de `wpf-center`) au champ Classe CSS de votre formulaire :
Ensuite, ajoutez ce CSS à votre site.
```
.wpforms-container.wpf-center-button .wpforms-submit-container {
text-align: center;
}
```
Et c'est tout ce dont vous avez besoin pour centrer votre formulaire. Ensuite, souhaitez-vous pouvoir changer la couleur du bouton d'envoi sur vos formulaires ? Consultez notre article sur [la modification de la couleur du bouton d'envoi](https://wpforms.com/developers/how-to-change-the-submit-button-color/).
**Catégories :** Style
**Tags :** CSS
---