Comment créer des formulaires WordPress avec des champs déroulants (méthode facile)

Les visiteurs commencent à remplir votre formulaire de contact, puis l'abandonnent soudainement à mi-chemin. C'est l'une des expériences les plus frustrantes pour tout propriétaire de site Web, surtout lorsque vous savez que ces prospects pourraient transformer votre entreprise.

La vérité est que les formulaires longs intimident les utilisateurs et créent des frictions inutiles dans votre processus de conversion.

Après des années d'aide aux propriétaires de sites WordPress pour optimiser leurs formulaires, nous avons découvert que l'utilisation de champs déroulants peut améliorer vos taux de complétion de formulaires.

De plus, ces éléments simples permettent non seulement d'économiser un espace d'écran précieux, mais aussi de guider les utilisateurs vers la fourniture des informations exactes dont vous avez besoin à leur sujet.

Dans ce tutoriel, nous vous montrerons la manière la plus simple de créer des formulaires WordPress avec des champs déroulants que les visiteurs souhaitent réellement remplir.

Que sont les champs déroulants et pourquoi les utiliser ?

Un champ déroulant permet aux utilisateurs de choisir une option parmi une liste prédéfinie de différentes variations. Les utilisateurs peuvent simplement cliquer sur le champ pour voir tous les choix déroulants.

En tant que propriétaire de site Web, vous pouvez utiliser des champs déroulants pour créer des formulaires Web, tels que des formulaires de contact, des formulaires d'inscription à des événements, des inscriptions à des newsletters par e-mail ou des formulaires de commande de produits.

Les champs déroulants peuvent améliorer l'efficacité de votre formulaire. Voici quelques avantages :

• Cohérence. La liste prédéfinie d'options permet de maintenir la cohérence des données collectées et d'éviter les entrées invalides. Cela rend l'analyse des données plus précise.
• Champs dynamiques. Les champs déroulants facilitent la mise en place d'une logique conditionnelle. La liste prédéfinie d'options vous permet d'afficher des champs supplémentaires en fonction de la sélection de l'utilisateur, sans obstacles inutiles.
• Réduction de la longueur du formulaire. Combiner plusieurs options dans un menu déroulant compact rend votre formulaire moins intimidant. Cela peut se traduire par une meilleure expérience utilisateur.

Cela dit, examinons comment créer des formulaires avec des champs déroulants dans WordPress. Voici un aperçu rapide des étapes que nous allons couvrir dans ce tutoriel :

• Étape 1 : Installation du meilleur plugin de formulaire de contact
• Étape 2 : Création d'un nouveau formulaire avec WPForms
• Étape 3 : Ajout du champ déroulant à votre formulaire
• Étape 4 : Configuration des listes déroulantes avec des options et une logique conditionnelle
• Étape 5 : Personnalisation des notifications et confirmations de votre formulaire
• Étape 6 : Intégration de votre formulaire dans WordPress
• Étape 7 : Publication du nouveau formulaire sur votre site WordPress
• Astuce bonus : Idées créatives pour utiliser les champs déroulants
• FAQ : Utilisation des champs déroulants dans les formulaires WordPress
• Ressources supplémentaires : Maîtrisez vos formulaires WordPress

Commençons !

Étape 1 : Installation du plugin meilleur formulaire de contact

WPForms est le meilleur plugin de formulaire de contact pour WordPress. Il dispose d'outils d'IA et de plus de 2 000 modèles, qui vous aident à créer des formulaires en quelques clics.

Chez WPBeginner, nous utilisons WPForms pour créer nos formulaires de contact, nos enquêtes annuelles auprès des utilisateurs et nos demandes de migration, et nous ne pourrions pas être plus satisfaits !

N'hésitez pas à découvrir toutes ses fonctionnalités dans notre avis complet sur WPForms.

Alors, installons et activons le plugin WPForms. Vous pouvez aller dans Plugins » Ajouter un nouveau plugin depuis votre tableau de bord WordPress.

