Comment pré-remplir automatiquement les champs dans les formulaires WordPress

Comment pré-remplir automatiquement les champs dans les formulaires WordPress

Voulez-vous pré-remplir automatiquement les champs de vos formulaires WordPress ? Vous pouvez utiliser automatiquement des informations telles que les types de publication ou les produits pour créer les options dans les champs de formulaire.

Cela rend les formulaires plus faciles à remplir et peut également vous faire gagner beaucoup de temps lors de leur création.

WPForms facilite le pré-remplissage automatique des champs de formulaire à l'aide de choix de champs dynamiques. Nous vous montrerons comment le configurer dans cet article.

Créez votre formulaire WordPress maintenant

Comment pré-remplir automatiquement les champs dans les formulaires WordPress

Dans ce tutoriel, je vais vous montrer comment pré-remplir automatiquement les produits WooCommerce dans un formulaire de contact.

Étape 1 : Installer le plugin WPForms

Tout d'abord, installez et activez le plugin WPForms. Voici un guide étape par étape sur comment installer un plugin WordPress si vous avez besoin d'aide.

Maintenant, vous allez ajouter un nouveau formulaire. Tout d'abord, allez dans WPForms » Ajouter un nouveau.

Ajouter un nouveau formulaire avec des champs pré-remplis

Ensuite, cliquez sur le modèle de formulaire de contact simple pour commencer.

Utiliser le modèle de formulaire de contact simple

Vous verrez l'éditeur de formulaire s'ouvrir dans une fenêtre plein écran. Le formulaire de contact simple contient déjà les champs pour :

  • Nom
  • E-mail
  • Commentaire ou message

Allez-y, faites glisser un champ de liste déroulante, puis ajoutez des choix de réponses à pré-remplissage automatique.

Cliquez sur le champ de liste déroulante et faites-le glisser vers l'aperçu du formulaire à droite.

Ajouter un choix de champ dynamique avec une liste déroulante

Ensuite, cliquez une fois sur votre liste déroulante pour ouvrir les paramètres à gauche. Modifiez l'étiquette ici pour décrire le contenu de la liste déroulante.

Modifier l’étiquette de la liste déroulante sur le champ de choix dynamique

Faites maintenant défiler un peu vers le bas et développez Options avancées. Vous allez choisir 2 paramètres ici pour faciliter le remplissage du formulaire :

  • Style – Je vais choisir la liste déroulante Moderne car elle permet aux visiteurs de rechercher dans la liste. C'est un excellent moyen de rendre une liste déroulante très longue beaucoup plus facile à utiliser. Si vous le souhaitez, vous pouvez facilement créer une liste déroulante multi-sélections afin que vos visiteurs puissent choisir plus d'une réponse.
  • Placeholder – C'est toujours une bonne idée de définir un placeholder pour un champ. Un placeholder ressemble à un choix par défaut, mais le visiteur ne peut pas le sélectionner. C'est un excellent moyen de s'assurer que la sélection ne se limite pas à la première réponse de la liste.
Paramètres de style et de placeholder pour les champs pré-remplis

Vous êtes maintenant prêt à ajouter un choix de champ dynamique à notre nouvelle liste déroulante,

Étape 2 : Configurer votre champ à pré-remplissage automatique

Vous allez maintenant configurer les options qui apparaîtront dans la liste déroulante.

Avec les choix de champs dynamiques, vous n'avez pas à vous soucier de taper toutes les réponses. WPForms récupérera toutes les options pour vous.

Lorsque vous développez Options avancées sur votre liste déroulante, vous verrez 2 choix :

  • Type de publication
  • Taxonomie
Choix dynamiques sur le champ pré-rempli

Type de publication vous permet de pré-remplir automatiquement le champ à partir d'une Source de type de publication dynamique. Sur une boutique WooCommerce, les choix dans la deuxième liste déroulante ici pourraient ressembler à ceci :

  • Publication – Une liste de toutes les publications de blog sur votre site.
  • Page – Liste toutes les pages de votre site.
  • Produits – Une liste de tous les produits de votre boutique.

