Résumé IA
Vous cherchez à rationaliser l'expérience utilisateur sur votre site Web avec le paramètre WPForms Activer le pré-remplissage par URL ? Pré-remplir les champs de formulaire en fonction des interactions précédentes ? Exploiter la puissance des chaînes de requête pour remplir automatiquement les champs de formulaire d'un formulaire à l'autre peut considérablement améliorer la commodité et l'efficacité de l'utilisateur.
Imaginez un scénario où un utilisateur a déjà fourni certaines informations sur un formulaire, et vous souhaitez reporter ces données de manière transparente sur un autre formulaire sans lui demander de les ressaisir. En utilisant les chaînes de requête, vous pouvez y parvenir précisément, créant ainsi un parcours plus fluide et plus personnalisé pour vos visiteurs.
Pour un tutoriel étape par étape de cette fonctionnalité en action, qui comprend la création des 2 formulaires et le passage d'informations d'un formulaire à l'autre, consultez cet article.
Dans ce tutoriel, nous allons nous concentrer davantage sur l'explication des types de champs et de leur apparence dans les chaînes de requête afin de vous permettre de créer vos formulaires pré-remplis.
Activation du pré-remplissage par URL
Avant de pouvoir commencer à pré-remplir nos champs de formulaire, nous devons d'abord activer cette option dans notre formulaire pour accepter ces paramètres pré-remplis d'un autre formulaire.
Pour ce faire, vous devrez d'abord créer un nouveau formulaire ou modifier l'un de vos formulaires. Ensuite, accédez à Paramètres » Général dans le constructeur de formulaires et, dans les options Avancées, activez l'option intitulée Activer le pré-remplissage par URL.
Assemblage de l'URL
Ensuite, vous devrez construire une URL avec une chaîne de requête, en utilisant des paramètres GET pour identifier un champ spécifique et inclure la valeur correspondante. Fait intéressant, le type de champ devient non pertinent dans ce processus. Quel que soit le type de champ, toutes les chaînes de requête pour activer le pré-remplissage par URL dans WPForms adhèrent à une structure cohérente. Par exemple, considérez l'URL suivante avec le format fondamental de la chaîne de requête :
http://test.com?wpf20_1_subfield=value
?wpf: Marque le début d'une chaîne de requête pour le paramètre de pré-remplissage par URL de WPForms.- ID du formulaire : Identifie le formulaire cible (dans l'URL fournie, l'ID du formulaire est 20).
- ID du champ : Spécifie le champ souhaité dans le formulaire (dans l'URL donnée, l'ID du champ est 1).
- Identifiant de sous-champ (facultatif) : Utilisé uniquement lorsque vous ciblez un sous-champ, tel que le sous-champ Ville dans un champ Adresse (dans l'URL d'exemple, il est simplement étiqueté « subfield »).
=(Signe égal) : Indique le début de la valeur.- Valeur : Représente la valeur souhaitée à ajouter ou à sélectionner pour un champ. Les espaces doivent être remplacés par %20.
Utilisation du paramètre de pré-remplissage
Dans le lien du tutoriel ci-dessus, l'idée est que votre visiteur voie le premier formulaire et remplisse quelques informations de base. Ensuite, transmettez ces informations à un autre formulaire avec le bouton Soumettre.
Pour ce faire, rendez-vous dans Paramètres » Confirmations dans le constructeur de formulaires. Ensuite, sélectionnez Accéder à l'URL (Redirection) dans le menu déroulant Type de confirmation. Ajoutez ensuite la chaîne de requête appropriée wpf{formID}_{fieldID} à l'URL de redirection (voir les exemples ci-dessous).
Un exemple consiste à ajouter cette URL à l'URL de redirection de confirmation. http://mondomaine.com/contact?wpf20_1=Événements%20et%20Fêtes
Dans cet exemple, 20 est l'ID du formulaire et 1 est l'ID du champ. La chaîne de requête doit faire référence à l'ID du formulaire et du champ au format wpf{formID}_{fieldID} pour que le champ soit pré-rempli (les clés de requête personnalisées comme raison-contact ne rempliront pas les champs WPForms).
Utilisation de la logique conditionnelle avec ce paramètre
Lorsque vous utilisez la logique conditionnelle avec le paramètre de pré-remplissage, la fonctionnalité fonctionnera de manière transparente. Les champs conditionnels continueront de s'afficher ou de se masquer en fonction des valeurs renseignées via le pré-remplissage. Il est important de noter que la logique conditionnelle est appliquée après que les champs ont été remplis dynamiquement, garantissant ainsi que vos formulaires continuent de fonctionner comme prévu.
Exemples de chaînes de requête pour des champs spécifiques
Pour les utilisateurs plus avancés, ce tableau ci-dessous propose des exemples illustrant comment configurer les paramètres GET pour chaque type de champ. De plus, si un champ offre diverses options de formatage, des exemples spécifiques pour ces alternatives sont également inclus.
Texte sur une seule ligne
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_1=texte%20de%20toute%20longueur |
Paragraphe
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_2=texte%20de%20toute%20longueur |
Liste déroulante
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_3=Deuxième%20Choix |
| Afficher les valeurs activé | ?wpf771_4=choix1 |
| Choix dynamiques : Type de publication | ?wpf771_5=123( 123 est l'ID du type de publication) |
| Choix dynamiques : Taxonomie | ?wpf771_6=12( 12 est l'ID de la taxonomie) |
| Valeur séparée par des barres verticales (PSV) | ?wpf135_3={field_id="9|valeur_choix"} |
Choix multiples
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_7=Deuxième%20Choix |
| Afficher les valeurs activé | ?wpf771_8=choix2 |
| Choix d'image | ?wpf771_9=Deuxième%20Choix?wpf771_9=choix2(Dépend de l'option Afficher les valeurs) |
| Choix dynamiques : Type de publication | ?wpf771_10=123( 123 est l'ID du type de publication) |
| Choix dynamiques : Taxonomie | ?wpf771_11=12( 12 est l'ID de la taxonomie) |
| Valeur séparée par des barres verticales (PSV) | ?wpf135_3={field_id="9|valeur_choix"} |
Cases à cocher
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_12=Deuxième%20Choix?wpf771_12[]=Deuxième%20Choix?wpf771_12[]=Deuxième%20Choix&wpf771_12[]=Troisième%20Choix |
| Afficher les valeurs activé | ?wpf771_13=case à cocher2 |
| Choix d'image | ?wpf771_14=Deuxième%20Choix?wpf771_14=case à cocher2?wpf771_14[]=Deuxième%20Choix&wpf771_14[]=Troisième%20Choix(Dépend de l'option Afficher les valeurs) |
| Choix dynamiques : Type de publication | ?wpf771_15=123?wpf771_15[]=124( 123 est l'ID du type de publication) |
| Choix dynamiques : Taxonomie | ?wpf771_16=12?wpf771_16[]=13( 12 est l'ID de la taxonomie) |
| Valeur séparée par des barres verticales (PSV) | ?wpf135_3={field_id="9|valeur_choix"} |
Numérique
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_17=2018 |
Nom
| Format du champ / Variations | Paramètres GET |
|---|---|
| Simple | ?wpf771_18=nom |
| Prénom Nom | ?wpf771_18_first=prénom&wpf771_18_last=nom |
| Prénom DeuxièmePrénom Nom | ?wpf771_19_first=prénom&wpf771_19_last=nom&wpf771_19_middle=deuxième%20prénom |
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | [email protected] |
| Confirmation activée | [email protected] |
Accord RGPD
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. L'utilisateur doit cliquer manuellement sur la case à cocher pour accepter. |
Site Web / URL
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_23=https://google.comCertains serveurs peuvent bloquer les requêtes qui incluent une URL comme paramètre. Assurez-vous de tester ! |
Adresse
| Format du champ / Variations | Paramètres GET |
|---|---|
| États-Unis | ?wpf771_24_address1=Adresse%20ligne%201&wpf771_24_address2=Adresse%20ligne%202&wpf771_24_city=Del%20Mar&wpf771_24_state=CA&wpf771_24_postal=12345 |
| International | ?wpf771_25_address1=Adresse%20ligne%201&wpf771_25_address2=Adresse%20ligne%202&wpf771_25_city=Kharkiv&wpf771_25_state=Oblast%20de%20Kharkiv&wpf771_25_postal=61000&wpf771_25_country=Ukraine |
Mot de passe
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. L'utilisateur doit saisir la ou les valeurs manuellement. |
Téléphone
| Format du champ / Variations | Paramètres GET |
|---|---|
| US/International | ?wpf771_27=5555551234 |
Date / Heure
| Format du champ / Variations | Paramètres GET |
|---|---|
| Format : Date, Type : Sélecteur de date | ?wpf771_28_date=11/22/2018 |
| Date, Type : Liste déroulante de dates (sous-champ) | ?wpf771_29_date_m=11&wpf771_29_date_d=22&wpf771_29_date_y=2018 |
| Heure, Format : 12 H (sous-champ) | ?wpf771_30_time=6:00am |
| Heure, Format : 12 H (sous-champ) | ?wpf771_31_time=13:00 |
Format : date-heure |
?wpf771_32_date=11/22/2018&wpf771_32_time=13:15?wpf771_32_date_m=11&wpf771_32_date_d=22&wpf771_32_date_y=2018&wpf771_32_time=6:30am |
Caché
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_33=valeur%20cachée |
HTML
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. Ce champ n'est pas modifiable par l'utilisateur. |
Téléchargement de fichier
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. Mesures de sécurité. |
Saut de page
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. Ce champ n'est pas modifiable par l'utilisateur. |
Séparateur de section
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. Ce champ n'est pas modifiable par l'utilisateur. |
Évaluation
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_38=4Mettra en surbrillance 4/5 ou 4/10, selon l'échelle de notation. Un exemple serait 4/3. |
Captcha
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. L'utilisateur doit compléter manuellement le captcha (Math ou Question et Réponse). |
Signature
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. L'utilisateur doit signer manuellement. |
Échelle de Likert
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_41_r2_c1=1?wpf771_41r1_c2[]=1&wpf771_41_r3_c1[]=1r1 indique la première ligne, c2 indique la deuxième colonne, etc.Prend en charge les échelles de notation sur une ou plusieurs lignes & les réponses multiples. |
Net Promoter Score
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_42=4Sélectionnera la valeur 4 de 0 à 10. |
Coupon de paiement
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_1=code%20coupon |
Article unique
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_43=10Ne prend en charge que le type d'élément « Défini par l'utilisateur ». |
Plusieurs articles
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_44=Deuxième%20Article(choix de texte et d'image) |
Éléments de liste déroulante
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | ?wpf771_45=Deuxième%20Article |
Carte de crédit
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. L'utilisateur doit saisir manuellement les données de la carte de crédit. |
Total
| Format du champ / Variations | Paramètres GET |
|---|---|
| – | Non pris en charge. La valeur est calculée à l'aide de JavaScript au chargement de la page. |
Champs de paiement (cases à cocher, articles multiples, articles déroulants) avec quantités
| Format du champ / Variations | Paramètres GET |
|---|---|
| Standard | ?wpf938_7={field_id="8|value_choice"} |
| Avec quantités | ?wpf938_7={field_id="8|value_choice"}&wpq938_7={field_id="8|quantity"} |
Articles de référence
- Pour savoir comment localiser un ID de formulaire ou un ID de champ, veuillez consulter notre tutoriel.
- En règle générale, la longueur maximale d'une URL est de 2 000 caractères.
FAQ
Q : Comment puis-je utiliser cela pour les sous-libellés ?
R : Lorsque vous utilisez ceci pour pré-remplir un champ Nom ou Adresse qui pourrait avoir plusieurs sous-champs, nous aimerions partager un exemple avec vous.
?wpf1036_1|first={field_id="1|first"}&wpf1036_1|last={field_id="1|last"}&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"}
Et c'est tout ! Pour un autre exemple spécifique de ceci en action, consultez ce tutoriel sur Comment utiliser les chaînes de requête pour pré-remplir les champs de formulaire à partir d'un autre formulaire. Pour d'autres exemples, veuillez consulter notre article sur Comment utiliser les chaînes de requête pour pré-remplir automatiquement un champ de texte.