Comment ajouter un curseur de plage de nombres dans les formulaires WordPress (gratuit)

Les curseurs de plage de nombres dans un formulaire sont vraiment cool et c'est en soi un avantage important car 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 de nombres dans vos formulaires WordPress ? Je vais vous guider à travers la manière la plus simple d'y parvenir ici.

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

Qu'est-ce qu'un curseur de plage WordPress ?

Un curseur de plage WordPress est un champ de formulaire qui permet aux gens de choisir un nombre en faisant glisser une poignée le long d'une piste au lieu de le taper.

Vous définissez les valeurs les plus basses et les plus élevées que le champ accepte, et votre visiteur choisit n'importe quel nombre dans cette plage. Ce petit changement fait plusieurs choses utiles :

• Plus de champs complétés : Faire glisser est plus rapide que de taper, donc les gens sont moins susceptibles de laisser le champ vide ou de le sauter.
• Meilleure qualité des réponses : Vous obtenez un chiffre réel au lieu d'une estimation vague, ce qui fait du curseur un outil de génération de prospects véritablement utile lorsque vous effectuez un suivi.
• Fonctionne sur les téléphones : Une poignée de curseur est plus facile à atteindre sur un écran tactile qu'une saisie de nombre, et elle s'affiche correctement sur n'importe quel thème WordPress que vous utilisez.
• Rien à apprendre : Votre visiteur fait glisser vers la gauche ou vers la droite, il n'y a donc pas de format à mal interpréter et pas d'erreur de validation à rencontrer.

WPForms appelle ce champ le Curseur Numérique, et il se trouve dans le groupe Champs Standard du constructeur de formulaires. Suivez les étapes ci-dessous pour commencer :

Comment ajouter un curseur de plage numérique dans WordPress

Étape 1 : Installer le plugin WPForms

La façon la plus simple d'insérer un curseur de plage numérique dans votre formulaire est d'utiliser WPForms, qui est le plugin de formulaire WordPress le plus adapté aux débutants et qui est équipé d'une tonne de fonctionnalités avancées de création de formulaires.

Ce que j'aime le plus chez WPForms, c'est qu'il offre un champ Curseur Numérique natif. Vous le faites glisser, définissez un minimum et un maximum, et l'étiquette sous la piste commence à afficher la valeur sélectionnée d'elle-même.

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

Créez votre formulaire WordPress maintenant

É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

Maintenant, ajoutons un curseur de plage numérique à votre formulaire. Vous pouvez simplement faire glisser le champ Curseur Numérique depuis le menu Champs Standard 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 :

• Étiquette – 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.
• Valeur – Définissez les valeurs minimale et maximale sélectionnables pour le curseur.
• Valeur par défaut – C'est la valeur que le champ prendrait lorsque le formulaire est 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.

É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 de 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 vos confirmations de 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 selon vos besoins.

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

Ensuite, une fenêtre modale vous demandera si vous souhaitez intégrer ce formulaire dans une nouvelle page ou une page existante. Choisissons la deuxième 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 à l'aide de 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 désormais voir votre formulaire de curseur de plage numérique sur votre site Web, et les visiteurs pourront l'utiliser immédiatement, sans aucune complication.

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 !

FAQ sur les curseurs de plage WordPress

Un curseur de plage WordPress soulève toujours la même poignée de questions, principalement sur ce que couvre la version gratuite et où se situent les limites du champ. Ce sont celles qui reviennent le plus souvent.

Le curseur numérique est-il gratuit dans WPForms ?

Oui, le Curseur Numérique est un Champ Standard, il est donc inclus dans WPForms Lite sans frais et ne nécessite aucun module complémentaire séparé.

Vous n'avez besoin d'une licence payante que pour ce que vous construisez autour, spécifiquement la logique conditionnelle à partir de Basic et au-dessus, et les calculs à partir de Pro.

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

Vous pouvez, et le paramètre s'appelle Valeur par défaut, situé dans l'onglet Avancé des options du champ. Il correspond à votre valeur minimale jusqu'à ce que vous la modifiiez, alors tapez n'importe quel nombre entier dans votre plage pour déplacer la position de départ.

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

C'est exactement à cela que sert le paramètre Incrément, car il contrôle la taille du pas entre une valeur sélectionnable et la suivante.

Un incrément de 5 sur un curseur de 0 à 100 vous donne 0, 5, 10, etc. Assurez-vous simplement que votre incrément divise uniformément votre plage, sinon la poignée s'arrêtera avant votre maximum.

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

Le paramètre Affichage de la valeur dans l'onglet Avancé gère cela, et il est activé par défaut. Le texte indique Valeur sélectionnée : {value}, où {value} se met à jour en direct lorsque votre visiteur fait glisser la poignée.

Vous pouvez réécrire le texte autour de cet espace réservé comme vous le souhaitez, c'est ainsi que vous ajoutez un symbole de devise ou une étiquette d'unité.

Puis-je utiliser un curseur de plage avec deux poignées pour un minimum et un maximum ?

Pas avec un seul champ, car le Curseur Numérique a une seule poignée et vous définissez la plage sur laquelle il se déplace.

Si vous avez besoin que votre visiteur sélectionne une plage, ajoutez deux champs Curseur Numérique étiquetés quelque chose comme Minimum et Maximum. Les deux valeurs sont enregistrées séparément dans l'entrée, elles sont donc faciles à lire et à utiliser par la suite.

Le curseur numérique prend-il en charge les décimales ?

Non, le champ fonctionne uniquement avec des nombres entiers, et cela s'applique au minimum, au maximum, à la valeur par défaut et à l'incrément.

Lorsque vous avez besoin de précision décimale, utilisez plutôt le champ Nombres. Il a son propre paramètre Plage pour les valeurs minimale et maximale, et votre visiteur tape le chiffre plutôt que de le faire glisser.

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

La barre et la poignée du curseur reprennent la couleur de votre bouton de soumission, ainsi que la barre de progression et les points des radios, ce qui maintient la cohérence visuelle de l'ensemble du formulaire.

Ainsi, changer la couleur du bouton de soumission dans les options de style de l'éditeur de blocs change également votre curseur. Vous pouvez également choisir la taille des champs entre Petite, Moyenne et Grande, et modifier l'étiquette depuis le constructeur de formulaire.

Ensuite, créez un formulaire de calculatrice avec votre curseur

L'étape logique suivante consiste à utiliser ce curseur dans une formule, de sorte que le prix évolue en temps réel pendant que votre visiteur prend sa décision.

C'est la raison pour laquelle la plupart des gens ajoutent un curseur à un formulaire en premier lieu, et cela transforme un champ de collecte de données en un champ de vente.

Si vous préférez orienter le curseur vers les commentaires plutôt que vers les prix, ces exemples de sondages NPS montrent comment une échelle de 0 à 10 fonctionne comme une question de satisfaction et ce qu'il faut faire des réponses que vous recevez.

Ajoutez un curseur de plage numérique à votre formulaire maintenant

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é, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.