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.

Il se trouve à l'intérieur d'un champ et montre aux gens exactement quoi taper avant qu'ils ne le fassent, ce qui réduit les conjectures et les échanges d'e-mails qui s'ensuivent.

Dans cet article, je vais vous expliquer comment ajouter du texte d'espace réservé à chaque champ de votre formulaire de contact WordPress en utilisant la solution la plus simple disponible avec WPForms !

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 textes indicatifs sont utiles pour tout champ qui a un format spécifique, comme une adresse e-mail. Ils montrent à votre visiteur comment formater sa saisie, ce qui 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 indicatif pour aider vos visiteurs. Le texte indicatif est un peu différent d'une valeur par défaut.

Lorsque l'utilisateur commence à taper dans un champ avec un texte indicatif, celui-ci disparaît. En revanche, une valeur par défaut sera soumise avec l'entrée du formulaire, sauf si l'utilisateur la modifie.

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

Une fois votre formulaire créé, l'ajout d'un texte indicatif prend quelques clics par champ, et vous n'avez pas besoin de toucher une ligne de code ou de CSS pour le faire. Suivez les étapes ci-dessous pour commencer :

Étape 1 : Installer le plugin WPForms

WPForms est un constructeur de formulaires par glisser-déposer pour WordPress avec plus de 2 100 modèles de formulaires, vous pouvez donc commencer à partir d'un formulaire de contact prêt à l'emploi au lieu de construire à partir de zéro.

Chaque champ que vous faites glisser possède son propre panneau d'options, et le texte d'espace réservé se trouve au même endroit sur chacun d'eux. Ce que j'aime le plus chez WPForms pour ce travail particulier, c'est que l'aperçu de l'espace réservé se met à jour en direct.

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.

Commencez avec WPForms dès aujourd'hui

Étape 2 : Créez votre formulaire de contact

Dans WPForms, vous pouvez créer et intégrer un formulaire en moins de 5 minutes, grâce à sa bibliothèque de plus de 2 100 modèles de formulaires et à ses capacités avancées de création de formulaires basées sur l'IA.

Vous pouvez commencer par aller dans WPForms » Ajouter un nouveau et choisir le modèle Formulaire de contact simple ou demander à l'IA de WPForms de créer le formulaire pour vous.

Une fois que vous avez sélectionné un modèle ou créé votre formulaire à l'aide de l'IA de WPForms, vous serez redirigé vers le constructeur de formulaires. Ici, vous pouvez voir une liste de champs à ajouter sur la gauche et un aperçu en direct de votre formulaire sur la droite.

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 formulaires pour sauvegarder votre progression jusqu'à présent.

Étape 3 : Ajoutez un texte indicatif à un champ de texte ou d'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.

Prenons le champ e-mail comme premier exemple. Dans le constructeur de formulaires, 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 d'espace réservé 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é. Répétez cette opération pour chaque champ nécessitant une indication.

Étape 4 : Ajoutez un texte indicatif à un champ de liste déroulante

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 de l'espace réservé lui-même. 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 choix de réponse à cette liste déroulante. Lorsque nous publierons le formulaire, la première option sera la sélection par défaut.

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 de l'espace réservé à gauche. La modification est instantanément visible 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 d'espace réservé, mais que vous voulez une ligne vide en haut de la liste déroulante, vous pouvez laisser l'espace réservé vide.

Appuyez simplement sur espace dans le champ Texte du placeholder. Cela affichera le champ déroulant comme vide jusqu'à ce que le visiteur fasse une sélection.

Tous les champs WPForms qui prennent en charge le texte indicatif

Tous les champs ne peuvent pas contenir de texte de placeholder, et savoir lesquels le peuvent vous évite de chercher dans des paramètres qui n'existent pas.

Pour la référence complète sur chaque type de champ, WPForms dispose d'une documentation sur le texte du placeholder qui couvre les détails.

Champ	Notes
Texte sur une seule ligne	Placeholder standard
Texte de paragraphe	Placeholder standard
Nom	Placeholder séparé par sous-champ (prénom, prénom, nom)
E-mail	Placeholder séparé pour le champ de confirmation
Site Web / URL	Placeholder standard
Téléphone	Placeholder standard
Nombre	Placeholder standard
Liste déroulante	Sert également à empêcher la présélection du premier choix
Adresse	Placeholder séparé par ligne, ville, état, code postal et pays
Date / Heure	Placeholder séparé pour les sélecteurs de date et d'heure
Mot de passe	Placeholder séparé pour le champ de confirmation
Captcha personnalisé	Placeholder standard

