Le texte d’espace r\u00e9serv\u00e9 est le texte dans un champ de formulaire qui indique \u00e0 l’utilisateur ce qu’il doit saisir. Il a \u00e9t\u00e9 introduit dans la sp\u00e9cification HTML5, vous le verrez donc parfois comme \u00ab\u00a0attribut d’espace r\u00e9serv\u00e9 HTML5\u00a0\u00bb.<\/p>\n
Les espaces r\u00e9serv\u00e9s sont utiles pour tout champ ayant un format sp\u00e9cifique, comme une adresse e-mail. Montrez \u00e0 votre visiteur comment formater son message.<\/p>\n
![\"Exemple](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.gif\")
<\/p>\n
Le texte de l’espace r\u00e9serv\u00e9 est tr\u00e8s 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 \u00e0 revenir en arri\u00e8re et \u00e0 corriger ce qu’il a \u00e9crit.<\/p>\n
Il est particuli\u00e8rement utile pour des domaines tels que\u00a0:<\/p>\n
- \n
- URL<\/strong>: Vous pouvez ajouter https:\/\/example.com comme texte d’espace r\u00e9serv\u00e9 pour montrer au visiteur comment taper correctement l’adresse de votre site Web<\/li>\n
- Num\u00e9ros de t\u00e9l\u00e9phone<\/strong>: Par exemple, si vous souhaitez obtenir le code de pays de l’utilisateur ainsi que son num\u00e9ro habituel, vous pouvez ajouter un texte d’espace r\u00e9serv\u00e9 pour lui montrer comment le saisir.<\/li>\n
- Noms d’utilisateur des r\u00e9seaux sociaux<\/strong>: le texte d’espace r\u00e9serv\u00e9 peut montrer aux gens comment \u00e9peler correctement leur nom d’utilisateur. Par exemple, ajouter @example comme texte d’espace r\u00e9serv\u00e9 pour un Twitter le champ indique que vous voulez qu’ils \u00e9crivent le premier @<\/li>\n<\/ul>\n
Vous pouvez probablement penser \u00e0 d’autres fa\u00e7ons d’utiliser le texte d’espace r\u00e9serv\u00e9 pour aider vos visiteurs.<\/p>\n
Le texte de l’espace r\u00e9serv\u00e9 est l\u00e9g\u00e8rement diff\u00e9rent de la valeur par d\u00e9faut. Lorsque l’utilisateur commence \u00e0 taper dans un champ avec un espace r\u00e9serv\u00e9, le texte de l’espace r\u00e9serv\u00e9 dispara\u00eet. Au lieu de cela, une valeur par d\u00e9faut sera envoy\u00e9e avec la saisie du formulaire \u00e0 moins que l’utilisateur ne la modifie.<\/p>\n
Maintenant que nous savons comment utiliser l’attribut espace r\u00e9serv\u00e9 HTML5, nous allons vous montrer comment l’ajouter facilement \u00e0 vos formulaires.<\/p>\n
<\/span>Comment ajouter du texte d’espace r\u00e9serv\u00e9 aux formulaires WordPress<\/span><\/h3>\n
Nous allons vous montrer comment ajouter facilement du texte d’espace r\u00e9serv\u00e9 dans les \u00e9tapes ci-dessous.<\/p>\n
- \n
- Installer le plugin WPForms<\/li>\n
- Cr\u00e9er un formulaire de contact simple<\/li>\n
- Ajouter un texte d’espace r\u00e9serv\u00e9 au champ d’e-mail<\/li>\n
- Ajouter un texte d’espace r\u00e9serv\u00e9 \u00e0 un champ d\u00e9roulant<\/li>\n<\/ol>\n
Commen\u00e7ons par installer le meilleur plugin de cr\u00e9ation de formulaires pour WordPress.<\/p>\n
<\/span>1. Installez le plugin WPForms<\/span><\/h3>\n
Tout d’abord, installez et activez le plugin WPForms.<\/p>\n
Toutes les versions de WPForms vous permettent d’ajouter des espaces r\u00e9serv\u00e9s aux champs de formulaire, y compris WPForms Lite. A noter que la version Pro vous permet d’ajouter des champs avanc\u00e9s \u00e0 vos formulaires, elle est donc bien plus puissante que la version gratuite.<\/p>\n
T\u00e9l\u00e9chargez le fichier zip \u00e0 partir de l’onglet T\u00e9l\u00e9chargements de votre compte WPForms et t\u00e9l\u00e9chargez-le sur votre site WordPress. Voici un guide \u00e9tape par \u00e9tape sur la fa\u00e7on d’installer un plugin WordPress si vous avez besoin d’aide pour cette \u00e9tape.<\/p>\n
<\/span>2. cr\u00e9er un simple formulaire de contact<\/span><\/h3>\n
Ensuite, vous voudrez cr\u00e9er un simple formulaire de contact. Dans WPForms, vous pouvez cr\u00e9er et int\u00e9grer un formulaire en moins de 5 minutes.<\/p>\n
![\"Formulaire](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631401107_4_WPForms-Lite-vs-Pro-Is-It-Worth-the-Upgrade-Full.png\")
<\/p>\nIl est facile de personnaliser votre formulaire et d’ajouter les champs dont vous avez besoin. Vous pouvez m\u00eame ajouter facilement un accord GDPR en faisant glisser le champ GDPR vers l’aper\u00e7u du formulaire.<\/p>\n
![\"Faites](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/WPForms-Lite-vs-Pro-Is-It-Worth-the-Upgrade-Full.gif\")
<\/p>\nAvez-vous besoin de plus d’aide? Nous avons un guide d\u00e9taill\u00e9 montrant comment cr\u00e9er un formulaire de contact simple dans WordPress.<\/p>\n
Lorsque votre formulaire est pr\u00eat, cliquez sur \u00c9conomiser<\/strong> en haut du g\u00e9n\u00e9rateur de formulaires pour enregistrer votre progression jusqu’\u00e0 pr\u00e9sent.<\/p>\n
<\/span>3. Ajoutez un texte d’espace r\u00e9serv\u00e9 au champ d’e-mail<\/span><\/h3>\n
Nous sommes maintenant pr\u00eats \u00e0 ajouter du texte d’espace r\u00e9serv\u00e9 HTML5 \u00e0 votre formulaire WordPress. Nous vous montrerons 2 fa\u00e7ons utiles d’utiliser cette fonctionnalit\u00e9 pour faciliter le remplissage de vos formulaires.<\/p>\n
Utilisons le champ e-mail comme premier exemple.<\/p>\n
Dans le g\u00e9n\u00e9rateur de formulaires, cliquez sur le champ e-mail \u00e0 droite pour ouvrir les param\u00e8tres.<\/p>\n
![\"Cliquez](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684786_248_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nEnsuite, sur le c\u00f4t\u00e9 gauche, d\u00e9veloppez le Options avanc\u00e9es<\/strong> sous-menu.<\/p>\n
Vous verrez un champ pour le Texte de signet<\/strong>.<\/p>\n
![\"D\u00e9finir](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684786_679_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nSaisissez le texte de l’espace r\u00e9serv\u00e9 que vous souhaitez utiliser. Au fur et \u00e0 mesure que vous tapez, vous verrez le m\u00eame texte appara\u00eetre dans l’aper\u00e7u du formulaire \u00e0 droite afin que vous puissiez voir \u00e0 quoi il ressemblera sur votre formulaire WordPress.<\/p>\n
![\"Texte](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684786_10_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nSi vous le souhaitez, vous pouvez \u00e9galement cliquer sur le Masquer l’\u00e9tiquette<\/strong> bo\u00eete. Cela masquera l’\u00e9tiquette au-dessus du champ pour rendre le formulaire plus compact. Cependant, gardez \u00e0 l’esprit que les lecteurs d’\u00e9cran ne peuvent pas lire l’attribut d’espace r\u00e9serv\u00e9 HTML5, vous pouvez donc laisser la balise de champ en place pour l’accessibilit\u00e9.<\/p>\n
![\"Masquer](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684786_409_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nPour l’instant, d\u00e9cochez Masquer l’\u00e9tiquette<\/strong> nous avons donc \u00e0 la fois l’\u00e9tiquette et le texte pour l’espace r\u00e9serv\u00e9.<\/p>\n
<\/span>4. Ajouter un texte d’espace r\u00e9serv\u00e9 \u00e0 un champ d\u00e9roulant<\/span><\/h3>\n
Vous pouvez utiliser du texte d’espace r\u00e9serv\u00e9 dans n’importe quel champ, mais le menu d\u00e9roulant est particuli\u00e8rement utile. Par d\u00e9faut, une liste d\u00e9roulante sera la premi\u00e8re option de la liste, mais nous pouvons utiliser un espace r\u00e9serv\u00e9 pour \u00e9viter cela.<\/p>\n
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\u00e9roulant. Cependant, il n’affichera que 3 tirets (- – -) comme espace r\u00e9serv\u00e9, et vous ne pouvez pas personnaliser le texte de l’espace r\u00e9serv\u00e9 r\u00e9el.<\/p>\n
Ainsi, WPForms vous donne plus de contr\u00f4le sur l’apparence de vos espaces r\u00e9serv\u00e9s.<\/p>\n
Commen\u00e7ons par un exemple d\u00e9roulant. Nous avons ajout\u00e9 3 options de r\u00e9ponse \u00e0 ce menu d\u00e9roulant.<\/p>\n
![\"Option](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_590_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nLorsque nous publierons le formulaire, la premi\u00e8re option sera la s\u00e9lection par d\u00e9faut. Votre visiteur peut soumettre ce formulaire sans cliquer sur le menu d\u00e9roulant pour le modifier.<\/p>\n
![\"Menu](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_979_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nCela peut \u00eatre un probl\u00e8me sur n’importe quel formulaire, et en particulier sur les formulaires d’enqu\u00eate et de questionnaire. Dans tout type d’enqu\u00eate, vous voulez vous assurer que votre visiteur a consciemment choisi une r\u00e9ponse.<\/p>\n
Nous pouvons facilement r\u00e9soudre ce probl\u00e8me en ajoutant un espace r\u00e9serv\u00e9 au champ d\u00e9roulant.<\/p>\n
Au dessous de Options avanc\u00e9es<\/strong>, nous \u00e9crivons le texte de l’espace r\u00e9serv\u00e9 \u00e0 gauche. La modification s’affiche instantan\u00e9ment dans l’aper\u00e7u \u00e0 droite.<\/p>\n
![\"Texte](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_379_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nMaintenant, le formulaire affichera l’espace r\u00e9serv\u00e9 au lieu de la premi\u00e8re option.<\/p>\n
![\"Texte](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_681_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nLorsque la liste est d\u00e9velopp\u00e9e, vous pouvez voir que le texte de l’espace r\u00e9serv\u00e9 est gris\u00e9 pour indiquer qu’il ne s’agit pas d’une s\u00e9lection valide.<\/p>\n
![\"Menu](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_162_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nSi vous ne souhaitez pas utiliser de texte d’espace r\u00e9serv\u00e9, mais souhaitez une ligne vide en haut du menu d\u00e9roulant, vous pouvez laisser l’espace r\u00e9serv\u00e9 vide. Appuyez simplement sur la barre d’espace sur le Texte de signet<\/strong> Campagne. Cela affichera le champ d\u00e9roulant comme vide jusqu’\u00e0 ce que le visiteur fasse une s\u00e9lection.<\/p>\n
Et c’est \u00e7a! Vous savez maintenant comment ajouter un texte d’espace r\u00e9serv\u00e9 utile \u00e0 vos formulaires WordPress.<\/p>\n
<\/span>\u00c9tape suivante\u00a0: styliser le texte de l’espace r\u00e9serv\u00e9<\/span><\/h3>\n
Par d\u00e9faut, le texte de l’espace r\u00e9serv\u00e9 du formulaire de contact WordPress sera gris. Si vous souhaitez ajouter du contraste, vous pouvez utiliser CSS pour le styler.<\/p>\n
![\"Style](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/09\/1631684787_222_Como-agregar-texto-de-marcador-de-posicion-a-sus-formularios.png\")
<\/p>\nConsultez les extraits de code dans notre documentation : Comment styliser le texte de l’espace r\u00e9serv\u00e9. Nous avons \u00e9galement d’excellents exemples de pages de contact si vous souhaitez vous inspirer de la conception.<\/p>\n
Vous ne savez pas comment ajouter du CSS dans WordPress ? Lisez ce guide pour ajouter des extraits de code sans endommager votre site.<\/p>\n
Pr\u00eat \u00e0 cr\u00e9er votre formulaire\u00a0? Commencez d\u00e8s aujourd’hui avec le plugin de cr\u00e9ation de formulaire WordPress le plus simple. WPForms Pro comprend de nombreux mod\u00e8les gratuits et offre une garantie de remboursement de 14 jours.<\/p>\n
Si cet article vous a aid\u00e9, suivez-nous sur Facebook et Twitter pour plus de guides et tutoriels WordPress gratuits.<\/p>\n
- Num\u00e9ros de t\u00e9l\u00e9phone<\/strong>: Par exemple, si vous souhaitez obtenir le code de pays de l’utilisateur ainsi que son num\u00e9ro habituel, vous pouvez ajouter un texte d’espace r\u00e9serv\u00e9 pour lui montrer comment le saisir.<\/li>\n