Résumé IA
Souhaitez-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.
Création de votre formulaire
Nous allons commencer par créer un formulaire de contact simple. Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.
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 Intelligent.
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.
Ajout de 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 Classes CSS.
É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.
Si vous avez besoin d'aide sur comment et où ajouter des extraits à votre site, veuillez consulter ce tutoriel.
Ce que fait cet extrait, c'est de supprimer la position de l'étiquette du champ de l'affichage avant le champ et de la placer après le champ.
Étiquettes flottantes – Extrait CSS
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.
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 relire les étapes ci-dessus. Si vous avez oublié de placer le texte Placeholder dans les champs, les étiquettes n'auraient pas l'effet flottant lorsque l'utilisateur clique dans le champ.
Et voilà ! Vous avez maintenant créé un formulaire avec des étiquettes flottantes qui remontent lorsque l'utilisateur commence à taper dans le champ. Ensuite, souhaitez-vous modifier 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.