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 aider. Il vous permet de remplir automatiquement les champs de formulaire avec des informations que vous connaissez déjà sur vos visiteurs, comme leur nom à partir d'un profil utilisateur ou des détails transmis via une URL.

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.

Si vous souhaitez créer des formulaires plus fluides que les gens complètent réellement, vous êtes au bon endroit.

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 est une technique qui permet aux propriétaires de sites Web de remplir automatiquement les champs de 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 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 :

• Méthode 1. Remplir automatiquement les fichiers de formulaire à l'aide du remplissage dynamique de champs
• Méthode 2. Remplir automatiquement les champs de formulaire à l'aide de paramètres d'URL
• Astuce bonus : Ajouter l'autocomplétion pour les champs d'adresse
• FAQ : Remplissage dynamique de champs dans WordPress pour remplir automatiquement les formulaires
• Plus de guides pour améliorer les formulaires WordPress

Commençons !

Méthode 1. Remplir automatiquement les fichiers de formulaire à l'aide du remplissage dynamique de 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.

Après avoir activé le plugin, vous devez visiter la page WPForms » Paramètres pour saisir votre clé de licence. Vous trouverez ces informations dans votre compte sur le site Web de WPForms.

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 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 votre 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 maintenant un nouveau champ de formulaire pour le remplir avec des choix dynamiques.

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 ».

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 et le remplissent pour que vos utilisateurs puissent le soumettre.

Tout d'abord, vous devez créer un nouveau formulaire ou modifier un formulaire existant dans WPForms. 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 cela.

• La partie de l'URL avant 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 de champ de formulaire WPForm.
• 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 où nous transmettons un titre de produit en tant que champ 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, la saisie semi-automatique 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.