### [Créer un formulaire avec des étiquettes flottantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/) **Publié le :** 31 août 2020 **Auteur :** Umair Majeed **Extrait :** Ce tutoriel vous guidera à travers les étapes d'utilisation de PHP et CSS pour personnaliser votre formulaire afin d'utiliser des étiquettes flottantes pour vos champs de formulaire. **Contenu :** Voulez-vous donner à vos formulaires un aspect moderne et interactif avec des étiquettes flottantes ? Les étiquettes flottantes offrent un moyen élégant d'afficher des étiquettes de champ qui s'animent lorsque les utilisateurs interagissent avec vos champs de formulaire. Ce guide vous montrera comment implémenter cette fonctionnalité à l'aide de WPForms. Pour vous inspirer des conceptions d'étiquettes flottantes, vous pouvez consulter la [documentation de Material Design](https://material.io/develop/web/supporting/floating-label) sur les champs de texte. ## Créer votre formulaire Nous commencerons par créer un simple formulaire de contact. Si vous avez besoin d'aide pour créer un formulaire, [veuillez consulter cette documentation](https://wpforms.com/docs/creating-first-form/ "Créer votre premier formulaire"). S'il y a un champ **Téléphone** dans le formulaire, vous devrez définir le format sur **US** ou **International**. Ce extrait ne fonctionnera pas avec le format **Smart**. Vous devrez également ajouter du texte **Placeholder** à chaque champ. Ce texte peut être ajouté en sélectionnant le champ et en cliquant sur l'onglet **Avancé** pour ajouter le texte. Si vous avez besoin d'aide pour savoir comment faire cela, consultez notre guide sur [l'ajout de texte placeholder à un champ](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/). ## Ajouter des classes CSS Ensuite, nous allons ajouter une classe CSS de `floating` aux champs pour lesquels nous souhaitons des étiquettes flottantes. Sélectionnez chaque champ un par un et cliquez sur l'onglet **Avancé** et ajoutez `floating` dans le champ **CSS Classes**. Si vous utilisez plus d'une classe CSS pour un champ, assurez-vous simplement de mettre un espace entre chaque nom de classe. ## Étiquettes flottantes – Extrait PHP Nous allons ajouter quelques petits extraits PHP qui supprimeront l'étiquette du dessus des champs du formulaire pour la placer juste en dessous des champs du formulaire. Remplacez **1289** sur la **ligne 10** et la **ligne 28** par l'ID de votre formulaire. Si vous avez besoin d'aide sur comment et où ajouter des extraits à 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"). Ce que fait cet extrait, c'est de supprimer la position de l'étiquette du champ pour qu'elle s'affiche **avant** le champ et de la placer **après** le champ. ## Extrait CSS pour les étiquettes flottantes Maintenant que notre formulaire est créé et que nos extraits sont en place, nous devons ajouter le CSS personnalisé à notre site pour tout assembler. Pour obtenir de l'aide sur comment et où ajouter du CSS personnalisé, [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"). Remplacez **1682** sur la **ligne 1** et la **ligne 4** par l'ID de votre formulaire. ## FAQ #### Q : La validation du champ s'affichera-t-elle toujours ? **R :** Absolument ! Les erreurs de validation conserveront le même style. #### Q : Pourquoi cela ne fonctionne-t-il pas pour moi ? **R :** Assurez-vous de revoir les étapes ci-dessus. Si vous avez oublié de placer le texte **Placeholder** dans les champs, les étiquettes n'auraient pas l'effet flottant lorsqu'un utilisateur clique dans le champ. Et voilà ! Vous avez maintenant créé un formulaire avec des étiquettes flottantes qui flottent vers le haut lorsque l'utilisateur commence à taper dans le champ. Ensuite, souhaitez-vous changer la couleur du message de confirmation ou simplement le supprimer complètement ? Consultez notre article sur [Comment supprimer le style de la boîte de message de confirmation](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Comment supprimer le style de la boîte de message de confirmation"). ## 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 ---