Résumé IA
Souhaitez-vous pré-remplir un champ de texte pour un utilisateur en fonction du lien sur lequel il clique ? Les liens peuvent être configurés pour envoyer des informations dans un champ afin que l'utilisateur puisse gagner une étape lors du remplissage de votre formulaire.
Ce tutoriel vous montrera comment exploiter les chaînes de requête pour pré-remplir un champ dans un formulaire.
Dans cet article
Remarque : Cherchez-vous à créer des chaînes de requête plus avancées pour WPForms ? Consultez notre tutoriel sur l'activation du pré-remplissage par URL pour en savoir plus sur la création de chaînes de requête. Si vous souhaitez pré-remplir des champs de formulaire avec des informations provenant d'un autre formulaire, consultez notre article sur le pré-remplissage de formulaires avec des chaînes de requête.
Qu'est-ce qu'une chaîne de requête ?
Une chaîne de requête est une partie d'une URL qui livre ou récupère des informations. Sur certains sites, par exemple, les chaînes de requête sont utilisées pour effectuer des recherches de publications ou de produits.
Si vous avez déjà remarqué une URL avec un point d'interrogation au milieu, vous avez vu une chaîne de requête en action. Une URL avec une chaîne de requête ressemblera à ceci :
http://example.com/plugin?name=wpforms
Dans cet exemple, nous vous montrerons comment utiliser une chaîne de requête pour insérer un mot ou une phrase spécifique dans un champ de formulaire.
Pour ce faire, nous allons créer un lien spécial sur lequel les utilisateurs pourront cliquer s'ils souhaitent en savoir plus sur « Événements et Fêtes ». L'URL de ce lien dirigera l'utilisateur vers notre formulaire « Demande d'informations supplémentaires ». La chaîne de requête que nous allons créer pré-remplira notre champ « Je souhaite en savoir plus sur : » avec « Événements et Fêtes ».
Remarque : Vous cherchez à pré-remplir la date du jour, ou le nom et l'e-mail d'un utilisateur connecté ? L'utilisation des balises intelligentes dans WPForms est un excellent moyen d'y parvenir.
Créer un nouveau formulaire
Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.
Si vous créez un nouveau formulaire, vous devrez lui donner un titre et choisir un modèle. Nous utilisons ici le modèle Simple Contact Form.
Pour cet exemple, nous allons créer un lien qui pré-remplira un champ Texte sur une seule ligne dans notre formulaire. Pour ajouter ce champ à votre formulaire, cliquez dessus ou faites-le glisser dans la zone de prévisualisation.
Ajout d'une balise intelligente de variable de chaîne de requête
Ensuite, nous devons configurer la valeur par défaut du champ Texte sur une seule ligne (que nous avons renommé « Je souhaite en savoir plus sur ») pour qu'il soit prêt à accepter des informations provenant d'une chaîne de requête.
Pour ce faire, cliquez sur le champ pour ouvrir l'écran Options du champ. À partir de là, vous devrez ouvrir l'onglet Avancé, faire défiler jusqu'à la boîte intitulée Valeur par défaut, puis cliquer sur Afficher les balises intelligentes.
Dans la liste déroulante, sélectionnez l'option appelée Variable de chaîne de requête.
Une fois que vous avez fait cette sélection, vous remarquerez que {query_var key=""} a été ajouté à la boîte Valeur par défaut. Entre ces guillemets vides, vous devez ajouter un nom (appelé clé) pour représenter ce champ. Cette clé sera utilisée plus tard dans notre chaîne de requête.
Nous allons donner à notre champ une clé appelée « contact-reason ». Il est important de noter que le nom que vous utilisez pour cette clé sera visible dans l'URL que nous configurerons plus tard, le nom doit donc être logique par rapport à l'objectif de la clé. Assurez-vous également que votre clé ne contient pas d'espaces – remplacez plutôt les espaces par un tiret « - » ou un tiret bas « _ ».
Publication de votre formulaire
Maintenant que vous avez configuré le formulaire, vous pouvez retourner à votre tableau de bord WordPress. Ensuite, vous pouvez soit créer une nouvelle page, soit modifier une page existante pour publier le formulaire que vous venez de créer.
Pour publier votre formulaire, cliquez d'abord sur le bouton + (plus) pour ajouter un nouveau bloc.
Pour localiser le bloc WPForms, vous pouvez rechercher « WPForms » ou ouvrir la catégorie Widgets. Ensuite, cliquez sur le bloc nommé WPForms.
Cela ajoutera le bloc WPForms à l'écran de l'éditeur. Ensuite, intégrez votre formulaire en le sélectionnant dans le menu déroulant Sélectionner un formulaire.
Maintenant que votre formulaire est intégré à la page, vous pouvez le publier et le consulter sur le front-end de votre site.
Création d'un lien avec une chaîne de requête
Ensuite, vous devrez créer une autre nouvelle page ou modifier une page existante où nous pourrons ajouter un lien vers ce formulaire.
Dans cet exemple, notre formulaire se trouve sur notre page de contact, donc un lien standard ressemblerait à ceci : https://example.com/contact.
Sur la nouvelle page, nous ajouterons du texte et lierons notre texte « Événements et Fêtes » à la page où se trouve notre formulaire (https://example.com/contact).
Actuellement, ce lien ouvrira simplement la page de contact. Ensuite, nous allons modifier ce lien pour qu'il contienne une chaîne de requête. Ce lien modifié ouvrira non seulement la page de contact, mais transmettra une chaîne de requête qui pré-remplira le champ de texte d'une seule ligne de notre formulaire :
https://example.com/contact?contact-reason=EventsandParties
Voici comment nous avons construit ce nouveau lien, par ordre de ses composants :
- Le lien normal (https://example.com/contact)
- Un point d'interrogation
- La clé que vous avez désignée précédemment (dans cet exemple, contact-reason)
- Un signe égal
- Le texte que vous souhaitez voir pré-rempli
En cliquant sur ce lien, notre champ de texte d'une seule ligne sera pré-rempli avec le texte qui suit le signe égal. Dans ce cas, le lien ci-dessus placera « EventsandParties » dans ce champ :
Pour ajouter des espaces au texte qui apparaît dans ce champ, placez simplement %20 partout où vous souhaitez qu'un espace apparaisse. Par exemple, le code https://example.com/contact?contact-reason=Events%20and%20Parties ajoutera un espace au texte pré-rempli résultant, qui se lit « Events and Parties » :
Remarque : Souhaitez-vous pré-remplir deux champs ou plus avec votre chaîne de requête ? Assurez-vous simplement d'ajouter un symbole « & » (esperluette) avant d'inclure une clé et un texte supplémentaires.
Par exemple : https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue
Pour utiliser certains autres symboles, par exemple « ( », « ) » ou « @ », vous devrez utiliser un outil tel que URL Encode/Decode, pour convertir ces symboles en leurs codes correspondants.
C'est tout ! Nous espérons que ce tutoriel vous a aidé à configurer des liens avec des chaînes de requête qui rempliront automatiquement un champ de texte dans un formulaire.
Ensuite, souhaitez-vous remplir dynamiquement des champs avec le contenu de votre site ? Assurez-vous de consulter notre guide sur les choix de champs dynamiques pour tous les détails.