### [Comment ajouter le Material Design aux champs de votre formulaire à l'aide de CSS](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/) **Publié le :** 26 août 2020 **Auteur :** Umair Majeed **Extrait :** Ce tutoriel vous montrera comment utiliser PHP et CSS pour ajouter le Material Design à vos champs de formulaire. **Contenu :** Souhaitez-vous ajouter le Material Design aux champs de votre WPForms ? Ce type de design est une façon très populaire d'ajouter un aspect moderne et épuré à vos champs de formulaire. En utilisant un petit extrait PHP ainsi que du CSS, vous pouvez facilement appliquer ce look à vos WPForms. Dans ce tutoriel, nous vous guiderons à travers chaque étape pour y parvenir. Pour plus d'informations sur les principes du Material Design, vous pouvez consulter la [documentation Material Design de Google](https://m3.material.io/). ## Création de votre formulaire Tout d'abord, vous devrez créer votre formulaire et ajouter les champs que vous souhaitez. Si vous avez besoin d'aide pour créer votre formulaire, [veuillez consulter ce tutoriel](https://wpforms.com/docs/creating-first-form/ "Comment créer votre premier formulaire"). Pour les besoins de ce tutoriel, nous allons simplement créer un formulaire de commentaires simple. Notre exemple comprendra les champs de formulaire **Nom**, **E-mail**, **Objet** et **Texte de paragraphe**. Il est important de se rappeler que notre tutoriel se concentre sur l'ajout de ce type de design **uniquement** aux champs qui acceptent une saisie de texte directe. L'ajout de ce type de design à tous les champs de formulaire peut ne pas avoir l'effet désiré, alors n'oubliez pas de tester votre formulaire d'abord pour vous assurer que le look est exactement celui que vous recherchez. ## Material Design – Extrait PHP Ensuite, nous allons ajouter un petit extrait PHP. Nous devons le faire afin de déplacer le libellé du champ de formulaire de avant à après le champ. Pour obtenir de l'aide sur la façon d'ajouter un extrait de code à votre site, [veuillez consulter ce tutoriel](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Comment ajouter du PHP ou du JavaScript personnalisé pour WPForms"). Cet extrait ne s'exécutera que sur l'ID de formulaire **697**. Si l'ID du formulaire correspond, notre première fonction **wpf\_dev\_display\_field\_before** supprimera l'action PHP qui définit le libellé du champ pour qu'il s'affiche **avant** le champ du formulaire. La fonction suivante forcera ensuite le libellé à apparaître **après** le champ du formulaire. ## Material Design – Extrait CSS Votre dernière étape consiste à ajouter ce CSS à votre site, ce qui ajoutera l'aspect Material Design à tous nos champs de formulaire. Remplacez **697** dans tous les sélecteurs par l'ID de votre formulaire. Si vous avez besoin d'aide pour ajouter du 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") Et voilà ! Vous avez maintenant ajouté le look Material Design à vos champs de formulaire ! Si vous souhaitez essayer d'autres solutions CSS, consultez notre [Documentation de style](https://wpforms.com/categories/docs/styling/ "Documentation de style WPForms"). ## Actions de référence - [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "Utilisation de l'action wpforms_display_field_after") - [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "Utilisation de l'action wpforms_display_field_before") **Catégories :** Tutoriels **Tags :** CSS, PHP ---