Résumé IA
Souhaitez-vous ajouter Material Design à vos champs 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 de code PHP ainsi que du CSS, vous pouvez facilement appliquer cet aspect à vos WPForms.
Dans ce tutoriel, nous vous guiderons à travers chaque étape pour y parvenir.
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.
Pour les besoins de ce tutoriel, nous allons simplement créer un formulaire de commentaires simple. Notre exemple inclura les champs de formulaire Nom, E-mail, Objet et Texte.
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 du formulaire peut ne pas avoir l'effet désiré que vous espérez, alors n'oubliez pas de tester votre formulaire d'abord pour vous assurer que l'aspect est exactement celui que vous recherchez.
Material Design – Extrait PHP
Ensuite, nous allons ajouter un petit extrait de code PHP. Nous devons le faire afin de déplacer l'étiquette 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.
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 l'étiquette du champ pour qu'elle s'affiche avant le champ du formulaire. La fonction suivante forcera ensuite l'étiquette à 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.
Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.
Et voilà ! Vous avez maintenant ajouté l'aspect Material Design à vos champs de formulaire ! Si vous souhaitez essayer d'autres solutions CSS, consultez notre documentation sur le style.