Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment utiliser la population de champs dynamiques dans WordPress pour remplir automatiquement les formulaires

Vous souhaitez utiliser la population de champs dynamiques dans WordPress pour remplir automatiquement des formulaires sur votre site ?

Le remplissage dynamique des champs vous permet de remplir automatiquement les champs du formulaire en fonction de la sélection de l’utilisateur, des chaînes de requête ou du type de champ. Cela rend vos formulaires intelligents, fait gagner du temps aux utilisateurs/utilisatrices, offre un meilleur compte rendu à l’utilisateur/utilisatrice et améliore finalement le taux de remplissage des formulaires.

Dans cet article, nous allons vous afficher comment utiliser la population de champs dynamiques dans WordPress pour remplir automatiquement les formulaires.

Automatically fill form fields in WordPress with Dynamic field population

Qu’est-ce que la population dynamique de champ ?

Le remplissage dynamique des champs est une technique qui permet aux propriétaires de sites web de remplir automatiquement les champs d’un formulaire en fonction de la sélection de l’utilisateur, du type de formulaire, des chaînes de requête ou de la logique conditionnelle.

Par exemple, un magasin e-commerce peut créer un formulaire où le champ produit du formulaire est alimenté dynamiquement à l’aide de produits existants dans WooCommerce ou tout autre logiciel e-commerce.

De même, un site immobilier peut remplir automatiquement les champs « annonces », « agents » et « type de propriété » dans ses formulaires de prise de rendez-vous et de génération de prospects.

Les utilisateurs/utilisatrices et développeurs/développeuses avancés peuvent également utiliser les paramètres URL pour remplir dynamiquement les champs du formulaire à l’aide de liens intelligents provenant de lettres d’information par e-mail ou d’autres interactions sur le site.

Ceci étant dit, voyons comment utiliser facilement la population des champs dynamiques dans WordPress.

Comment utiliser la population des champs dynamiques dans WordPress

Tout d’abord, vous devez installer et activer l’extension WPForms. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

WPForms est la meilleure extension de formulaire de contact WordPress sur le marché. Il vous permet de créer facilement des formulaires en ligne à l’aide d’un simple outil de glisser-déposer.

Il est également livré avec la population de champs dynamiques, la logique conditionnelle et les champs de formulaire avancés. Ensemble, ces fonctionnalités vous permettent de créer des formulaires plus intelligents et plus interactifs sur votre site.

Vous pouvez consulter notre Avis terminé sur WPForms pour plus de détails.

Après avoir activé l’extension, vous devez vous rendre sur la page WPForms  » Réglages pour saisir votre clé de licence. Vous pouvez trouver cette information sous votre compte sur le site de WPForms.

WPForms License key

Ensuite, vous devez visiter WPForms  » Ajouter nouveau pour créer votre premier formulaire.

Il vous sera demandé de donner un nom à votre formulaire, puis de sélectionner un modèle pour commencer.

Il existe de nombreux modèles de formulaires parmi lesquels choisir. Pour ce tutoriel, nous utiliserons le modèle Billing / Order Form.

Select order form template

WPForms chargera désormais votre formulaire avec des champs présélectionnés. Vous pouvez cliquer pour modifier les champs du formulaire ou utiliser la fonctionnalité de glisser-déposer pour les déplacer vers le haut ou vers le bas. Vous pouvez également ajouter et supprimer des champs de formulaire en un clic.

Ajoutons un nouveau champ de formulaire pour le remplir avec des choix dynamiques.

Vous pouvez ajouter un champ de type liste déroulante, choix multiple ou case à cocher à votre formulaire pour utiliser des options de choix dynamiques. Il vous suffit de cliquer sur un champ dans la colonne de gauche et de le faire glisser pour l’ajouter à votre formulaire.

Add form fields

Ensuite, vous pouvez cliquer pour modifier les champs du formulaire.

Il suffit de passer au menu Avancé dans la colonne de gauche.

Switch to advanced tab

À partir de là, vous devez sélectionner « Choix dynamiques ».

WPForms supporte les types de publication et les taxonomies inscrits sur votre site WordPress.

Pour les besoins de ce tutoriel, nous sélectionnerons « Type de publication » comme Sélectionné dynamique et « Produits » comme Source de type de publication dynamique.

Select dynamic choices

WPForms chargera et affichera désormais automatiquement les champs dans la prévisualisation du formulaire.

Pour intégrer le formulaire, il suffit de cliquer sur le bouton « Contenu embarqué » en haut du Constructeur de formulaires. Vous pouvez alors sélectionner une page existante pour y intégrer le formulaire ou créer une nouvelle page.

Embed WPForms

Vous pouvez également utiliser le bloc WPForms pour ajouter le formulaire à une publication ou une page WordPress. Allez-y et modifiez la publication ou la page où vous souhaitez ajouter le formulaire.

