Souhaitez-vous remplir automatiquement 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 lorsqu'il remplit votre formulaire.
Ce tutoriel vous montrera comment exploiter les chaînes de requête pour remplir automatiquement un champ dans un formulaire.
Dans cet article
Note : Vous souhaitez 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 construction de chaînes de requête. Si vous souhaitez pré-remplir les champs d'un formulaire avec des informations provenant d'un autre formulaire, consultez notre article sur le pré-remplissage des 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 fournit ou récupère des informations. Sur certains sites, par exemple, les chaînes de requête sont utilisées pour rechercher des articles ou des 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 ressemble à ceci :
http://example.com/plugin?name=wpforms
Dans cet exemple, nous allons vous montrer 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 les "événements et fêtes". L'URL de ce lien renverra l'utilisateur à notre formulaire "Demande d'informations complémentaires". La chaîne de requête que nous créerons remplira automatiquement le champ "J'aimerais en savoir plus sur :" avec "Événements et fêtes".
Note : Cherchez-vous à remplir automatiquement la date du jour, ou le nom et l'email d'un utilisateur connecté ? L'utilisation de Smart Tags dans WPForms est un excellent moyen d'y parvenir.
Création d'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 éditer un formulaire existant pour accéder au générateur de formulaires.
Si vous créez un nouveau formulaire, vous devez lui donner un titre et choisir un modèle. Nous utilisons ici le modèle Simple Contact Form.
Dans cet exemple, nous allons créer un lien qui remplira automatiquement un champ de texte d'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 variable Query String Smart Tag
Ensuite, nous devons configurer la valeur par défaut du champ Single Line Text (que nous avons renommé "I'd like to know more about") 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 devez ouvrir l'onglet Avancé, faire défiler jusqu'à la case intitulée Valeur par défaut, puis cliquer sur Afficher les étiquettes intelligentes.
Dans la liste déroulante, sélectionnez l'option Variable de chaîne de requête.
Une fois cette sélection effectuée, vous remarquerez que {query_var key=""} a été ajouté à la Valeur par défaut box. 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 définirons plus tard, et que le nom doit donc être logique par rapport à l'objectif de la clé. Veillez également à ce que votre clé ne contienne aucun espace. Remplacez les espaces par un tiret "-" ou un trait de soulignement "_".
Publier votre formulaire
Maintenant que vous avez configuré le formulaire, vous pouvez retourner dans votre tableau de bord WordPress. Vous pouvez alors créer une nouvelle page ou 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. Cliquez ensuite sur le bloc nommé WPForms.
Cela ajoutera le bloc WPForms à l'écran de l'éditeur. Ensuite, allez de l'avant et intégrez votre formulaire en le sélectionnant dans le menu déroulant Select a Form.
Maintenant que votre formulaire est intégré à la page, vous pouvez le publier et le visiter sur le frontend de votre site.
Création d'un lien avec une chaîne de requête
Ensuite, vous devrez créer une nouvelle page ou modifier une page existante pour y ajouter un lien vers ce formulaire.
Dans cet exemple, notre formulaire se trouve sur notre page de contact, de sorte qu'un lien standard ressemblerait à quelque chose comme : 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).
Pour l'instant, ce lien ouvre simplement la page Contact. Ensuite, nous allons modifier ce lien pour qu'il contienne une chaîne de requête. Ce lien modifié n'ouvrira pas seulement la page de contact, mais transmettra une chaîne de requête qui remplira automatiquement le champ Single Line Text de notre formulaire :
https://example.com/contact?contact-reason=EventsandParties
Voici comment nous avons construit ce nouveau lien, dans l'ordre de ses composantes :
- 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 d'égalité
- Le texte à remplir automatiquement
En cliquant sur ce lien, notre champ de texte à ligne unique se remplit automatiquement avec tout texte situé après 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, il suffit de placer %20 à l'endroit 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 de remplissage automatique résultant, qui se lit "Événements et fêtes" :
Remarque : Vous souhaitez remplir automatiquement deux champs ou plus avec votre chaîne de requête ? Veillez à ajouter le 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.
Voilà, c'est fait ! Nous espérons que ce tutoriel vous a aidé à mettre en place des liens avec des chaînes de requête qui rempliront automatiquement un champ de texte dans un formulaire.
Ensuite, souhaitez-vous remplir dynamiquement les champs avec le contenu de votre site ? N'hésitez pas à consulter notre guide sur les choix de champs dynamiques pour en savoir plus.