Comment remplir automatiquement les champs des formulaires WordPress

Comment remplir automatiquement les champs des formulaires WordPress

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

Cela facilite le remplissage des formulaires et permet de gagner beaucoup de temps lors de leur élaboration.

WPForms facilite le remplissage automatique des champs de formulaire en utilisant des choix de champs dynamiques. Nous allons vous montrer comment le mettre en place dans cet article.

Créez votre formulaire WordPress maintenant

Comment remplir automatiquement les champs des formulaires WordPress

Dans ce tutoriel, nous allons 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. Si vous avez besoin d'aide, voici un guide étape par étape sur l 'installation d'un plugin WordPress.

Nous allons maintenant ajouter un nouveau formulaire. Tout d'abord, allez dans WPForms " Add New.

Ajouter un nouveau formulaire avec des champs auto-remplis

Cliquez ensuite sur le modèle de formulaire de contact simple pour commencer.

Utiliser un modèle de formulaire de contact simple

Vous verrez le générateur de formulaires s'ouvrir dans une fenêtre plein écran. Le formulaire de contact simple contient déjà des champs pour :

  • Nom
  • Courriel
  • Commentaire ou message

Faisons glisser un champ déroulant, puis ajoutons des choix de réponses à remplissage automatique.

Cliquez sur le champ déroulant 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 sur la gauche. Modifions l'étiquette ici pour décrire le contenu de la liste déroulante.

Modifier l'étiquette de la liste déroulante dans le champ des choix dynamiques

Descendez un peu et développez les options avancées. Nous allons choisir deux paramètres pour faciliter le remplissage du formulaire :

  • Style - Nous allons choisir la liste déroulante moderne parce qu'elle permet aux visiteurs d'effectuer des recherches dans la liste. C'est un excellent moyen de faciliter l'utilisation d'une liste déroulante très longue. Si vous le souhaitez, vous pouvez facilement créer une liste déroulante multi-sélection pour que vos visiteurs puissent choisir plus d'une réponse.
  • Remplaçant - Il est toujours utile de définir un remplaçant pour un champ. Un espace réservé ressemble à un choix par défaut, mais le visiteur ne peut pas le sélectionner. C'est un bon moyen de s'assurer que la sélection ne se fait pas par défaut sur la première réponse de la liste.

Style des champs auto-remplis et paramètres de l'espace réservé

Nous sommes maintenant prêts à ajouter un champ dynamique à notre nouvelle liste déroulante,

Étape 2 : Configurer le champ à remplissage automatique

Nous allons maintenant définir 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 va saisir toutes les options pour vous.

Lorsque vous développez les options avancées dans votre liste déroulante, vous avez le choix entre deux options :

  • Type de poste
  • Taxonomie

Choix dynamiques sur les champs auto-remplis

Post Type vous permet de remplir automatiquement le champ à partir d'un Dynamic Post Type Source. Sur une boutique WooCommerce, les choix de la deuxième liste déroulante pourraient ressembler à ceci :

  • Article - Une liste de tous les articles de blog de votre site.
  • Page - Liste toutes les pages de votre site.
  • Produits - Une liste de tous les produits de votre magasin.

Il s'agit de tous les types d'articles. Vous pouvez utiliser des types de posts personnalisés si vous en avez mis en place.

Par exemple, nous avons quelques autres options à choisir ici parce que nous avons mis en place deux types d'articles personnalisés supplémentaires :

Remplir automatiquement les champs en fonction du type de message choisi

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

Si vous sélectionnez la deuxième option de la liste déroulante, Taxonomies, vous verrez apparaître une deuxième liste déroulante intitulée Source de taxonomie dynamique.

Les choix de la deuxième liste déroulante comprendront des options telles que

  • Tags - Tous les tags associés à 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 produit - Étiquettes que vous avez ajoutées à vos produits.
  • Type de produit - Types de produits ou variantes.

Là encore, votre magasin aura très certainement plus d'options à choisir.

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

Remplir automatiquement les champs avec des choix taxonomiques dynamiques

Pour ce tutoriel, nous allons sélectionner Type de message, puis Produits. Cela permettra de lister tous les produits de notre magasin.