Sur l'écran suivant, vous pouvez utiliser le bouton de recherche pour trouver le plugin WPForms. Une fois trouvé, vous pouvez cliquer sur « Installer le plugin » puis sur « Activer ».

Pour des instructions détaillées, vous pouvez lire notre guide sur comment installer un plugin WordPress.

Étape 2 : Création d'un nouveau formulaire avec WPForms

Après l'activation, vous devriez voir un menu WPForms dans votre zone d'administration WordPress comme ceci :

Vous pourrez maintenant accéder à l'interface du constructeur WPForms et créer des formulaires avec des champs déroulants.

Pour commencer à créer un nouveau formulaire, vous pouvez aller dans WPForms » Ajouter un nouveau.

Vous verrez maintenant le panneau « Configuration » dans le constructeur de formulaires WPForms. Dans ce panneau, la première chose que vous devrez faire est de nommer votre formulaire.

Par exemple, vous pouvez taper « Formulaire de contact simple » ou simplement « Formulaire de contact » dans le champ « Nommez votre formulaire ».

Une fois cela fait, il est temps de choisir comment vous allez construire votre formulaire WordPress.

Avec WPForms, vous pouvez créer à partir de zéro, choisir un modèle prédéfini ou utiliser le constructeur de formulaires alimenté par l'IA.

Si vous souhaitez utiliser le constructeur de formulaires IA, il vous suffit d'entrer une simple requête. L'IA générera alors le formulaire pour vous en quelques secondes.

Pour ce guide, cependant, nous allons utiliser « Formulaire de contact simple ».

Pour utiliser un modèle de formulaire, il vous suffit de survoler celui que vous souhaitez et de cliquer sur « Utiliser le modèle ».

Pour des instructions étape par étape, consultez notre guide détaillé sur comment créer un formulaire de contact dans WordPress.

Étape 3 : Ajout du champ déroulant à votre formulaire

Après avoir terminé le processus de configuration, vous serez redirigé vers le constructeur de formulaires, où une liste de champs se trouve à gauche et un aperçu en direct à droite.

Maintenant, nous voulons ajouter un champ de liste déroulante à notre formulaire de contact.

Faites simplement glisser « Liste déroulante » et déposez-la sur le côté droit du formulaire.

Sur le côté droit du panneau, vous verrez un champ de liste déroulante sur votre formulaire de contact. Vous pouvez survoler le champ pour accéder à ses paramètres, qui comprennent :

• Un bouton de copie
• Un bouton de suppression
• Une instruction « Cliquer pour modifier »
• Une instruction « Faire glisser pour réorganiser »

En utilisant la fonction glisser-déposer, déplaçons le champ de liste déroulante au-dessus de « Commentaire ou message ».

En plaçant le champ de paragraphe « Commentaire ou message » juste avant le bouton de soumission, vous offrez un meilleur flux pour le processus de complétion du formulaire. Cela rend également votre champ de liste déroulante plus visible afin que les utilisateurs ne le négligent pas.

Étape 4 : Configuration des listes déroulantes avec des options et une logique conditionnelle

Dans cette étape, vous définirez le libellé, les options et la description de votre champ de liste déroulante. Votre liste d'options doit correspondre au type de votre formulaire. Puisque nous créons un formulaire de contact, proposons une option d'abonnement à la newsletter.

Cliquez sur votre champ de liste déroulante, puis allez dans « Options du champ ».

Dans l'onglet « Général », remplissez les détails nécessaires :

• Libellé. Dans les champs déroulants, les libellés sont généralement des questions. Nous utiliserons « Souhaitez-vous vous abonner à notre newsletter ? » comme exemple.
• Choix. Ajoutons « Oui, s’il vous plaît. » et « Non, merci. »
• Description. Vous pouvez laisser « Vous pouvez vous désabonner à tout moment. » dans ce champ.
• Obligatoire. Activez cette option pour obliger les visiteurs à remplir ce champ.

Ensuite, définissons la logique conditionnelle.

