Comment utiliser le remplissage dynamique de champs dans WordPress pour pré-remplir les formulaires

Nous avons vu cela se produire souvent : quelqu'un commence à remplir un formulaire sur votre site WordPress, puis l'abandonne à mi-chemin. Peut-être que le formulaire demande des détails qu'ils ont déjà fournis, ou peut-être qu'il semble tout simplement trop long.

C'est là que le remplissage dynamique des champs peut vous aider. Il remplit automatiquement les champs de formulaire en utilisant les informations que vous possédez déjà, comme le nom d'un visiteur à partir de son profil ou des données transmises via un lien.

Après avoir testé plusieurs plugins, WPForms s'impose comme l'option la plus efficace. Nous l'apprécions beaucoup ici chez WPBeginner car il rend la création de formulaires intelligents et conviviaux incroyablement facile.

Dans ce guide, nous vous expliquerons comment configurer le remplissage dynamique des champs dans WordPress à l'aide de WPForms. De cette façon, vous pouvez améliorer l'expérience utilisateur tout en collectant les données dont vous avez besoin.

Qu'est-ce que le remplissage dynamique des champs ?

Le remplissage dynamique des champs vous permet de remplir automatiquement les champs de formulaire en fonction des choix de l'utilisateur, de la page spécifique qu'il consulte, des liens sur lesquels il a cliqué (chaînes de requête) ou des informations de son profil connecté.

Par exemple, un magasin de commerce électronique peut créer un formulaire où le champ produit dans le formulaire est rempli dynamiquement à l'aide des produits existants dans WooCommerce ou tout autre logiciel de commerce électronique.

De même, un site Web immobilier peut automatiquement remplir les champs de listes, d'agents et de types de propriétés dans ses formulaires de rendez-vous et de génération de prospects.

Les utilisateurs avancés et les développeurs peuvent également utiliser les paramètres d'URL pour remplir dynamiquement les champs de formulaire à l'aide de liens intelligents provenant de newsletters par e-mail ou d'autres interactions sur le site Web.

Dans cette optique, nous allons vous montrer comment utiliser facilement le remplissage dynamique de champs dans WordPress. Voici un bref aperçu de toutes les étapes que nous couvrirons dans ce guide :

Commençons !

Méthode 1. Remplir automatiquement les champs de formulaire à l'aide du remplissage dynamique des champs

Tout d'abord, vous devez installer et activer le plugin WPForms. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

WPForms est le meilleur plugin de formulaire de contact WordPress du 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 doté du remplissage dynamique de champs, de la logique conditionnelle et de champs de formulaire avancés. Ensemble, ces fonctionnalités vous permettent de créer des formulaires plus intelligents et plus interactifs sur votre site Web.

Chez WPBeginner, nous utilisons WPForms pour créer notre formulaire de contact. Nous en avons une excellente expérience, et vous pouvez consulter notre avis complet sur WPForms pour plus d'informations.

Tout d'abord, rendons-nous sur le site web de WPForms et créons un compte. Cliquez simplement sur « Obtenir WPForms maintenant », choisissez le plan que vous souhaitez et terminez l'inscription.

Une fois inscrit, vous arriverez sur votre page de compte WPForms. C'est ici que vous pouvez télécharger le plugin et récupérer votre clé de licence. Vous voudrez garder cet onglet ouvert pour la prochaine étape.

Ajoutons maintenant WPForms à votre site.

Accédez à votre tableau de bord WordPress, cliquez sur Plugins » Ajouter un nouveau plugin.

Sur l'écran suivant, recherchez « WPForms ».

Lorsqu'il apparaît, cliquez sur Installer maintenant, puis sur Activer pour l'activer correctement.

Après cela, rendez-vous sur WPForms » Paramètres.

Collez votre clé de licence dans la boîte, cliquez sur « Vérifier la clé ».

WPForms est maintenant configuré et prêt. À partir d'ici, vous pouvez commencer à créer votre formulaire WordPress et configurer le remplissage dynamique des champs pour pré-remplir vos champs.

Pour ce faire, visitez WPForms » Ajouter un nouveau pour créer votre premier formulaire.

Il vous sera demandé de donner un nom à votre formulaire, puis de choisir comment vous souhaitez le créer.

Avec WPForms, vous pouvez commencer avec une toile vierge, utiliser le constructeur de formulaires IA, ou sélectionner un modèle prédéfini. Si vous souhaitez utiliser l'IA de WPForms, il vous suffit d'écrire une invite, et l'outil générera le formulaire pour vous.

Pour ce tutoriel, cependant, nous utiliserons un modèle.

WPForms est livré avec plus de 2 000 modèles parmi lesquels choisir. Pour affiner le choix, vous pouvez utiliser la barre de recherche et taper « commande ».