Ce sont tous des types de publication. Vous pouvez utiliser des types de publication personnalisés si vous en avez configuré.

Par exemple, vous avez ici quelques autres options à choisir car nous avons configuré 2 types de publication personnalisés supplémentaires :

Pré-remplir les champs avec des choix de type de publication

Examinons l'autre choix que vous pouvez utiliser pour remplir automatiquement les champs de votre formulaire.

Si vous sélectionnez la deuxième option dans le menu déroulant, Taxonomies, vous verrez un deuxième menu déroulant appelé Source de taxonomie dynamique.

Les choix dans le deuxième menu déroulant comprendront des options telles que :

  • Étiquettes – Toutes les étiquettes associées à vos articles de blog.
  • Catégories – Les catégories associées à vos articles de blog.
  • Catégories de produits – Catégories associées à vos produits de commerce électronique.
  • Étiquettes de produits – Étiquettes que vous avez ajoutées à vos produits.
  • Type de produit – Types de produits ou variantes.

Encore une fois, votre boutique aura presque certainement plus d'options à choisir.

Dans cet exemple, le propriétaire de la boutique a ajouté un plugin pour regrouper les produits par marque, c'est pourquoi nous avons également une taxonomie Marques à utiliser pour remplir automatiquement notre champ.

Pré-remplir les champs avec des choix de taxonomie dynamique

Pour ce tutoriel, je vais sélectionner Type de publication puis Produits. Cela listera tous les produits de notre boutique.

Parfois, les champs à remplissage automatique peuvent avoir beaucoup de choix. Si vous souhaitez exclure des éléments du menu déroulant, consultez notre guide sur l'exclusion d'éléments des champs à remplissage automatique.

Enfin, vous voudrez vérifier les paramètres généraux de votre formulaire. Consultez nos guides sur :

Cliquez sur Enregistrer pour enregistrer votre formulaire.

Étape 3 : Publier votre formulaire

Vous pouvez publier votre formulaire de différentes manières : dans un article, dans une page ou dans la barre latérale. Vous pouvez utiliser un shortcode pour cela, mais je recommande plutôt d'utiliser l'option d'intégration.

Commencez par cliquer sur Intégrer en haut du constructeur de formulaire.

Intégrer votre formulaire avec des choix dynamiques

Puis cliquez sur Créer une nouvelle page.

Créer une nouvelle page pour le formulaire avec des champs pré-remplis

Tapez un nom pour votre page et cliquez sur C'est parti.

Créer une page pour votre formulaire avec des champs pré-remplis

Si tout semble correct ici, cliquez simplement sur Publier pour mettre en ligne.

Publier le formulaire avec des choix de champs dynamiques

Et voilà ! Votre formulaire est prêt pour les soumissions.

Formulaire publié avec champ pré-rempli

C'est le bon moment pour tester votre champ dynamique afin de commencer à recevoir des demandes.

Créez votre formulaire WordPress maintenant

FAQ sur les champs de formulaire à pré-remplissage automatique

Nous recevons souvent des questions sur les choix de champs dynamiques et les champs à remplissage automatique. Voici quelques-unes des questions qui nous sont posées régulièrement.

Qu'est-ce qu'un choix de champ dynamique ?

Un choix de champ dynamique est une réponse de formulaire qui est automatiquement remplie pour votre visiteur.

Au lieu de taper manuellement chaque réponse, vous pouvez demander à WPForms d'importer automatiquement toutes les options à partir des types de publication ou des taxonomies personnalisées de votre site.

Les choix dynamiques sont également connus sous le nom de champs à remplissage automatique.

Pourquoi ajouter des champs pré-remplis à un formulaire ?

Les champs pré-remplis peuvent vous aider à :

  • Réduire l’abandon de formulaire – en pré-remplissant les champs, vous pouvez rendre les formulaires plus faciles à remplir
  • Améliorer la précision – votre visiteur n’a pas à saisir les réponses lui-même
  • Maintenir les formulaires à jour – WPForms affiche toujours les éléments les plus récents dans le champ du formulaire.

La maintenance de vos formulaires est facile car WPForms extrait automatiquement la liste des options de vos types de publication ou de vos taxonomies.

