Comment créer un formulaire avec un curseur de plage numérique dans WordPress

Les curseurs de plage numérique dans un formulaire sont vraiment cool. C'est en soi un avantage important : les visiteurs sont susceptibles de vous faire davantage confiance si vous utilisez des formulaires visuellement impressionnants qui reflètent le professionnalisme.

De plus, les curseurs de plage numérique ajoutent un plus grand niveau d'interactivité à vos formulaires. L'interactivité crée de l'engagement, et ce sont vos visiteurs engagés qui finissent par convertir.

Alors, comment ajouter un curseur de plage numérique dans vos formulaires WordPress ?

Je vais vous montrer la façon la plus simple d'y parvenir ici.

Créer un formulaire avec curseur de plage numérique maintenant

Comment créer un formulaire avec un curseur de plage numérique

Étape 1 : Installer WPForms

La façon la plus simple d'insérer un curseur de plage numérique dans votre formulaire est d'utiliser le plugin WPForms. Bien que vous puissiez utiliser WPForms Lite (la version gratuite) pour créer un formulaire avec le curseur de plage numérique, j'utiliserai WPForms Pro pour ce tutoriel car cela ouvre des tonnes de possibilités supplémentaires pour utiliser le champ curseur de manière intéressante.

Si vous ne savez pas comment installer le plugin, suivez ce guide pour les instructions d'installation de WPForms.

Cela ne prendra que quelques minutes. Lorsque WPForms sera prêt sur votre site, vous pourrez commencer à créer un formulaire avec le curseur numérique.

Étape 2 : Créer un formulaire simple

Depuis votre tableau de bord WordPress, accédez à WPForms » Ajouter nouveau pour créer un nouveau formulaire.

Immédiatement, vous verrez l'écran de configuration du formulaire apparaître dans votre fenêtre. Ici, vous pouvez entrer un nom pour votre formulaire et sélectionner un modèle.

Vous pouvez construire votre formulaire entièrement à partir de zéro (en commençant par un modèle vierge), ou vous pouvez utiliser un modèle prêt à l'emploi pour vous faire gagner encore plus de temps.

Pour cet article, j'utiliserai le modèle Simple Contact Form pour démontrer comment vous pouvez travailler avec un modèle pour insérer des champs supplémentaires comme le curseur numérique.

Après avoir sélectionné le modèle, vous serez dirigé vers l'interface du constructeur de formulaires où vous pourrez soit procéder à l'intégration directe du formulaire sur votre site, soit le personnaliser davantage.

Dans l'étape suivante, nous explorerons le champ curseur de plage numérique et ses paramètres associés.

Étape 3 : Ajouter un curseur de plage numérique

Passons maintenant à l'ajout d'un curseur de plage numérique à votre formulaire.

Vous pouvez simplement faire glisser le champ Number Slider depuis le menu Standard Fields sur votre gauche vers votre formulaire sur la droite.

Pour modifier certains des paramètres et le comportement de ce champ, cliquez sur le Number Slider que vous venez d'ajouter. Vous verrez ses Field Options apparaître dans le volet de gauche maintenant.

Ces options vous permettent de modifier :

• Label – Utilisez ceci pour ajouter un nom représentant la quantité contrôlée par le curseur
• Description – Ceci aide à fournir un contexte supplémentaire, si nécessaire
• Value – Définissez les valeurs minimale et maximale sélectionnables pour le curseur
• Default Value – C'est la valeur que le champ prendra lorsque le formulaire sera chargé pour la première fois
• Incrément – Permet de choisir le montant de l'incrément entre chaque valeur sélectionnable.

Enfin, vous pouvez ajouter des champs supplémentaires à votre formulaire de curseur de plage numérique en les faisant glisser de la gauche vers la droite.

Lorsque vous avez terminé de personnaliser votre formulaire de curseur de plage, cliquez sur Enregistrer dans le coin supérieur droit.

🧮 Créez un formulaire WordPress avec un curseur numérique

Étape 4 : Configurer les notifications et confirmations du formulaire

WPForms vous envoie automatiquement une notification chaque fois que votre formulaire est soumis.