La logique conditionnelle signifie prendre des décisions avec des instructions « si » et « alors ». Lorsqu'elle est utilisée dans les formulaires, elle décide de ce qui se passe ensuite en fonction de la réponse donnée par un utilisateur.

La configuration de la logique conditionnelle rend les formulaires plus faciles à remplir. En n'affichant que les options pertinentes basées sur les sélections précédentes, votre formulaire ne submerge pas les utilisateurs avec des choix inutiles.

Dans cet exemple, affichons un champ supplémentaire si les utilisateurs choisissent l'option « Oui, s’il vous plaît ». Nous permettrons aux abonnés de choisir la fréquence à laquelle ils souhaitent recevoir des e-mails promotionnels.

Avant cela, vous devrez préparer un nouveau champ. Revenez à l'onglet « Ajouter des champs » et cliquez sur « Liste déroulante » ou tout autre type de champ. Ensuite, complétez les détails du nouveau champ.

Voici un exemple :

Maintenant que le nouveau champ est prêt, cliquez dessus et accédez à l'onglet « Logique intelligente ».

À partir de là, vous pouvez activer la logique conditionnelle en activant l'option « Activer la logique conditionnelle ».

Une fois activée, vous pouvez configurer la logique conditionnelle pour votre nouveau champ.

Commencez par choisir d'« Afficher » ou de « Masquer » le nouveau champ. Ensuite, sélectionnez un champ existant et une saisie utilisateur.

Voici notre configuration à titre de référence : « Afficher » ce champ si « Souhaitez-vous vous abonner à notre newsletter » est « Oui, s’il vous plaît ».

Étape 5 : Personnalisation des notifications et confirmations de votre formulaire

Il est temps de personnaliser votre nouveau formulaire.

Vous pouvez commencer par configurer des notifications par e-mail chaque fois qu'un nouvel utilisateur soumet un formulaire. Allez dans Paramètres » Notifications et activez l'option « Activer les notifications ».

Ensuite, parcourez les détails de notification par défaut de votre formulaire sous le commutateur.

Certaines entrées dans le champ « Notification par défaut » contiennent une « Balise intelligente ». Cette balise suppose où envoyer les notifications de soumission de formulaire, entre autres. Cela dit, vous pouvez ajuster les paramètres en fonction de vos besoins.

Par exemple, le champ « Adresse e-mail envoyée à » contient la balise intelligente {admin_email}. Par défaut, il s'agira de l'e-mail d'administration de votre site WordPress. Ainsi, toutes les notifications de soumission de formulaire iront dans la boîte de réception de l'e-mail d'administration.

Vous pouvez ajouter d'autres destinataires, tels que votre spécialiste du marketing par e-mail. Assurez-vous simplement de séparer chaque e-mail par une virgule.

Si vous souhaitez savoir comment envoyer votre e-mail de formulaire à plusieurs personnes ou à différents départements, lisez notre guide sur comment créer un formulaire de contact avec plusieurs destinataires.

Ensuite, la copie par défaut de votre « Ligne d'objet de l'e-mail » est « Nouvelle entrée : Nom de votre formulaire ». Cependant, vous pouvez modifier la ligne d'objet à votre guise tant qu'elle est facile à identifier.

Les utilisateurs qui soumettent un formulaire doivent recevoir une notification dans leurs e-mails. Le champ « Nom de l'expéditeur » permet aux utilisateurs de savoir qui envoie l'e-mail de notification.

Le champ suivant est « E-mail de l'expéditeur », et la balise intelligente pour ce champ est {admin_email}.

Avec ce réglage par défaut, les utilisateurs recevront des e-mails de notification de l'adresse e-mail de l'administrateur de votre site.

La partie mise en surbrillance vous informe que l'adresse e-mail de l'administrateur de votre site se trouve sur un domaine différent, par exemple, @gmail.com. Cela peut entraîner des problèmes de délivrabilité, tels que des e-mails qui finissent dans la boîte 'Spam'.

Vous pouvez lire notre guide sur la configuration de WP Mail SMTP pour vous assurer que vos e-mails arrivent dans la boîte de réception des lecteurs.