Quels champs peuvent être pré-remplis ?

Dans WPForms, vous pouvez utiliser des choix de champ dynamiques pour pré-remplir 3 types de champs :

  • Listes déroulantes
  • Champs à choix multiples
  • Cases à cocher

Vous pouvez utiliser le constructeur facile par glisser-déposer pour les ajouter à vos formulaires.

Pourquoi les champs pré-remplis sont-ils utiles ?

Les champs de formulaire pré-remplis sont parfaits pour :

Ensuite, créez rapidement des formulaires intelligents avec WPForms

Le pré-remplissage des champs est un moyen intelligent de créer rapidement des formulaires complexes. Si vous cherchez à faire plus avec vos formulaires, voici d’autres idées à essayer :

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, veuillez nous suivre sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.

Divulgation : Notre contenu est soutenu par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Découvrez comment WPForms est financé, pourquoi c'est important et comment vous pouvez nous soutenir.

Claire Broadley

Claire est la responsable du contenu de l'équipe WPForms. Elle a plus de 13 ans d'expérience dans la rédaction sur WordPress et l'hébergement Web. En savoir plus

Le meilleur plugin de création de formulaires par glisser-déposer pour WordPress

Facile, rapide et sécurisé. Rejoignez plus de 6 millions de propriétaires de sites Web qui font confiance à WPForms.