Tout ce que le lecteur clique plutôt que de taper n'a pas d'option de placeholder, car il n'y a pas de zone de texte vide pour y mettre un indice. Cela couvre les Cases à cocher, Choix multiple, Évaluation, Signature, Téléchargement de fichier, Curseur numérique et Texte enrichi.

Six des champs ci-dessus sont livrés avec WPForms Lite gratuit, y compris Texte sur une seule ligne, Nom, E-mail, Texte de paragraphe, Déroulant et Nombre. Téléphone, Adresse, Date / Heure et Captcha personnalisé sont des champs avancés qui nécessitent une licence payante.

Passer de Contact Form 7 à WPForms

Si vous êtes arrivé ici depuis Contact Form 7, vous savez déjà pourquoi. Les placeholders y signifient ouvrir l'onglet Formulaire et taper manuellement un attribut placeholder dans le shortcode de la balise de formulaire pour chaque champ, ou cocher la case « utiliser ce texte comme placeholder » sous Valeur par défaut.

Dans tous les cas, vous modifiez le balisage, et chaque nouveau champ signifie revenir dans le shortcode. Les listes déroulantes rencontrent un plafond plus difficile, car Contact Form 7 peut vous donner une première ligne vide mais l'affiche comme trois tirets sans réglage pour changer ce qu'elle dit.

Vous ne pouvez pas écrire « Choisissez un département » ou « Sélectionnez votre budget », et aucun montant d'édition de shortcode ne change cela. Notre comparaison WPForms Lite vs Contact Form 7 examine le reste des différences si vous voulez l'image complète.

Cet écart est la raison honnête de changer pour ce travail particulier. Le texte du placeholder dans WPForms est une boîte dans laquelle vous tapez, avec un aperçu en direct, sur chaque champ qui en prend en charge un.

Vous pouvez importer vos formulaires Contact Form 7 existants plutôt que de les reconstruire, ce qui fait de WPForms une alternative simple à Contact Form 7 si l'édition de shortcode vous a lassé.

FAQ sur le texte indicatif des formulaires de contact

Le texte du placeholder revient souvent chez les utilisateurs de WordPress qui configurent des formulaires de contact. Voici les questions qui reviennent le plus souvent.

Qu'est-ce qu'un texte indicatif ?

C'est le texte indicatif à l'intérieur d'un champ de formulaire qui montre quoi taper et disparaît une fois que quelqu'un commence à taper.

Il provient de l'attribut HTML5 placeholder, et dans WPForms, vous l'ajoutez depuis l'onglet Avancé de tout champ pris en charge.

Quelle est la différence entre un texte indicatif et une valeur par défaut ?

Le texte du placeholder n'est qu'un indice visuel, il n'est donc jamais soumis avec le formulaire. Une valeur par défaut est un contenu réel dans le champ, et il est soumis à moins que la personne ne le modifie d'abord.

Utilisez un placeholder pour montrer le format que vous souhaitez, et une valeur par défaut lorsque vous souhaitez pré-remplir une réponse réelle.

Les lecteurs d'écran peuvent-ils lire le texte indicatif ?

Pas de manière fiable, c'est pourquoi le texte de substitution ne devrait pas être la seule description d'un champ.

Gardez l'étiquette du champ visible plutôt que de cocher Masquer l'étiquette, et mettez tout ce qui est vraiment important dans la description du champ où cela reste à l'écran.

Pourquoi ma liste déroulante sélectionne-t-elle automatiquement la première option ?

Parce qu'il est défini sur le style Classique, qui présélectionne toujours le premier choix.

Ajoutez du texte de substitution dans l'onglet Avancé et cela s'arrête, ou changez le Style en Moderne sous l'onglet Général, car les listes déroulantes Modernes ne présélectionnent rien du tout.

Puis-je ajouter un texte indicatif dans Contact Form 7 ?

Vous pouvez, en tapant un attribut placeholder dans le shortcode de la balise de formulaire ou en utilisant la case à cocher Valeur par défaut.

Les listes déroulantes sont la limite, car Contact Form 7 n'offre qu'une ligne vide représentée par trois tirets sans possibilité de personnaliser le libellé.

É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.

Créez un meilleur formulaire de contact dès maintenant

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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.