Une fois que vous avez trouvé le modèle que vous souhaitez utiliser, survolez-le simplement et cliquez sur « Utiliser le modèle ». Par exemple, nous utiliserons le modèle « Formulaire de facturation / commande ».

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

Ajoutons un nouveau champ de formulaire qui liste automatiquement les options du contenu de votre site Web (comme les produits ou les articles).

Vous pouvez ajouter un champ déroulant, à choix multiples ou à cases à cocher à votre formulaire pour utiliser des options de choix dynamiques. Cliquez simplement sur un champ de la colonne de gauche et faites-le glisser pour l'ajouter à votre formulaire.

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

Basculez simplement vers le menu Avancé depuis la colonne de gauche.

À partir d'ici, vous devez sélectionner « Choix dynamiques ».

WPForms prend en charge les types de publication et les taxonomies enregistrés sur votre site WordPress.

Pour ce tutoriel, nous sélectionnerons « Type de publication » comme « Choix dynamiques » et « Produits » comme « Source de publication dynamique ».

Si vous souhaitez remplir automatiquement le nom ou l'e-mail d'un utilisateur lorsqu'il est connecté, ajoutez simplement un champ « Ligne de texte unique », modifiez l'étiquette et ouvrez Avancé » Valeur par défaut.

Dans l'onglet, vous pouvez choisir {Prénom_Utilisateur} ou {Email_Utilisateur_Connecté} dans la liste « Balises intelligentes ».

WPForms va maintenant charger et afficher automatiquement les champs dans l'aperçu du formulaire.

Pour intégrer le formulaire, cliquez simplement sur le bouton « Intégrer » en haut du constructeur de formulaire. À partir de là, vous pouvez sélectionner une page existante pour intégrer le formulaire ou en créer une nouvelle.

Alternativement, vous pouvez utiliser le bloc WPForms pour ajouter le formulaire à un article ou une page WordPress. Allez-y et modifiez l'article ou la page où vous souhaitez ajouter le formulaire.

Une fois dans l'éditeur de contenu WordPress, vous pouvez ajouter le bloc WPForms à votre zone d'édition d'article. Ensuite, sélectionnez simplement le formulaire que vous avez créé précédemment dans le menu déroulant.

Vous pouvez maintenant enregistrer votre article ou votre page.

Ensuite, vous voudrez peut-être visiter votre site Web pour voir votre formulaire avec des valeurs de champ dynamiques en action.

Méthode 2. Remplir automatiquement les champs de formulaire à l'aide de paramètres d'URL

WPForms vous permet également de remplir dynamiquement les champs de formulaire à l'aide de paramètres d'URL.

Cette fonctionnalité vous permet de créer des liens intelligents qui transmettent automatiquement des informations au formulaire. C'est parfait pour les newsletters par e-mail, où vous pouvez pré-remplir un champ en fonction du lien sur lequel l'abonné a cliqué.

Tout d'abord, vous devez créer un nouveau formulaire ou en modifier un existant dans WPForms. Pour plus de détails, consultez notre guide sur comment créer un formulaire de contact dans WordPress.

Une fois que vous avez terminé de créer votre formulaire, vous voudrez passer à l'onglet « Paramètres » dans la colonne de gauche, puis sélectionner l'onglet « Général ».

Sur cet écran, vous devez cliquer sur le commutateur pour l'option « Activer le pré-remplissage par URL ».

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 d'URL.

Créer des liens avec des paramètres d'URL

WPForms accepte les champs de formulaire dynamiques passés via des paramètres d'URL dans un format spécifique.

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

Décomposons le code caché de ce lien :

• ? – Le point d'interrogation indique au navigateur que le lien réel est terminé et que les « données spéciales » commencent.
• wpf – Ce préfixe indique à WordPress que les données appartiennent à WPForms.
• 15 – C'est le numéro d'identification spécifique du formulaire que vous ciblez.
• _1 – C'est le numéro d'identification du champ spécifique que vous souhaitez remplir.
• =valeur – Tout ce qui suit le signe égal est la donnée qui apparaîtra dans le champ du formulaire.

Voici un exemple d'une URL où nous passons un titre de produit comme champ de texte à un formulaire de commentaires.

https://example.com/contact/?wpf15_2=Vintage%20Flower%20Vase

Ici, notez comment nous avons utilisé %20 pour indiquer les espaces entre les mots dans le titre du produit.

Trouver les ID de formulaire et de champ dans WPForms

Afin de créer des paramètres d'URL, vous devrez connaître les ID du formulaire et du champ.

Pour trouver ces valeurs, modifiez simplement votre formulaire, et vous verrez l'ID du formulaire dans la barre d'adresse de votre navigateur.

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