Il arrive que les champs à remplissage automatique proposent un grand nombre de choix. Si vous souhaitez exclure des éléments de la liste déroulante, consultez notre guide sur l'exclusion d'éléments des champs à remplissage automatique.

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

Cliquez sur Enregistrer pour sauvegarder 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 nous vous recommandons d'utiliser plutôt l'option d'intégration.

Commencez par cliquer sur Embed en haut du générateur de formulaires.

Intégrer des choix dynamiques dans votre formulaire

Puis cliquez sur Créer une nouvelle page.

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

Saisissez un nom pour votre page et cliquez sur " Let's Go".

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

Si tout semble correct, il suffit de cliquer sur Publier pour passer à l'action.

Publier un formulaire avec des choix de champs dynamiques

Et voilà ! Votre formulaire est prêt à être soumis.

Formulaire publié avec champ auto-rempli

C'est le moment idéal pour tester votre champ dynamique et commencer à recevoir des demandes.

Créez votre formulaire WordPress maintenant

FAQ sur les champs de formulaire remplis automatiquement

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

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

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

Au lieu de saisir manuellement chaque réponse, vous pouvez demander à WPForms d'extraire automatiquement toutes les options des types d'articles personnalisés ou des taxonomies de votre site.

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

Pourquoi ajouter des champs auto-remplis à un formulaire ?

Les champs auto-remplis peuvent aider à :

  • Réduire les abandons de formulaires - en pré-remplissant les champs, vous pouvez rendre les formulaires plus faciles à remplir.
  • Améliorer la précision - votre visiteur n'a pas besoin de taper lui-même les réponses.
  • Garder 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 tire automatiquement la liste des options de vos types d'articles ou de vos taxonomies.

Quels champs peuvent être remplis automatiquement ?

Dans WPForms, vous pouvez utiliser des choix de champs dynamiques pour remplir automatiquement 3 types de champs :

  • Liste déroulante
  • Champs à choix multiples
  • Cases à cocher

Vous pouvez utiliser le générateur de glisser-déposer pour les ajouter à vos formulaires.

Pourquoi les champs auto-remplis sont-ils utiles ?

Les champs de formulaire auto-remplis sont parfaits pour :

Créez votre formulaire WordPress maintenant

Ensuite, créer rapidement des formulaires intelligents avec WPForms

Le remplissage automatique des champs est un moyen intelligent de créer rapidement des formulaires complexes. Si vous souhaitez en 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 construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.

Divulgation: Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Voyez 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 d'articles sur WordPress et l'hébergement web.

Le meilleur plugin WordPress de construction de formulaires par glisser-déposer

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

Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.