Pour chaque e-mail de notification envoyé, le destinataire a également la possibilité d'y répondre.

Dans le champ 'Reply-To' (Répondre à), vous pouvez définir l'adresse e-mail qui recevra les réponses des utilisateurs. La 'balise intelligente' de ce champ est {field_id= "1"}. Cela signifie que les réponses des utilisateurs iront à la même adresse e-mail que celle du champ 'From Email' (E-mail de l'expéditeur).

Enfin, le champ « Message par e-mail » contient la balise intelligente {all_fields}. Ainsi, votre message par e-mail contiendra vos champs de formulaire ainsi que les réponses de l'utilisateur.

Une fois que vous avez terminé de personnaliser vos notifications, accédez à « Confirmations ». Dans cette section, vous configurerez la manière dont vous afficherez la confirmation après la soumission du formulaire.

Tout d'abord, vous pouvez choisir « Messages », « Afficher la page » ou « Aller à l'URL (Redirection) » comme type de confirmation.

Si vous choisissez « Messages » comme type de confirmation, vous afficherez un message de confirmation pour informer les utilisateurs que vous avez bien reçu leurs soumissions de formulaire.

Avec ce type de confirmation, vous pouvez modifier le message par défaut pour qu'il corresponde à votre marque. Accédez au champ « Message de confirmation » et tapez votre message personnalisé dans la zone de texte.

Si vous choisissez « Afficher la page », vous devrez sélectionner une page existante sur votre site WordPress. Et si vous optez pour « Aller à l'URL (Redirection) », vous insérerez une URL de page.

Avant de passer à l'étape suivante, cliquez sur « Enregistrer » afin de ne pas perdre votre progression.

Une fois cela fait, vous êtes prêt à afficher votre nouveau formulaire sur votre site WordPress.

Étape 6 : Intégration de votre formulaire dans WordPress

Pour afficher votre nouveau formulaire sur votre site WordPress, vous pouvez utiliser l'assistant « Intégrer » dans le constructeur de formulaires WPForms.

Cela déclenchera la fenêtre contextuelle « Intégrer dans une page ». Sur celle-ci, vous pouvez choisir « Sélectionner une page existante » ou « Créer une nouvelle page », selon ce qui vous convient le mieux.

Dans cet exemple, choisissons « Sélectionner une page existante ».

L'étape suivante consiste à choisir la page où vous souhaitez afficher votre nouveau formulaire.

Cliquez simplement sur la liste déroulante et choisissez une page Web existante. Une fois que vous avez fait cela, cliquez sur « C'est parti ! ».

Ceci vous redirigera vers l'éditeur de blocs WordPress.

À partir de là, vous devez cliquer sur le bouton « + » pour ajouter un bloc WPForms.

Vous pouvez taper « WPForms » dans la barre de recherche, et vous devriez voir le bloc WPForms dans les résultats de recherche.

Cliquez pour l'ajouter.

Après avoir ajouté le bloc WPForms, vous verrez un menu déroulant sur votre page.

Cliquez simplement sur le menu déroulant et choisissez un formulaire dans la liste. Sélectionnons « Formulaire de contact » puisque c'est le formulaire que nous venons de créer.

Étape 7 : Publication du nouveau formulaire sur votre site WordPress

Dans cette dernière étape, prévisualisons le formulaire avant de le publier pour nous assurer que tout est parfait. Dans l'éditeur de contenu WordPress, cliquez sur Afficher » Aperçu dans un nouvel onglet.

Si vous le souhaitez, vous pouvez également prévisualiser l'apparence du formulaire sur les tablettes et les appareils mobiles. Il vous suffit de cliquer sur Afficher » Tablette ou Mobile » Aperçu dans un nouvel onglet.

Enfin, si aucun ajustement supplémentaire n'est nécessaire, vous pouvez cliquer sur « Mettre à jour ».

Félicitations ! Vous avez ajouté avec succès votre nouveau formulaire de contact avec des champs déroulants sur votre site Web WordPress.

