Comment ajouter du texte d'espace réservé à vos formulaires WordPress

Vous voulez ajouter du texte d'espace réservé dans WordPress ?

Les espaces réservés permettent à vos visiteurs de remplir facilement chaque champ correctement. Cela vous aide à obtenir les bonnes informations et réduit la frustration de vos visiteurs.

Dans cet article, nous vous montrerons la manière simple d'ajouter du texte d'espace réservé à tout type de formulaire.

Créez votre formulaire WordPress maintenant

Qu'est-ce que le texte d'espace réservé ?

Le texte d'espace réservé est le texte à l'intérieur d'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 appelé « 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. Ils indiquent à votre visiteur comment formater sa saisie.

Le texte d'espace réservé est très important pour s'assurer que chaque champ est valide. Cela signifie qu'il y a moins de risques d'abandon de formulaire car le visiteur n'aura pas à revenir en arrière et à corriger ce qu'il a tapé.

C'est particulièrement utile pour des champs comme :

• URL : Vous pouvez ajouter https://example.com comme texte d'espace réservé pour montrer au visiteur comment saisir correctement l'adresse de son site Web.
• Numéros de téléphone : Par exemple, si vous souhaitez obtenir l'indicatif du pays de l'utilisateur ainsi que son numéro habituel, vous pouvez ajouter du texte d'espace réservé pour lui montrer comment le saisir.
• Noms d'utilisateur de médias sociaux : Le texte d'espace réservé peut montrer aux utilisateurs comment saisir correctement leur nom d'utilisateur. Par exemple, ajouter @example comme texte d'espace réservé pour un champ Twitter indique que vous souhaitez qu'ils tapent le @ initial.

Vous pouvez probablement penser à d'autres façons d'utiliser le texte d'espace réservé pour aider vos visiteurs.

Le texte d'espace réservé est un peu différent d'une valeur par défaut. Lorsque l'utilisateur commence à taper dans un champ avec un espace réservé, le texte d'espace réservé disparaît. En revanche, une valeur par défaut sera soumise avec la saisie du formulaire, sauf si l'utilisateur la modifie.

Maintenant que nous savons comment utiliser l'attribut d'espace réservé HTML5, nous allons vous montrer la manière simple de l'ajouter à vos formulaires.

Comment ajouter du texte d'espace réservé aux formulaires WordPress

Nous vous montrerons comment ajouter facilement du texte d'espace réservé dans les étapes ci-dessous.

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. Gardez à l'esprit que la version Pro vous permet d'ajouter des champs avancés à vos formulaires, elle est donc beaucoup plus puissante que la version gratuite.

Téléchargez le fichier zip depuis 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 comment installer un plugin WordPress si vous avez besoin d'aide pour cette étape.

2. Créer un formulaire de contact simple

Ensuite, vous voudrez créer un formulaire de contact simple. 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 un accord RGPD facilement en faisant glisser le champ RGPD vers l'aperçu du formulaire.

Besoin d'aide supplémentaire ? 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 Enregistrer en haut du constructeur de formulaire pour sauvegarder votre progression jusqu'à présent.

3. Ajouter du texte d'espace réservé au champ E-mail

Nous sommes maintenant prêts à ajouter du texte d'espace réservé à votre formulaire WordPress. Nous allons vous montrer 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 constructeur de formulaire, cliquez sur le champ e-mail à droite pour ouvrir les paramètres.

Ensuite, sur le côté gauche, développez le sous-menu Options avancées.

Vous verrez un champ pour le Texte d'espace réservé.

Tapez le texte d'espace réservé que vous souhaitez utiliser. Pendant que vous tapez, vous verrez le même texte apparaître dans l'aperçu du formulaire à droite, vous pourrez ainsi voir à quoi il ressemblera sur votre formulaire WordPress.

Si vous le souhaitez, vous pouvez également cocher la case Masquer l'étiquette. 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 placeholder HTML5, vous pourriez donc vouloir laisser l'étiquette du champ en place pour l'accessibilité.

Pour l'instant, nous allons décocher Masquer l'étiquette afin d'avoir à la fois l'étiquette et le texte d'espace réservé.

4. Ajouter du texte d'espace réservé à un champ déroulant

Vous pouvez utiliser du texte d'espace réservé sur n'importe quel champ, mais la liste déroulante est particulièrement pratique. Par défaut, une liste déroulante affichera le premier choix de la liste, mais nous pouvons utiliser un espace réservé pour éviter cela.

Si vous avez lu 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'une liste déroulante. Cependant, il n'affichera que 3 tirets ( – – – ) comme espace réservé, et vous ne pouvez pas personnaliser le texte d'espace réservé réel.

WPForms vous donne donc plus de contrôle sur l'apparence de vos espaces réservés.

Commençons par un exemple de liste déroulante. Nous avons ajouté 3 options de réponse à cette liste déroulante.

Lorsque nous publierons le formulaire, la 1ère option sera la sélection par défaut. Votre visiteur pourrait soumettre ce formulaire sans cliquer sur la liste déroulante pour la modifier.

Cela peut être un problème sur n'importe quel formulaire, et particulièrement sur les formulaires d'enquête et les questionnaires. Sur tout type d'enquête, vous voulez vous assurer que votre visiteur choisit consciemment une réponse.

Nous pouvons facilement résoudre ce problème en ajoutant un espace réservé au champ de liste déroulante.

Sous Options avancées, nous avons tapé le texte d'espace réservé à gauche. Le changement est instantanément montré dans l'aperçu à droite.

Maintenant, le formulaire affichera l'espace réservé au lieu du 1er choix.

Lorsque la liste est développée, vous pouvez voir que le texte d'espace réservé est grisé pour montrer que ce n'est pas une sélection valide.

Si vous ne souhaitez pas utiliser de texte de substitution, mais que vous voulez une ligne vide en haut de la liste déroulante, vous pouvez laisser le champ de substitution vide. Appuyez simplement sur Espace dans le champ Texte de substitution. Cela affichera le champ de liste déroulante comme vide jusqu'à ce que le visiteur fasse une sélection.

Et voilà ! Vous savez maintenant comment ajouter un texte de substitution utile à vos formulaires WordPress.

Créez votre formulaire WordPress maintenant

Étape suivante : Styliser votre texte de substitution

Par défaut, le texte de substitution de votre formulaire de contact WordPress sera gris.  Si vous souhaitez ajouter un contraste, vous pouvez utiliser du CSS pour le styliser.

Consultez les extraits de code dans notre documentation : comment styliser le texte de substitution. Nous avons également quelques excellents exemples de pages de contact si vous souhaitez vous inspirer du design.

Vous ne savez pas comment ajouter du CSS dans WordPress ? Lisez ce guide pour ajouter des extraits de code sans casser votre site.

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.