### [Styliser les étiquettes du formulaire pour qu'elles apparaissent à côté des champs](https://wpforms.com/developers/how-to-style-the-form-labels-beside-the-fields/)
**Publié le :** 8 décembre 2021
**Auteur :** Umair Majeed
**Extrait :** Ce tutoriel vous guidera dans la configuration et la stylisation de vos étiquettes de formulaire afin qu'elles flottent à côté de vos champs de formulaire.
**Contenu :**
Souhaitez-vous créer une mise en page de formulaire plus compacte en affichant les étiquettes à côté de leurs champs au lieu de dessus ? Bien que WPForms affiche les étiquettes au-dessus des champs par défaut, vous pouvez facilement modifier cette mise en page à l'aide de CSS pour afficher les étiquettes et les champs côte à côte.
Ce tutoriel vous montrera comment obtenir cette mise en page horizontale professionnelle.
En raison du balisage HTML de certains champs, cette stylisation peut ne pas fonctionner parfaitement avec tous les types de champs. Nous vous recommandons de tester l'apparence de votre formulaire après avoir implémenté ces modifications.
## Configuration de votre formulaire
Tout d'abord, vous devrez créer votre formulaire et ajouter les champs souhaités. Si vous avez besoin d'aide, veuillez consulter ce guide sur la [création de votre premier formulaire](https://wpforms.com/docs/creating-first-form/).
Une fois votre formulaire créé, cliquez sur **Paramètres » Général**, puis cliquez sur la flèche **Avancé** pour ouvrir ces options. Une fois sur place, dans la section **Classe CSS du formulaire**, ajoutez la classe `wpforms-inline-labels`.
Cette classe CSS nous permet de cibler des formulaires spécifiques sans affecter tous les formulaires de votre site.
## Ajout de la stylisation des étiquettes
Il est maintenant temps d'ajouter le code CSS à votre site. Si vous ne savez pas comment ajouter du CSS à votre site, consultez ce guide sur [l'ajout de styles CSS personnalisés](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
```
.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
Après avoir ajouté ce CSS, vous verrez que les étiquettes de votre formulaire apparaissent maintenant sur la même ligne que vos champs de formulaire.
Et voilà ! Souhaitez-vous styliser les étiquettes du formulaire pour qu'elles apparaissent à l'intérieur du champ du formulaire ? Consultez notre tutoriel sur [Comment créer un formulaire avec des étiquettes flottantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Comment créer un formulaire avec des étiquettes flottantes").
## Foire aux questions
#### Q : Que faire si je voulais appliquer cela à tous mes formulaires ?
**R :** Si vous souhaitez cela pour tous vos formulaires, utilisez ce CSS à la place et sautez l'étape ci-dessus lors de l'ajout de la **Classe CSS du formulaire**. Ce ne serait pas nécessaire si vous vouliez appliquer cela à tous les formulaires.
```
.wpforms-container .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
C'est tout ! Ensuite, souhaitez-vous explorer d'autres options de stylisation de formulaire ? Consultez notre guide sur [la stylisation du bouton de soumission avec CSS](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/).
**Catégories :** Stylisation
**Tags :** CSS
---