Vous pouvez personnaliser les notifications du formulaire en allant dans Paramètres » Notifications.

Ici, vous pouvez choisir les destinataires de votre notification (qui peut être votre e-mail d'administrateur, la personne qui soumet le formulaire, ou tout autre e-mail codé en dur que vous souhaitez saisir). Les utilisateurs de WPForms Basic et supérieurs peuvent également créer plusieurs notifications de formulaire.

Pendant que vous y êtes, je vous recommande également de vérifier les confirmations de votre formulaire. La confirmation apparaît immédiatement après la soumission d'un formulaire. Il peut s'agir d'un simple message ou d'une redirection vers une autre page en fonction de votre stratégie.

Vous pouvez personnaliser les confirmations en allant dans Paramètres » Confirmations.

Vous pouvez ensuite sélectionner le type de confirmation (Message, Afficher la page, Rediriger vers l'URL) que vous souhaitez et saisir le message et les autres détails nécessaires.

Lorsque vous avez terminé, appuyez à nouveau sur Enregistrer en haut du constructeur de formulaire. Il est temps d'intégrer votre formulaire !

Étape 5 : Ajouter votre formulaire avec curseur de plage numérique à votre site

Après avoir créé votre formulaire, vous devez l'ajouter à votre site web WordPress. WPForms vous permet d'ajouter vos formulaires à de nombreux endroits sur votre site web, y compris vos articles de blog, vos pages et même les widgets de la barre latérale.

Examinons l'option de placement la plus courante : l'intégration dans une page/un article.

Pour commencer, cliquez sur le bouton Intégrer en haut du constructeur de formulaire.

Ensuite, vous verrez une fenêtre modale vous demandant si vous souhaitez intégrer ce formulaire dans une nouvelle page ou une page existante. Optons pour cette dernière option et cliquons sur Créer une nouvelle page.

Donnez un nom à votre page, puis appuyez sur le bouton C'est parti.

Vous vous retrouverez maintenant dans l'éditeur de blocs WordPress avec le formulaire intégré. Si vous le souhaitez, vous pouvez styliser votre formulaire en utilisant l'éditeur de blocs sans aucun code.

Lorsque vous êtes prêt, appuyez sur le bouton Publier pour mettre en ligne votre page avec le formulaire intégré.

Vous pourrez alors voir votre formulaire de curseur de plage numérique sur votre site Web, et les visiteurs pourront commencer à l'utiliser immédiatement.

Pour afficher les soumissions de formulaire après leur soumission, consultez ce guide complet sur les soumissions de formulaire. Par exemple, vous pouvez afficher, rechercher, filtrer, imprimer et supprimer toutes les soumissions de formulaire.

Et voilà ! Vous savez maintenant comment créer un formulaire avec un curseur de plage numérique dans WordPress en utilisant le plugin WPForms afin de pouvoir facilement obtenir des soumissions détaillées de la part des visiteurs de votre site Web !

Créer un formulaire avec curseur de plage numérique maintenant

FAQ sur les formulaires avec curseur numérique

Voici quelques questions que nous recevons souvent de nos utilisateurs intéressés par l'utilisation d'un curseur numérique dans leurs formulaires :

Pourquoi utiliser un curseur de plage numérique ?

L'utilisation d'un curseur de plage numérique sur vos formulaires WordPress offre plusieurs avantages, tels que :

• Détails supplémentaires — Obtenez facilement des informations supplémentaires des personnes qui remplissent votre formulaire. Parce qu'il a une sensation si interactive, vos visiteurs sont beaucoup plus susceptibles de remplir un champ de curseur de plage numérique demandant plus de détails.
• Leads de meilleure qualité — Avec des détails supplémentaires sur vos prospects dès le début, vos prospects deviennent encore meilleurs, faisant d'un formulaire de curseur de plage un excellent outil de génération de leads.
• Adaptatif — Le champ du curseur de plage numérique est superbe sur tous les appareils. Vous pouvez garder votre site et votre thème WordPress adaptatif superbes en ajoutant ce champ.
• Facile à utiliser — Une fois le curseur numérique ajouté à votre formulaire, vos prospects et clients peuvent l'utiliser facilement. Tout ce qu'ils ont à faire est de le faire glisser d'avant en arrière pour ajuster le montant.

Puis-je définir une valeur de départ par défaut pour le curseur ?

Oui, vous pouvez facilement définir une valeur de départ par défaut pour votre formulaire de curseur. Dans WPForms, ce paramètre est accessible depuis les Options de champ du champ Curseur numérique, et est étiqueté Valeur par défaut.  Vous pouvez y taper n'importe quelle valeur numérique pour définir la valeur par défaut.

Ce paramètre peut varier si vous utilisez un autre constructeur de formulaires.

Puis-je faire en sorte que le curseur s'arrête à des incréments spécifiques ?

Absolument ! Le curseur numérique WPForms vous permet de définir une valeur d'incrément. Cela détermine les « pas » d'incrément entre une valeur et la suivante.

Comment afficher la valeur actuellement sélectionnée à côté du curseur ?

Le champ numérique dans WPForms est automatiquement configuré pour afficher la valeur actuellement sélectionnée. Celle-ci se met à jour dynamiquement à mesure que votre visiteur ajuste le curseur, offrant un retour visuel instantané pour une expérience utilisateur idéale.

Comment puis-je personnaliser l'apparence de mon curseur ?

La couleur du curseur, de la barre de progression, des points des champs radio et de divers autres éléments dans WPForms sont tous connectés à la couleur du bouton de soumission. Ceci afin d'assurer la cohérence thématique entre votre bouton de soumission et les autres éléments interactifs de votre formulaire.

Vous pouvez donc changer la couleur de votre curseur numérique en changeant la couleur du bouton de soumission à partir des options de style WPForms faciles disponibles dans l'éditeur de blocs WordPress.

Vous pouvez également modifier l'étiquette de votre curseur et la largeur du champ lors de la modification de votre formulaire à l'aide du constructeur de formulaires.

Quelles sont les meilleures applications pour les curseurs de plage numérique dans les formulaires Web ?

Le curseur de plage numérique est parfait à utiliser lorsque vous souhaitez que les visiteurs puissent sélectionner une quantité dans une plage prédéfinie.

Voici quelques exemples pratiques où nous avons vu nos clients utiliser des curseurs de plage numérique :

• Devis/Estimations : Un curseur de plage numérique fonctionne très bien lorsque ses fonctionnalités de calcul sont utilisées pour offrir un devis en temps réel. Parce qu'il est réglable, il est relativement facile pour les visiteurs de voir comment le devis change lorsqu'ils sélectionnent leurs exigences sur un curseur.
• Sélection de budget : Les entrepreneurs utilisent fréquemment des curseurs pour permettre aux clients d'indiquer leur budget dans une plage soigneusement choisie de valeurs minimale et maximale.
• Durée du service : Si vous êtes un prestataire de services qui accepte des rendez-vous de durées variables, un curseur numérique peut aider les clients à choisir la durée de votre service requise parmi une gamme d'options prédéterminées.
• Questions d'enquête : Certaines questions d'enquête sont faciles à répondre avec un curseur numérique. Par exemple, les questions sur le revenu du ménage ou l'âge du répondant peuvent être présentées sous forme de curseur.
• Bilans de bien-être : Dans un contexte de soins de santé, les formulaires à curseur sont souvent utilisés pour évaluer le niveau de douleur, le stress mental, la qualité du sommeil et d'autres questions similaires.

Ce ne sont là que quelques exemples. Vous pouvez utiliser le curseur numérique dans une grande variété de contextes.

Ensuite, explorez les exemples d'enquêtes NPS

Vous voulez savoir ce que pensent les visiteurs de votre site Web ? Consultez cet article avec des exemples d'enquêtes NPS pour voir à quel point il est facile de mettre un sondage sur votre site et de recueillir des commentaires précieux.

Alors qu'attendez-vous ? Commencez dès aujourd'hui avec le plus puissant plugin de formulaires WordPress. WPForms Pro est livré avec un formulaire de curseur de plage numérique gratuit et offre une garantie de remboursement de 14 jours.

Et n'oubliez pas, si vous aimez cet article, suivez-nous sur Facebook et Twitter.