34 commentaires sur "Comment remplir automatiquement les champs des formulaires WordPress"

  1. Bonjour WPForms,
    Je suis à la recherche d'un formulaire de soumission où mes utilisateurs pourraient être en mesure d'ajouter leurs propres Tags dans leur post soumis. Est-ce que WpForms peut faire cela ?
    Merci d'avance.
    Je vous remercie d'avance.

    1. Hey Josh- Vous pouvez permettre à vos utilisateurs d'utiliser des balises préexistantes qui seront appliquées à leur message (les détails se trouvent ici), mais pour le moment il n'est pas possible de leur permettre de créer des balises personnalisées qui seront appliquées à leur message.

      Je suis d'accord pour dire que ce serait très utile. J'ai pris note de cette demande de fonctionnalité et nous la garderons à l'esprit lorsque nous planifierons notre feuille de route pour l'avenir. Je m'excuse de ne pas pouvoir vous fournir ce que vous recherchez pour l'instant, mais j'apprécie votre suggestion.

      Pour plus d'informations ou pour obtenir de l'aide à ce sujet, veuillez nous envoyer un message dans la rubrique "Support" afin que nous puissions vous aider.

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

      Merci ! 🙂 .

    2. Je veux que si un utilisateur visite mon site web, ses informations soient remplies automatiquement, est-ce possible ?

      1. Bonjour Shivam,

        Nous ne disposons pas d'une fonction intégrée pour réaliser cela, mais il est possible d'utiliser 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 les options 1 et 2, ils vont sur la page a, s'ils cliquent sur les options 1 et 3, ils vont sur la page b ?

    J'espère pouvoir y arriver avec ce plug-in... Merci Pat

      1. Bonjour Ashok - Nous ne disposons pas d'une fonction intégrée permettant de remplir le champ d'un formulaire à partir de deux formulaires différents vers un seul formulaire, comme vous l'avez mentionné. Cependant, vous pouvez évidemment transmettre la valeur du "Formulaire A (Source)" au "Formulaire B (Destination)", vous pouvez utiliser des chaînes de requête (pour les champs de texte de base) pour pré-remplir la valeur du champ d'un formulaire à l'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 à une enquête précédente de la même personne ? Si oui, comment faire ?

    1. Bonjour Mihir ! Pour l'instant, notre plugin n'a pas de fonctionnalité qui permette à un formulaire d'interroger les données précédentes d'un utilisateur et de remplir automatiquement un formulaire. Je vois comment cela pourrait être utile, donc j'ai noté votre intérêt pour ce type de fonctionnalité pour que notre équipe en tienne compte dans les prochaines mises à jour !

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

      Merci !

  4. Bonjour, Je voudrais ajouter une option "autre" à une liste déroulante automatique. Je ne sais pas si c'est possible, mais j'ai besoin d'une solution pour que l'on puisse faire des économies sur les frais de port. Y a-t-il un moyen d'y parvenir ?

    Merci !

  5. Comment ajouter un pollueur automatique pour le nom et l'email ? La plupart de mes utilisateurs utilisent un téléphone portable.
    Je ne sais pas si c'est possible, mais j'ai déjà trouvé un moyen de le faire.

    1. Bonjour Raj. Alors que pour les utilisateurs connectés, vous pouvez facilement remplir le nom et le champ du nom en utilisant les balises intelligentes. Voici notre guide sur les 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 remplir automatiquement les champs du nom et de l'adresse électronique.

      J'ai noté votre intérêt pour cette fonctionnalité et j'ai ajouté votre adresse électronique à notre liste pour recevoir des mises à jour à ce sujet.

      Merci et bonne journée !

  6. Mon client est une entreprise de services. Sur son site web, nous avons des boutons CTA différents pour chaque service qu'il propose, mais qui renvoient tous au même formulaire de contact. Par exemple, un CTA dit "obtenir un devis pour le nettoyage de la toiture" tandis qu'un autre dit "obtenir un devis pour le nettoyage du bardage, des gouttières ou de la clôture". Tous ses services sont listés comme des options à cocher sur le formulaire de contact. Ma question est la suivante : existe-t-il un moyen pour que le formulaire sélectionne automatiquement le service tout en affichant tous les autres services, en fonction du CTA sur lequel l'internaute a cliqué ?

    1. Bonjour Erwin,

      Afin que nous puissions répondre à votre question de la manière la plus complète possible, pourriez-vous contacter notre équipe en nous donnant quelques détails supplémentaires sur ce que vous cherchez à faire ?

      Merci !

  7. Bonjour, je suis en train de créer un formulaire pour un client et j'ai besoin que le champ produit apporte le nom du produit automatiquement après avoir cliqué dessus, comment faire ?

    1. Bonjour Vinicius,

      Actuellement, nous ne disposons pas d'une fonction intégrée permettant de remplir automatiquement les champs de la base de données lors de la saisie d'un champ. J'ai ajouté votre vote pour que cette fonctionnalité soit considérée comme une demande d'amélioration future.

      Merci de votre patience !

  8. https://wpforms.com/docs/how-to-use-query-strings-to-auto-fill-a-text-field/

    Est-ce que je veux remplir automatiquement deux champs ou plus avec une seule chaîne de requête ?

    Par exemple : https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue

    1. {query_var key="contact-reason"}
    2. {query_var key="&second-field"}

    La partie & ne fonctionne pas, est-ce que je l'écris d'une mauvaise manière ?

    Merci, j'espère que vous m'aiderez !

    1. Bonjour Lynn,

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

      J'espère que cela vous aidera !

  9. Bonjour, est-il possible de remplir automatiquement un champ à partir de "clients" ?

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

    1. Bonjour Paolo,

      Actuellement, nous n'avons pas de fonction intégrée pour remplir automatiquement les champs avec la recherche Ajax et l'autocomplétion. Dans ce cas, nous apprécions que vous nous fassiez part de cette demande de fonctionnalité et j'ai ajouté votre vote.

      Merci 🙂 .

  10. Bonjour, est-il possible de remplir automatiquement un champ avec une liste d'utilisateurs ? (par exemple une liste de tous les clients).
    Merci de votre compréhension.

  11. J'aimerais envoyer des données d'un formulaire à l'autre comme le décrit cet article (URL supprimée).
    Mais j'ai besoin de cela pour les champs déroulants et les dates.
    Est-ce possible ?
    Je ne sais pas si c'est possible, mais je ne sais pas non plus si c'est possible de le faire. Le thème que j'utilise est edubin
    Merci de votre compréhension.

  12. Bonjour,

    Nous avons un besoin où un champ déroulant doit être rempli automatiquement avec les valeurs sélectionnées d'un champ à choix multiple précédent (champs en cascade). Existe-t-il un moyen d'y parvenir ?

    Merci !

    1. Padma - Nous ne disposons pas actuellement d'une fonctionnalité permettant de transférer des informations d'un champ à l'autre et de les remplir. Cependant, je suis tout à fait d'accord pour dire que ce serait utile ! J'ai pris note de la demande de fonctionnalité pour que notre équipe en discute plus en détail.

      Il est possible de contourner ce problème en utilisant du javascript, mais cela nécessite une certaine expérience de l'utilisation du javascript. Malheureusement, il s'agit d'une solution de contournement personnalisée et je ne pourrai pas vous fournir une solution complète, mais j'aimerais beaucoup vous orienter dans la bonne direction. Puisque cela nécessite l'utilisation de javascript, vous pouvez consulter une question similaire posée ici.

      Merci 🙂 .

  13. Comment remplir automatiquement le sku d'un produit dans un formulaire ? Je souhaite ajouter un formulaire de devis sur ma page produit afin que lorsque l'utilisateur ouvre un formulaire de devis, le sku de ce produit se remplisse automatiquement ?

    Remerciements

    1. Bonjour Danial,

      Actuellement, nous ne disposons pas d'une fonction permettant de remplir automatiquement le sku des produits. Nous sommes d'accord pour dire que cela serait très utile.

      J'ai pris note de cette demande de fonctionnalité et nous la garderons à l'esprit lorsque nous établirons notre feuille de route pour l'avenir.

      Merci pour la suggestion 🙂 .

  14. pour la page d'un seul produit
    Peut-on auto-détecter la catégorie et les sous-catégories du produit ? (pas le nom du produit)
    Pour que les utilisateurs n'aient pas à les remplir.

    1. Bonjour Sachintha - Je m'excuse, par défaut ce n'est pas possible à moins que vous n'utilisiez la fonction d'auto-population comme indiqué dans ce document.

      J'espère que cela vous aidera. Merci beaucoup 🙂 .

  15. Bonjour !

    J'ai deux formulaires. Je redirige les données du premier formulaire vers la page suivante pour les données de confirmation. Les données du premier formulaire apparaissent 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. Bonjour Jiya !
      Je comprends que vous voyez les données dans l'URL mais qu'elles n'apparaissent pas dans les champs de votre deuxième formulaire. Cela est généralement dû au fait que le paramètre Prefill by URL doit être activé sur votre deuxième formulaire. Vous devez activer ce paramètre dans les paramètres avancés de votre deuxième formulaire.

      Pour obtenir des instructions détaillées, étape par étape, sur la mise en place du pré-remplissage des formulaires, veuillez consulter notre guide ici : Comment utiliser les chaînes de requête pour pré-remplir les champs d'un 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 que tous les liens ne sont pas suivis. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.

Ce formulaire est protégé par le tourniquet de Cloudflare et la politique de confidentialité et les conditions de service de Cloudflare s'appliquent.