Vous voulez ajouter du texte d’espace réservé au formulaire dans WordPress ?
Les espaces réservés permettent à vos visiteurs de remplir correctement chaque champ. Cela vous aide à obtenir les bonnes informations et réduit la frustration de vos visiteurs.
Dans cet article, nous allons vous montrer le moyen simple d’ajouter du texte d’espace réservé à tout type de formulaire.
Qu’est-ce qu’un texte d’espace réservé ?
Le texte d’espace réservé est le texte dans un champ de formulaire qui indique à l’utilisateur ce qu’il doit saisir. Il a été introduit dans la spécification HTML5, vous le verrez donc parfois comme « attribut d’espace réservé HTML5 ».
Les espaces réservés sont utiles pour tout champ ayant un format spécifique, comme une adresse e-mail. Montrez à votre visiteur comment formater son message.
Le texte de l’espace réservé est très important pour s’assurer que tous les champs sont valides. Cela signifie qu’il y a moins de chance d’abandonner le formulaire car le visiteur n’aura pas à revenir en arrière et à corriger ce qu’il a écrit.
Il est particulièrement utile pour des domaines tels que :
- URL: Vous pouvez ajouter https://example.com comme texte d’espace réservé pour montrer au visiteur comment taper correctement l’adresse de votre site Web
- Numéros de téléphone: Par exemple, si vous souhaitez obtenir le code de pays de l’utilisateur ainsi que son numéro habituel, vous pouvez ajouter un texte d’espace réservé pour lui montrer comment le saisir.
- Noms d’utilisateur des réseaux sociaux: le texte d’espace réservé peut montrer aux gens comment épeler correctement leur nom d’utilisateur. Par exemple, ajouter @example comme texte d’espace réservé pour un Twitter le champ indique que vous voulez qu’ils écrivent le premier @
Vous pouvez probablement penser à d’autres façons d’utiliser le texte d’espace réservé pour aider vos visiteurs.
Le texte de l’espace réservé est légèrement différent de la valeur par défaut. Lorsque l’utilisateur commence à taper dans un champ avec un espace réservé, le texte de l’espace réservé disparaît. Au lieu de cela, une valeur par défaut sera envoyée avec la saisie du formulaire à moins que l’utilisateur ne la modifie.
Maintenant que nous savons comment utiliser l’attribut espace réservé HTML5, nous allons vous montrer comment l’ajouter facilement à vos formulaires.
Comment ajouter du texte d’espace réservé aux formulaires WordPress
Nous allons vous montrer comment ajouter facilement du texte d’espace réservé dans les étapes ci-dessous.
- Installer le plugin WPForms
- Créer un formulaire de contact simple
- Ajouter un texte d’espace réservé au champ d’e-mail
- Ajouter un texte d’espace réservé à un champ déroulant
Commençons par installer le meilleur plugin de création de formulaires pour WordPress.
1. Installez le plugin WPForms
Tout d’abord, installez et activez le plugin WPForms.
Toutes les versions de WPForms vous permettent d’ajouter des espaces réservés aux champs de formulaire, y compris WPForms Lite. A noter que la version Pro vous permet d’ajouter des champs avancés à vos formulaires, elle est donc bien plus puissante que la version gratuite.
Téléchargez le fichier zip à partir de l’onglet Téléchargements de votre compte WPForms et téléchargez-le sur votre site WordPress. Voici un guide étape par étape sur la façon d’installer un plugin WordPress si vous avez besoin d’aide pour cette étape.
2. créer un simple formulaire de contact
Ensuite, vous voudrez créer un simple formulaire de contact. Dans WPForms, vous pouvez créer et intégrer un formulaire en moins de 5 minutes.
Il est facile de personnaliser votre formulaire et d’ajouter les champs dont vous avez besoin. Vous pouvez même ajouter facilement un accord GDPR en faisant glisser le champ GDPR vers l’aperçu du formulaire.
Avez-vous besoin de plus d’aide? Nous avons un guide détaillé montrant comment créer un formulaire de contact simple dans WordPress.
Lorsque votre formulaire est prêt, cliquez sur Économiser en haut du générateur de formulaires pour enregistrer votre progression jusqu’à présent.
3. Ajoutez un texte d’espace réservé au champ d’e-mail
Nous sommes maintenant prêts à ajouter du texte d’espace réservé HTML5 à votre formulaire WordPress. Nous vous montrerons 2 façons utiles d’utiliser cette fonctionnalité pour faciliter le remplissage de vos formulaires.
Utilisons le champ e-mail comme premier exemple.
Dans le générateur de formulaires, cliquez sur le champ e-mail à droite pour ouvrir les paramètres.
Ensuite, sur le côté gauche, développez le Options avancées sous-menu.
Vous verrez un champ pour le Texte de signet.
Saisissez le texte de l’espace réservé que vous souhaitez utiliser. Au fur et à mesure que vous tapez, vous verrez le même texte apparaître dans l’aperçu du formulaire à droite afin que vous puissiez voir à quoi il ressemblera sur votre formulaire WordPress.
Si vous le souhaitez, vous pouvez également cliquer sur le Masquer l’étiquette boîte. Cela masquera l’étiquette au-dessus du champ pour rendre le formulaire plus compact. Cependant, gardez à l’esprit que les lecteurs d’écran ne peuvent pas lire l’attribut d’espace réservé HTML5, vous pouvez donc laisser la balise de champ en place pour l’accessibilité.
Pour l’instant, décochez Masquer l’étiquette nous avons donc à la fois l’étiquette et le texte pour l’espace réservé.
4. Ajouter un texte d’espace réservé à un champ déroulant
Vous pouvez utiliser du texte d’espace réservé dans n’importe quel champ, mais le menu déroulant est particulièrement utile. Par défaut, une liste déroulante sera la première option de la liste, mais nous pouvons utiliser un espace réservé pour éviter cela.
Si vous lisez notre comparaison de WPForms Lite vs Contact Form 7, vous saurez que Contact Form 7 vous permet d’ajouter une ligne vide en haut d’un menu déroulant. Cependant, il n’affichera que 3 tirets (- – -) comme espace réservé, et vous ne pouvez pas personnaliser le texte de l’espace réservé réel.
Ainsi, WPForms vous donne plus de contrôle sur l’apparence de vos espaces réservés.
Commençons par un exemple déroulant. Nous avons ajouté 3 options de réponse à ce menu déroulant.
Lorsque nous publierons le formulaire, la première option sera la sélection par défaut. Votre visiteur peut soumettre ce formulaire sans cliquer sur le menu déroulant pour le modifier.
Cela peut être un problème sur n’importe quel formulaire, et en particulier sur les formulaires d’enquête et de questionnaire. Dans tout type d’enquête, vous voulez vous assurer que votre visiteur a consciemment choisi une réponse.
Nous pouvons facilement résoudre ce problème en ajoutant un espace réservé au champ déroulant.
Au dessous de Options avancées, nous écrivons le texte de l’espace réservé à gauche. La modification s’affiche instantanément dans l’aperçu à droite.
Maintenant, le formulaire affichera l’espace réservé au lieu de la première option.
Lorsque la liste est développée, vous pouvez voir que le texte de l’espace réservé est grisé pour indiquer qu’il ne s’agit pas d’une sélection valide.
Si vous ne souhaitez pas utiliser de texte d’espace réservé, mais souhaitez une ligne vide en haut du menu déroulant, vous pouvez laisser l’espace réservé vide. Appuyez simplement sur la barre d’espace sur le Texte de signet Campagne. Cela affichera le champ déroulant comme vide jusqu’à ce que le visiteur fasse une sélection.
Et c’est ça! Vous savez maintenant comment ajouter un texte d’espace réservé utile à vos formulaires WordPress.
Étape suivante : styliser le texte de l’espace réservé
Par défaut, le texte de l’espace réservé du formulaire de contact WordPress sera gris. Si vous souhaitez ajouter du contraste, vous pouvez utiliser CSS pour le styler.
Consultez les extraits de code dans notre documentation : Comment styliser le texte de l’espace réservé. Nous avons également d’excellents exemples de pages de contact si vous souhaitez vous inspirer de la conception.
Vous ne savez pas comment ajouter du CSS dans WordPress ? Lisez ce guide pour ajouter des extraits de code sans endommager votre site.
Prêt à créer votre formulaire ? Commencez dès aujourd’hui avec le plugin de création de formulaire WordPress le plus simple. WPForms Pro comprend de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de guides et tutoriels WordPress gratuits.