34 commentaires sur « Comment pré-remplir automatiquement les champs dans les formulaires WordPress »

  1. Bonjour WPForms,
    Je cherche un formulaire de publication soumis où mes utilisateurs pourraient ajouter leurs propres étiquettes à leur publication soumise. WPForms peut-il faire cela ?
    Merci d’avance.
    Josh

    1. Salut Josh - Vous pouvez permettre à vos utilisateurs de sélectionner des étiquettes préexistantes qui seraient appliquées à leur publication (les détails se trouvent ici), mais pour le moment, il n’est pas possible de leur permettre de créer des étiquettes personnalisées à appliquer à leur publication.

      Je suis d’accord que ce serait très utile, cependant. J’ai pris note de la demande de fonctionnalité et nous la garderons à l’œil à mesure que nous planifierons notre feuille de route pour l’avenir. Je m’excuse de ne pas pouvoir vous fournir ce que vous recherchez pour le moment, mais j’apprécie votre suggestion.

      Pour toute information ou assistance supplémentaire à ce sujet, veuillez nous contacter au support afin que nous puissions vous aider.

      Si vous avez une licence WPForms, vous avez accès à notre support par e-mail, veuillez donc soumettre un ticket de support. Sinon, nous fournissons un support gratuit limité dans le forum de support WPForms Lite sur WordPress.org.

      Merci ! :)

    2. Je souhaite que si un utilisateur visite mes sites Web, ses informations soient pré-remplies. Est-ce possible ?

      1. Bonjour Shivam,

        Nous n'avons pas de fonctionnalité intégrée pour y parvenir, mais cela peut être réalisé en utilisant la chaîne de requête. Veuillez vous référer à ce guide.

        Faites-vous référence à ceci ?

  2. Bonjour, est-il possible pour les clients, en fonction de leur choix, d'ouvrir différentes pages au lieu d'envoyer un e-mail ?

    Par exemple, s'ils cliquent sur l'option 1 et 2, ils vont à la page a, s'ils cliquent sur l'option 1 et 3, ils vont à la page b ?

    J'espère pouvoir le gérer avec ce plugin... Cheers Pat

    1. Salut Patric - Vous pouvez absolument y parvenir en utilisant la fonctionnalité de confirmation conditionnelle.

      Tout ce que vous avez à faire est de définir le « Type de confirmation » sur « Afficher la page » ou « Aller à l'URL (rediriger) » et de définir les conditions en conséquence.

      J'espère que cela vous aidera !

      1. Bonjour Ashok - Nous n'avons pas de fonctionnalité intégrée pour remplir le champ du formulaire à partir de 2 formulaires différents vers un seul formulaire comme vous l'avez mentionné. Cependant, vous pouvez évidemment passer la valeur du « Formulaire A (Source) » au « Formulaire B (Destination) », vous pouvez utiliser les chaînes de requête (pour les champs de texte de base) pour pré-remplir la valeur du champ d'un formulaire à un autre.

        Pour les champs autres que le champ de saisie de texte de base, vous pouvez consulter notre guide du développeur

        J'espère que cela vous aidera !

  3. Bonjour – Est-il possible pour les enquêtes basées sur des formulaires WordPress d'être pré-remplies avec une réponse d'enquête précédente de la même personne ? Si oui, comment pouvons-nous le faire ?

    1. Bonjour Mihir ! Pour le moment, notre plugin n'a aucune fonctionnalité qui permettrait à un formulaire d'interroger les données précédentes d'un utilisateur et de pré-remplir un formulaire. Je vois à quel point cela pourrait être utile, j'ai donc noté votre intérêt pour ce type de fonctionnalité pour que notre équipe l'examine dans les futures mises à jour !

      Je suis désolé de ne pas pouvoir vous fournir ce que vous recherchez pour le moment, mais nous apprécions l'idée.

      Merci !

  4. Bonjour, j'aurais besoin d'ajouter une option « autre » à une liste déroulante pré-remplie. Pour donner la possibilité de sélectionner un type de publication personnalisé ou si aucun ne correspond à ses besoins, il peut sélectionner autre et un champ de texte conditionnel apparaît où il peut taper du texte. Y a-t-il un moyen d'y parvenir ?

    Merci !

  5. Y a-t-il un moyen d'ajouter le remplissage automatique pour le nom et l'e-mail ? la plupart de mes utilisateurs utilisent un téléphone portable
    donc quand ils ouvrent le formulaire, le « nom » et l'« e-mail » sont-ils automatiquement ajoutés ? possible ?

    1. Salut Raj. Alors que pour les utilisateurs connectés, vous pouvez facilement remplir le nom et le champ nom en utilisant les balises intelligentes. Voici notre excellent guide sur nos balises intelligentes, en particulier les balises intelligentes de gestion des utilisateurs.

      Cependant, je m'excuse pour l'utilisateur déconnecté, il n'est actuellement pas possible de pré-remplir automatiquement les champs nom et e-mail.

      J'ai noté votre intérêt pour cette fonctionnalité et j'ai ajouté votre e-mail à notre liste pour recevoir des mises à jour concernant cette fonctionnalité.

      Merci et passez une bonne journée !

  6. Mon client a une entreprise de services. Sur leur site Web, nous avons différents boutons d'appel à l'action (CTA) basés sur chaque service qu'ils fournissent, qui mènent tous au même formulaire de contact. Par exemple, un CTA dit « Obtenir un devis pour le nettoyage de toiture » tandis qu'un autre dit « Obtenir un devis pour le nettoyage de bardage, de gouttières ou de clôtures ». Tous ses services sont répertoriés sous forme de cases à cocher sur le formulaire de contact. Ma question est, y a-t-il un moyen pour que le formulaire présélectionne le service tout en affichant tous les autres services, en fonction du CTA sur lequel ils ont cliqué ?

    1. Bonjour Erwin,

      Afin de nous assurer de répondre à votre question le plus complètement possible, pourriez-vous s'il vous plaît contacter notre équipe avec des détails supplémentaires sur ce que vous cherchez à faire ?

      Merci !

  7. Bonjour, je crée un formulaire pour un client et j'avais besoin que le champ produit affiche automatiquement le nom du produit après avoir cliqué dessus, comment faire ?

    1. Bonjour Vinicius,

      Actuellement, nous n'avons pas de fonctionnalité intégrée pour pré-remplir les champs à partir de la base de données lors de la saisie dans le champ. J'ai ajouté votre vote pour considérer cela comme une demande de fonctionnalité pour les améliorations futures.

      Merci de votre patience !

    1. Bonjour Lynn,

      Veuillez définir {query_var key=”second-field”} et supprimer le signe &.

      J'espère que cela vous aidera !

  8. Bonjour, est-il possible de pré-remplir un champ à partir des « clients » ?

    (Un champ texte avec recherche/autocomplétion ajax serait une fonctionnalité très, très puissante)

    1. Bonjour Paolo,

      Actuellement, nous n'avons pas de fonctionnalité intégrée pour pré-remplir un champ avec recherche ajax et autocomplétion. Dans ce cas, nous apprécions que vous partagiez cette demande de fonctionnalité. J'ai ajouté votre vote.

      Merci 🙂

  9. Bonjour, est-il possible de pré-remplir un champ avec une liste d'utilisateurs ? (par exemple une liste de tous les clients). Merci

  10. Je voudrais envoyer des données d'un formulaire à un autre comme le décrit cet article (URL supprimée) mais j'en ai besoin pour les champs déroulants et la date. Est-ce possible ? Deuxièmement, je voudrais intégrer le formulaire dans un curseur. Le thème que j'utilise est edubin Merci

  11. Bonjour,

    Nous avons une exigence où un champ déroulant doit être pré-rempli avec les valeurs sélectionnées d'un champ à choix multiples précédent (champs en cascade). Y a-t-il un moyen de le faire s'il vous plaît ?

    Merci !

    1. Salut Padma – Nous n'avons actuellement pas de fonctionnalité qui transfère des informations d'un champ à un autre et les pré-remplit. Cependant, je suis tout à fait d'accord que ce serait utile ! J'ai pris note de la demande de fonctionnalité pour que notre équipe en discute davantage.

      En guise de solution de contournement, cela peut être réalisé avec du javascript, mais cela nécessitera une certaine expérience en javascript. C'est, malheureusement, une solution de contournement personnalisée et je ne pourrai pas fournir une solution complète, mais j'aimerais vous orienter dans la bonne direction. Puisqu'il nécessite du javascript personnalisé, vous pouvez consulter une question similaire posée ici.

      Merci 🙂

  12. Comment pouvons-nous pré-remplir le SKU du produit dans un formulaire ? Je veux ajouter un formulaire de devis sur ma page produit, donc lorsque l'utilisateur ouvre un formulaire de devis, le SKU de ce produit est pré-rempli ?

    Merci

    1. Bonjour Danial,

      Actuellement, nous n'avons pas de fonctionnalité pour pré-remplir le SKU des produits. Nous sommes d'accord que ce serait très utile, cependant.

      J'ai pris note de la demande de fonctionnalité et nous la garderons à l'œil pendant que nous planifions notre feuille de route pour l'avenir.

      Merci pour la suggestion 🙂

  13. pour la page produit unique
    pouvons-nous détecter automatiquement la catégorie et les sous-catégories du produit ? (pas le nom du produit)
    Ainsi, les utilisateurs n’ont pas besoin de les remplir.

    1. Bonjour Sachintha – Je m’excuse, par défaut ce n’est pas possible à moins que vous n’utilisiez la fonctionnalité de pré-remplissage automatique décrite dans ce document.

      J'espère que cela vous aide. Merci 🙂

  14. Salut !

    J’ai deux formulaires. Je redirige les données du premier formulaire vers la page suivante pour confirmation des données. Les données du premier formulaire s’affichent dans l’URL mais pas dans les champs du deuxième formulaire. Comment puis-je afficher les données dans les champs du deuxième formulaire ?

    1. Salut Jiya !
      Je comprends que vous voyez les données dans l’URL mais qu’elles ne s’affichent pas dans les champs de votre deuxième formulaire. C’est généralement parce que le paramètre Pré-remplir par URL doit être activé sur votre deuxième formulaire. Vous devrez activer ce paramètre dans les paramètres avancés de votre deuxième formulaire.

      Pour des instructions détaillées étape par étape sur la configuration du pré-remplissage des formulaires, veuillez consulter notre guide ici : Comment utiliser les chaînes de requête pour pré-remplir les champs de formulaire à partir d’un autre formulaire

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité, et tous les liens sont nofollow. N'utilisez PAS de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.

Ce formulaire est protégé par Cloudflare Turnstile et la politique de confidentialité et les conditions d'utilisation de Cloudflare s'appliquent.