Comment utiliser les chaînes de requête pour pré-remplir les champs de formulaire à partir d'un autre formulaire

Vous souhaitez simplifier l'expérience de remplissage de formulaires de vos utilisateurs sur WordPress ? Le pré-remplissage des champs de formulaire avec des informations provenant d'un formulaire précédent peut améliorer l'expérience utilisateur et garantir l'exactitude des données. Ce tutoriel vous guidera à travers le processus de passage d'informations entre les formulaires à l'aide de chaînes de requête pré-remplies.

Avant de passer aux étapes pour y parvenir, examinons un peu les chaînes de requête et pourquoi elles sont géniales !

Que sont les chaînes de requête ?

Considérez les chaînes de requête comme des messagers pratiques entre différentes parties de votre site Web. Ce sont des informations ajoutées à la fin d'une URL, aidant les pages Web à communiquer entre elles. Vous les verrez généralement après un point d'interrogation dans une adresse Web, suivi de paires clé-valeur séparées par des esperluettes.

Comment fonctionnent-elles ?

Imaginez que vous remplissez un formulaire sur un site Web. Lorsque vous cliquez sur Soumettre, le formulaire envoie vos données au serveur du site Web. Mais que faire si vous souhaitez transmettre ces données à un autre formulaire ou à une autre page sans obliger les utilisateurs à les saisir à nouveau ? C'est là qu'interviennent les chaînes de requête.

En ajoutant des chaînes de requête à l'URL de redirection après la soumission du formulaire, vous dites essentiellement : Hé, voici quelques informations du premier formulaire. Utilisez-les pour pré-remplir les champs du suivant ! C'est comme laisser une piste de miettes de pain que votre site Web peut suivre.

Pourquoi sont-elles bénéfiques ?

1. Gain de temps : Les utilisateurs apprécient la commodité. Les chaînes de requête leur évitent de retaper des informations qu'ils ont déjà fournies.
2. Exactitude : Avez-vous déjà fait une faute de frappe en remplissant un formulaire ? Avec les chaînes de requête, vous extrayez les données directement du premier formulaire, ce qui réduit les risques d'erreurs.
3. Conversions plus élevées : En simplifiant le processus de remplissage de formulaires, vous facilitez la réalisation d'actions par les utilisateurs sur votre site, ce qui entraîne des taux de conversion plus élevés.
4. Expérience transparente : Tout est fait pour que vos utilisateurs naviguent en toute fluidité. Le pré-remplissage des formulaires crée un parcours transparent sur votre site Web, améliorant l'expérience utilisateur.

En bref, les chaînes de requête sont comme des fils magiques reliant différentes parties de votre site Web. Elles transmettent des informations entre les formulaires, simplifiant la vie de vos utilisateurs et la vôtre. Moins de saisie et plus d'automatisation, tout le monde y gagne !

Cela étant dit, plongeons directement dans le vif du sujet !

Utilisation des chaînes de requête

Nous commencerons par créer deux formulaires distincts. Si vous avez besoin d'aide pour créer des formulaires, veuillez consulter cette documentation.

1) Création du formulaire de la page d'accueil

Tout d'abord, créez votre premier formulaire et ajoutez tous les champs dont vous avez besoin.

Cliquez sur Enregistrer pour l'instant, car nous reviendrons sur ce formulaire plus tard.

2) Création d'un formulaire supplémentaire

Dans cette étape, nous allons créer un autre formulaire qui recevra les informations pré-remplies. Ajoutez tous les champs nécessaires, en vous assurant qu'ils correspondent aux informations que vous souhaitez pré-remplir.

Ensuite, accédez à l'onglet Paramètres » Général et cliquez sur la flèche déroulante pour accéder aux options Avancées. Ici, vous pouvez activer le bouton pour Activer le pré-remplissage par URL.

3) Configuration de la redirection lors de la soumission du formulaire

Il est maintenant temps de tout rassembler. Modifions le formulaire que nous avons créé à la première étape, le formulaire de la page d'accueil. Dans le constructeur de formulaire, allez dans Paramètres » Confirmations.

Une fois ici, changez le Type de confirmation en Aller à l'URL (Redirection) et dans le champ URL de redirection de confirmation, copiez et collez cette URL.

http://example.com/quote/?wpf1036_1={field_id="1"}&wpf1036_2={field_id="2"}

Avec l'URL ci-dessus, il y aura certaines choses que vous devrez modifier. Par exemple :

1. Remplacez example.com par votre propre domaine.
2. Remplacez le mot quote par le nom de votre page.
3. Ajustez wpf1036_1 et wpf1036_2 pour correspondre à l'ID du formulaire de réception et aux ID de champs respectifs.
4. Mettez à jour {field_id="1"} avec l'ID du champ du formulaire de la page d'accueil pour le champ Nom.

Si vous avez besoin d'aide pour trouver vos numéros d'ID de champ spécifiques, consultez ce tutoriel.

Une fois que vous avez ajouté cela à votre URL de redirection de confirmation, cliquez sur Enregistrer sur le formulaire.

Maintenant, lorsque les utilisateurs verront le formulaire de la page d'accueil, ils pourront saisir leur nom et leur adresse e-mail, et lorsqu'ils cliqueront sur le bouton Envoyer , la page sera redirigée vers un autre formulaire qui pré-remplira automatiquement les champs Nom et Adresse e-mail avec les informations collectées à partir du formulaire sur votre page d'accueil.

Et c'est tout ce dont vous avez besoin pour utiliser une chaîne de requête afin de pré-remplir les champs de votre formulaire. Souhaitez-vous voir avec quels autres champs vous pouvez l'utiliser ? Consultez notre documentation sur Comment activer le paramètre de pré-remplissage par URL dans WPForms.

FAQ

Q : Pourquoi le deuxième formulaire n'est-il pas pré-rempli ?

R : Si vous constatez que vos champs ne sont pas pré-remplis, veuillez vérifier que sur votre deuxième formulaire, vous avez activé le paramètre.

Ouvrez le constructeur de formulaire du deuxième formulaire et accédez à l'onglet Paramètres » Général. Cliquez ensuite sur le menu déroulant Avancé en bas de votre écran et activez le bouton pour Activer le pré-remplissage par URL.

Q : Que faire si j'utilise un prénom et un nom pour mon champ de nom ?

R : Si vous n'utilisez pas le format Simple pour votre nom, vous listeriez simplement votre champ de nom dans l'URL comme ceci.

http://my-example-site.com/quote/?wpf1036_1_first={field_id="1|first"}&wpf1036_1_last={field_id="1|last"}&wpf1036_2={field_id="2"}

Il en va de même pour le champ Adresse. Votre format pour décomposer l'adresse apparaîtrait comme ceci.

&wpf1036_3_address1={field_id="3|address1"}&wpf1036_3_address2={field_id="3|address2"}&wpf1036_3_city={field_id="3|city"}&wpf1036_3_state={field_id="3|state"}&wpf1036_3_postal={field_id="3|postal"}