Comment ajouter du texte d’instruction à un formulaire (4 méthodes)

Voulez-vous ajouter du texte d'instruction à un formulaire sur votre site Web WordPress ?

Lorsque vous savez comment ajouter du texte d'instruction à votre formulaire, vous pouvez partager une invite descriptive ou des instructions avec les utilisateurs.

Dans cet article, nous allons vous présenter 4 façons différentes d'ajouter du texte d'instruction à un formulaire.

Ajouter du texte d'instruction à votre formulaire maintenant

Quels sont quelques exemples de texte d'instruction ?

Le texte d'instruction demande aux lecteurs d'accomplir une tâche, par exemple en demandant aux visiteurs du site Web de remplir un formulaire.

Bien que le texte d'instruction puisse varier en contenu et en longueur, comme une recette ou un manuel d'utilisation, ce texte serait probablement un court extrait lorsqu'il est inclus dans un formulaire en ligne.

Par exemple, vous pouvez simplement demander à vos visiteurs de vous envoyer un message sur votre page de contact. Ainsi, votre texte d'instruction pourrait ressembler à ceci : « Veuillez remplir le formulaire de contact ci-dessous. »

En bref, le texte d'instruction demande simplement aux visiteurs du site Web ce que vous voulez qu'ils fassent.

Comment ajouter du texte d’instruction à un formulaire (4 méthodes)

Pour ce tutoriel, nous allons utiliser WPForms. Avec son interface utilisateur conviviale et glisser-déposer, il faut très peu de temps pour apprendre à l'utiliser.

Avec WPForms, vous trouverez plusieurs façons d'ajouter du texte d'instruction à votre formulaire, que vous utilisiez un modèle de formulaire ou que vous construisiez à partir de zéro. Les nombreuses options de personnalisation vous permettent d'inclure du texte d'instruction dans différents styles pour répondre à vos besoins.

1. Champ de contenu

Une façon d'ajouter du texte d'instruction avec le constructeur de formulaires WPForms est d'utiliser le champ de contenu. Pour accéder au champ de contenu, vous aurez besoin de la licence WPForms Pro.

Dans notre exemple, nous avons fait glisser et déposé notre champ Contenu en haut du formulaire, où nous insérerons les instructions pour que les utilisateurs remplissent le formulaire.

Pour ce faire, cliquez simplement sur le champ pour ouvrir ses options de champ, puis entrez votre texte dans cette zone de texte qui apparaît à gauche.

Ici, dans l'éditeur de texte de notre exemple, nous avons écrit un message de bienvenue et une invite aux visiteurs pour qu'ils remplissent notre formulaire.

Vous pouvez ajuster la police, la taille, la couleur et d'autres éléments de style du texte que vous incluez dans le champ de contenu à l'aide des outils de mise en forme intégrés à l'éditeur de texte.

Vous pourriez trouver que vous souhaitez utiliser ce champ de formulaire à d'autres endroits de votre formulaire également, car c'est un moyen facile d'ajouter du texte personnalisable où vous le souhaitez.

En fait, le champ de contenu vous permet d'insérer des images en plus du texte d'instruction. C'est une capacité unique qui distingue WPForms de ses concurrents. Voir Gravity Forms vs Fluent Forms vs WPForms pour plus de détails.

2. Descriptions des champs

Une autre façon d'ajouter du texte d'instruction à votre formulaire est d'utiliser les descriptions de champ. La plupart des champs dans WPForms vous permettent de rédiger une petite description textuelle, qui est affichée avec le champ donné.

Pour ajouter une description à n'importe quel champ de formulaire, insérez d'abord le champ de texte dans votre formulaire, puis cliquez dessus pour ouvrir ses Options de champ. Maintenant, dans l'onglet Général des Options de champ, vous pouvez entrer vos instructions dans la zone de texte Description.

Nous ajoutons donc du texte d'instruction au champ E-mail en cliquant sur l'onglet Général et en écrivant les instructions dans la zone Description.