Une fois que vous êtes dans l’éditeur de contenu de WordPress, ajoutez le bloc WPForms à la zone d’édition de votre publication. Après cela, il suffit de sélectionner le formulaire que vous avez créé plus tôt dans le menu déroulant.

Adding WPForms block in WordPress

Vous pouvez maintenant enregistrer votre publication ou votre page.

Ensuite, visitez votre site pour voir votre formulaire avec des valeurs de champ dynamiques en action.

WPForm preview

Remplir automatiquement les champs d’un formulaire à l’aide de paramètres d’URL

WPForms vous permet également de remplir dynamiquement les champs du formulaire en utilisant des paramètres d’URL. Cette fonctionnalité vous permet de créer des liens intelligents qui transmettent automatiquement les informations au formulaire et les remplissent pour que vos utilisateurs/utilisatrices les envoient.

Tout d’abord, vous devez créer un nouveau formulaire ou modifier un formulaire existant dans WPForms. Une fois que vous avez fini de créer votre formulaire, passez à l’onglet Réglages dans la colonne de gauche, puis sélectionnez l’onglet  » Général « .

Dans cet écran, vous devez cliquer sur le permuter de l’option « Activer le pré-remplissage par URL ».

Enable prefill by URL option

Vous pouvez maintenant enregistrer votre formulaire et quitter le Constructeur de formulaires. Votre formulaire est maintenant prêt à remplir dynamiquement les champs à l’aide de paramètres URL.

Création de liens avec des paramètres d’URL

WPForms accepte les champs de formulaires dynamiques transmis par des paramètres d’URL dans un format spécifique.

https://example.com/contact/?wpf15_1=value

Voyons cela en détail.

  • La partie de l’URL qui précède le point d’interrogation ‘?’ est l’URL de la page qui contient votre formulaire. Par exemple, votre page de formulaire de contact.
  • ?wpf – Indique le début des paramètres du champ du formulaire WPForms.
  • 15 – Est l’ID de votre formulaire
  • _1 – Est l’ID du champ
  • =valeur – = Indique le début de la valeur que vous souhaitez transmettre au formulaire, suivi de la valeur réelle du champ.

Voici un exemple d’URL dans laquelle nous transmettons un titre de produit comme champ de texte à un formulaire de Retour.

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase
Adding URL to your post

Notez que nous avons utilisé %20 pour indiquer les espaces entre les mots dans le titre du produit.

Trouver les ID des formulaires et des champs dans WPForms

Afin de commander les paramètres de l’URL, vous devez connaître les ID du formulaire et du champ. Voici comment trouver ces valeurs.

Il suffit de modifier votre formulaire pour que l’ID du formulaire apparaisse dans la barre d’adresse de votre navigateur.

Finding form ID in WPForms

De même, afin de trouver l’ID du champ de formulaire, il suffit de cliquer pour le modifier.

Les propriétés du champ de formulaire apparaissent dans la colonne de gauche, ainsi que l’ID du champ en haut.

Finding the form field ID

Et si vous vouliez transmettre une valeur à un sous-champ ?

Il suffit d’ajouter l’identifiant du sous-champ après l’ID du champ dans votre URL, comme suit :

https://example.com/contact/?wpf15_3_city=london

Pour plus de détails, vous pouvez consulter la documentation du développeur/développeuse WPForms, qui affiche d’autres exemples d’utilisation de différents paramètres pour tous les types de champs de formulaire.

Vous pouvez désormais utiliser cette fonctionnalité en combinaison avec votre logiciel de CRM ou votre service de marketing e-mail pour envoyer des liens de formulaires intelligents à vos utilisateurs/utilisatrices. La plupart des plateformes de marketing disposent de leurs propres identifiants MERGE personnalisés que vous pouvez ajouter dans l’URL intelligente pour remplir automatiquement les informations personnelles dans le formulaire.

Vous pouvez également utiliser la fonctionnalité de population de champs dynamiques avec d’autres extensions de formulaires comme Formidable Forms, Gravity Forms, ou d’autres. Cependant, nous recommandons d’utiliser WPForms parce qu’il rend tout le processus facile, et nous le connaissons bien parce que nous avons construit le produit.

Pour des détails terminés, Veuillez consulter notre comparaison entre WPForms vs Formidable Forms vs Gravity Forms.

Nous espérons que cet article vous a aidé à apprendre comment utiliser la population de champs dynamiques dans WordPress pour remplir automatiquement les formulaires. Vous pouvez également consulter notre article sur la façon de suivre et de réduire l’abandon des formulaires dans WordPress et nos choix d’experts pour le meilleur logiciel de discussion en direct pour les petites entreprises.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

3 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. David R

    Hi, Great article!

    I was wondering if this will work with a QR code. In other words, can I create a QRcode from this URL with all form field parameters, and when scanned, will it direct the user to the page and fill in all fields?

    Thank you.

    • WPBeginner Support

      As long as it keeps the URL parameters it should work :)

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.