Vous verrez les propriétés du champ du formulaire dans la colonne de gauche, ainsi que l'ID du champ en haut.

Maintenant, que se passerait-il si vous vouliez transmettre une valeur à un sous-champ ?

Ajoutez simplement l'identifiant du sous-champ après l'ID du champ dans votre URL, comme ceci :

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

Pour plus de détails, vous pouvez consulter la documentation développeur de WPForms, qui présente d'autres exemples d'utilisation de différents paramètres pour tous les types de champs de formulaire.

Vous pouvez maintenant utiliser cette fonctionnalité en combinaison avec votre logiciel CRM ou votre service de marketing par e-mail pour envoyer des liens de formulaire intelligents à vos utilisateurs. La plupart des plateformes de marketing disposent de leurs propres balises de fusion personnalisées que vous pouvez ajouter dans l'URL intelligente pour remplir automatiquement les informations personnelles dans le formulaire.

Astuce bonus : Ajouter l'autocomplétion pour les champs d'adresse

Une autre façon d'améliorer vos formulaires est d'ajouter des champs d'adresse avec saisie semi-automatique dans WordPress. Cette fonctionnalité permet aux utilisateurs de saisir plus rapidement et plus facilement leurs adresses tout en réduisant les erreurs.

Par exemple, dans une boutique en ligne, l'autocomplétion peut accélérer le processus de paiement.

Lorsque les clients commencent à taper leur adresse, des options suggérées apparaissent en fonction de leur emplacement actuel. Ces suggestions sont souvent alimentées par les API Google Places et Google Maps.

En aidant les acheteurs à finaliser leur paiement rapidement, vous pouvez augmenter vos ventes et encourager les clients fidèles.

Pour en savoir plus, vous pouvez consulter notre guide sur comment configurer la saisie semi-automatique pour les champs d'adresse dans WordPress.

FAQ : Remplissage dynamique de champs dans WordPress pour remplir automatiquement les formulaires

Maintenant que vous savez comment configurer le remplissage dynamique de champs dans WordPress, passons en revue quelques questions courantes que les utilisateurs se posent sur son fonctionnement.

Qu'est-ce que le remplissage dynamique de champs ?

Le remplissage dynamique de champs est le processus consistant à remplir automatiquement des champs de formulaire avec des informations que vous possédez déjà sur vos utilisateurs. Il peut s'agir de données provenant de leur profil utilisateur ou de détails transmis via une URL.

Cela rationalise l'expérience de remplissage de formulaire, la rendant plus rapide, plus conviviale et aide à réduire l'abandon de formulaire.

Quelle est la sécurité de l'utilisation des paramètres d'URL pour le remplissage dynamique de champs ?

L'utilisation de paramètres d'URL est généralement sécurisée tant que votre site fonctionne sur HTTPS, ce qui chiffre les données en transit.

Cela dit, vous devez toujours garder votre site WordPress et vos plugins de formulaire à jour et suivre les bonnes pratiques de sécurité de base pour protéger les informations sensibles.

Puis-je utiliser le remplissage dynamique de champs avec n'importe quel plugin de formulaire ?

De nombreux plugins de formulaires premium prennent en charge le remplissage dynamique des champs, y compris WPForms, que nous recommandons pour sa facilité d'utilisation et sa flexibilité.

Assurez-vous simplement de vérifier la compatibilité et les paramètres de configuration avec votre plugin spécifique. WPForms, que nous recommandons, offre un support et une documentation étendus pour la mise en œuvre de cette fonctionnalité.

Quels sont les avantages du remplissage dynamique des champs ?

Cette fonctionnalité améliore l'expérience utilisateur en faisant gagner du temps et en minimisant les saisies répétitives. Par conséquent, les utilisateurs sont plus susceptibles de remplir vos formulaires, ce qui peut entraîner des taux de conversion plus élevés. C'est particulièrement utile pour les pages de paiement de commerce électronique, les formulaires de capture de prospects et les inscriptions d'utilisateurs.

Plus de guides pour améliorer les formulaires WordPress

Nous espérons que cet article vous a aidé à apprendre comment utiliser le remplissage dynamique des champs dans WordPress pour pré-remplir les formulaires. Vous pourriez également consulter nos guides sur :

• Meilleurs constructeurs de formulaires en ligne
• Comment styliser et personnaliser vos formulaires WordPress
• Comment créer des formulaires AMP dans WordPress
• Comment créer des formulaires multilingues dans WordPress
• Comment créer des formulaires conversationnels dans WordPress
• Comment suivre le parcours utilisateur sur les formulaires de prospects WordPress
• Conseils pour créer des formulaires plus interactifs dans WordPress et augmenter les conversions
• Le guide ultime pour utiliser les formulaires WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.