Voici à quoi il ressemblait sur notre site Web de démonstration :

Astuce bonus : Façons créatives d'utiliser les champs déroulants

Vous savez ce qui est incroyable avec les champs déroulants ? Ils sont beaucoup plus polyvalents que la plupart des gens ne le pensent !

Après des années de création de sites Web, nous avons découvert des moyens vraiment astucieux d'utiliser les listes déroulantes qui vont au-delà des formulaires de contact habituels. Voici quelques-uns de nos cas d'utilisation créatifs préférés pour vous inspirer :

🛍️ Configureurs de produits – Cela permet aux utilisateurs de personnaliser les produits, comme « Choisissez votre couleur », « Sélectionnez la taille » ou « Choisissez une finition ». C'est parfait pour les pages de produits WooCommerce ou les formulaires de commande personnalisés.

📅 Planification de rendez-vous – Les petites entreprises ou les sites Web de services peuvent profiter des listes déroulantes en cascade pour les dates et les créneaux horaires. C'est particulièrement utile pour les systèmes de réservation ou les demandes de consultation.

🗺️ Services basés sur la localisation – Vous pouvez ajouter des listes déroulantes pour la sélection du pays, de l'état et de la ville tout en intégrant des cartes dans vos formulaires. Cela peut être très utile pour les services de livraison ou les annuaires d'entreprises locales.

✏️ Formulaires de quiz – Les listes déroulantes sont également parfaites pour les questions à choix multiples. Si vous gérez un cours en ligne, vous pouvez utiliser ces champs pour que tout soit propre et organisé !

Surtout, vous pouvez toujours personnaliser et styliser vos formulaires WordPress davantage, afin qu'ils s'intègrent à la conception de votre site web.

FAQ : Utilisation des champs déroulants dans les formulaires WordPress

Voici les réponses à certaines des questions les plus fréquentes concernant l'utilisation des champs déroulants dans WordPress.

Quel est le meilleur plugin pour créer des formulaires avec des champs déroulants ?

Nous recommandons WPForms comme meilleure option. Ses outils d'IA accélèrent le processus, le constructeur par glisser-déposer est très facile à utiliser, et le champ déroulant est inclus même dans la version gratuite WPForms Lite.

Pour des fonctionnalités avancées comme la logique conditionnelle, la version WPForms Pro est une excellente mise à niveau.

Puis-je ajouter gratuitement des champs déroulants à mes formulaires ?

Oui ! Le plugin gratuit WPForms Lite inclut le champ de liste déroulante standard, vous permettant de créer des formulaires organisés et conviviaux sans dépenser un centime.

Les champs déroulants sont-ils adaptés aux mobiles ?

Absolument. Lorsque vous utilisez un plugin de qualité comme WPForms, tous les champs du formulaire sont entièrement réactifs. Cela signifie que les menus déroulants s'ajustent automatiquement pour avoir fière allure et fonctionner de manière fluide sur les ordinateurs de bureau, les tablettes et les smartphones.

Puis-je utiliser des images comme choix dans mes champs de formulaire ?

WPForms Pro inclut une fonctionnalité « Choix d'images » pour les boutons radio et les cases à cocher. Bien que cela ne soit pas disponible pour les listes déroulantes, cela permet aux utilisateurs de choisir parmi des options visuelles, parfait pour la sélection de produits et les formulaires similaires.

Ressources supplémentaires : Maîtrisez vos formulaires WordPress

Nous espérons que ce guide vous a aidé à apprendre comment créer des formulaires WordPress avec des champs déroulants. Si vous avez trouvé cela utile, voici quelques guides sélectionnés pour vous aider à en tirer le meilleur parti :

• Comment personnaliser et styliser vos formulaires WordPress
• Comment utiliser un formulaire de contact pour développer votre liste d'e-mails
• Comment bloquer le spam des formulaires de contact dans WordPress 
• Comment suivre et réduire l'abandon de formulaire dans WordPress
• Guide ultime pour l'utilisation des 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.