Ensuite, ce que vous avez écrit dans la Description apparaîtra sous forme de petit texte directement sous le champ sur le formulaire. Pensez-y comme à de petites notifications pour indiquer aux utilisateurs le type d'informations dont vous avez besoin.

Dans notre exemple ici, nous demandons aux visiteurs du site Web d'entrer leurs adresses e-mail, mais vous pouvez décider d'utiliser les paramètres d'autres champs de votre formulaire pour personnaliser votre texte d'instruction comme bon vous semble.

3. Texte d'espace réservé dans les champs

Vous pouvez également utiliser d'autres paramètres de champ pour inclure du texte d'instruction d'une manière différente.

Dans les paramètres Avancés du champ, vous avez la possibilité d'écrire un peu de Texte de remplacement.

Cela signifie que le texte que vous entrez ici agira comme un espace réservé dans le champ.

Depuis l'onglet Avancé sous les Options de champ, faites défiler jusqu'à la zone intitulée Texte de remplacement. Ensuite, le texte d'instruction que vous écrivez ici apparaîtra à l'intérieur de la zone de saisie du champ E-mail sur votre formulaire.

Étant donné que ce texte est placé dans la zone de saisie de l'e-mail du champ, votre espace est limité. Vous devez donc que le texte d'instruction ici soit quelque peu court.

Pour des instructions ou des invites plus longues, il est plus propre d'utiliser les Descriptions sous le champ, comme montré dans la méthode précédente.

4. Modification du texte dans le séparateur de section

La prochaine façon d'ajouter du texte d'instruction à votre formulaire est de modifier le texte dans le champ Séparateur de section. Vous le trouverez dans les Champs fantaisistes auxquels nous avons accédé dans le premier exemple.

Encore une fois, vous pouvez faire glisser ce champ pour le placer où vous le souhaitez sur votre formulaire.

Dans notre exemple ici, nous plaçons le champ dans la section inférieure du formulaire, entre la zone de commentaires et le bouton de soumission. Ce sera un message de conclusion aux visiteurs pour clore le contenu du formulaire.

Ensuite, vous utiliserez l'Étiquette et la Description ensemble pour créer votre texte d'instruction. Mais vous pouvez utiliser l'une ou l'autre de ces options pour styliser votre formulaire comme vous le souhaitez.

Comme l'étiquette du champ est affichée en gras, nous insérons le texte important ici dans notre exemple. Nous utiliserons le texte plus petit de la Description pour inclure un court message.

Comme nous l'avons mentionné, vous pouvez utiliser les différentes tailles de police pour styliser votre texte d'instruction comme vous le souhaitez, ou vous pouvez simplement décider de ne pas utiliser l'une des options.

Notez que la méthode que nous avons utilisée ici crée un style de texte similaire à celui que nous avons créé avec le premier exemple, en utilisant le champ Contenu. Cependant, il existe de nombreuses options supplémentaires pour la personnalisation des polices grâce à l'éditeur de texte du champ Contenu.

Cela dit, vous trouverez ce que vous préférez lorsque vous modifierez et personnaliserez votre propre formulaire pour répondre à vos besoins.

Ajouter du texte d'instruction à votre formulaire maintenant

Ensuite, utilisez le champ Contenu pour ajouter une image d'en-tête

Souvenez-vous que nous avons sauté le bouton Ajouter un média dans le champ Contenu de l'exemple un ? Il est temps de le revisiter et d'ajouter une image d'en-tête à votre formulaire. L'inclusion d'une image d'en-tête est un moyen créatif de personnaliser votre formulaire ou de promouvoir votre entreprise. Consultez ce tutoriel sur la façon d'utiliser le champ Contenu pour ajouter une image d'en-tête.

N'oubliez pas que vous pouvez également utiliser la logique conditionnelle pour améliorer la fonctionnalité du formulaire.

Et enfin, pour apprendre comment utiliser une bonne conception de formulaire pour augmenter les conversions.

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.