Résumé IA
Souhaitez-vous ajouter un curseur numérique à vos formulaires WordPress ? Un champ curseur numérique permet à vos utilisateurs de cliquer et de faire glisser un sélecteur pour choisir une valeur sur une ligne numérique.
Ce tutoriel vous montrera comment utiliser le champ curseur numérique dans WPForms.
Avant de commencer, vous devez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.
Ajouter un champ curseur numérique à votre formulaire
Après avoir ouvert le générateur de formulaires, regardez sous Champs standard pour trouver l'option Curseur numérique. Cliquez simplement dessus ou faites-la glisser et déposez-la dans la zone d'aperçu pour l'ajouter à votre formulaire.
Configuration des options du champ curseur numérique
Une fois que vous avez ajouté le champ à votre formulaire, cliquez dessus dans la zone d'aperçu pour ouvrir son panneau Options de champ. Ci-dessous, nous allons passer en revue chaque paramètre disponible ici, en utilisant un formulaire de réservation de restaurant comme exemple.
Libellé et description
Dans les options du champ Curseur numérique, vous pouvez personnaliser son libellé et sa description. Le libellé sera par défaut « Curseur numérique », mais vous pouvez le modifier comme vous le souhaitez.
Pour notre exemple de réservation de restaurant, nous changerons le libellé en « Combien de personnes y aura-t-il dans votre groupe ? »
La description du champ vous donne la possibilité d'ajouter du texte supplémentaire à votre formulaire, tel que des instructions sur la façon d'utiliser le curseur numérique. Vous pouvez saisir le texte de votre choix dans le champ fourni.
Valeurs minimale et maximale
Vous pouvez également personnaliser les valeurs minimale et maximale qu'un utilisateur peut sélectionner dans les paramètres Valeur. Les valeurs par défaut seront de 0 à 10, mais vous pouvez les remplacer par les nombres entiers de votre choix.
Pour notre exemple, nous définirons le minimum à 1 personne et le maximum à 20 personnes.
Configuration des options avancées du curseur numérique
Vous pouvez personnaliser la taille du champ, la valeur par défaut et la valeur d'incrémentation dans l'onglet Avancé du panneau des options de champ. Cliquez dessus dans le générateur de formulaires pour accéder à ces paramètres supplémentaires.
Taille du champ
Par défaut, la taille du champ est définie sur Moyen. Cependant, vous avez la possibilité de changer la longueur de votre curseur en Petit, Moyen ou Grand.
Ci-dessous, des exemples de ce à quoi ressemblera chaque taille de champ sur le frontend de votre site :
Valeur par défaut
La valeur par défaut détermine où le curseur sera positionné lorsque les utilisateurs ouvriront votre formulaire. Il sera automatiquement défini sur la valeur minimale que vous choisissez dans les options du champ.
Cependant, vous pouvez l'ajuster à n'importe quel nombre entier dans la plage de votre curseur numérique en saisissant la valeur souhaitée dans le champ Valeur par défaut.
Remarque : Pour plus de détails sur la définition des valeurs par défaut pour les champs de vos formulaires, consultez notre tutoriel complet sur cette option.
Affichage de la valeur
Par défaut, l'étiquette sous votre curseur indiquera « Valeur sélectionnée : {value} ». La balise {value} récupère le nombre actuellement sélectionné par l'utilisateur afin qu'il puisse vérifier qu'il est correct.
Vous pouvez modifier ce que l'étiquette indique sous Affichage de la valeur.
Cependant, nous vous recommandons de laisser la balise {value} en place afin que les utilisateurs puissent confirmer leur sélection.
Remarque : Vous souhaitez permettre aux utilisateurs de vérifier toutes les informations qu'ils ont saisies dans votre formulaire avant de le soumettre ? Consultez notre tutoriel sur l'affichage des aperçus de saisie dans WPForms pour tous les détails.
Incrément
Ce paramètre détermine la taille du pas pour chaque augmentation de la position du curseur. Par exemple, si vous aviez ce paramètre défini sur 2, chaque augmentation ajouterait 2 à la valeur sélectionnée (0, 2, 4, 6, etc.).
Par défaut, la valeur d'incrément sera définie sur 1. Cependant, vous pouvez la modifier à n'importe quel nombre entier de votre choix sous le paramètre Incrément.
Remarque : Si vous choisissez d'incrémenter votre valeur d'un nombre pair, mais que votre valeur maximale est impaire (ou vice versa), le curseur numérique s'arrêtera au nombre précédant votre valeur maximale.
Configuration de la logique conditionnelle
Si vous le souhaitez, vous pouvez également afficher un message aux utilisateurs qui sélectionnent une valeur particulière en utilisant la logique conditionnelle.
Pour notre exemple de réservation de restaurant, nous afficherons un message aux utilisateurs qui indiquent que leur groupe sera supérieur à 10 personnes. Dans notre message, nous leur ferons savoir qu'un supplément de 20 % de pourboire sera automatiquement ajouté à leur facture.
Pour configurer cela, nous allons d'abord ajouter un champ HTML à notre formulaire avec le texte « Remarque : Un supplément de 20 % de pourboire sera automatiquement ajouté à votre facture pour les groupes de plus de 10 personnes. »
Ensuite, nous configurerons la logique conditionnelle afin que ce champ HTML n'apparaisse que si un utilisateur choisit un nombre supérieur à 10 à l'aide du curseur numérique. Pour ce faire, cliquez sur l'onglet Logique intelligente dans le panneau Options du champ pour le champ HTML et activez le paramètre Activer la logique conditionnelle.
Définissez ensuite la règle qui détermine quand le champ apparaîtra. Pour cet exemple, nous définirons la logique comme suit : « Afficher ce champ si Nombre de personnes dans votre groupe est supérieur à 10. »
Remarque : Besoin d’aide pour configurer votre règle de logique conditionnelle ? Notre tutoriel pour débutants sur l’utilisation de la logique conditionnelle dans WPForms contient tous les détails.
Le champ HTML restera masqué à moins que l'utilisateur ne sélectionne une valeur supérieure à 10 dans le champ Curseur numérique.
C'est tout ! Vous pouvez maintenant ajouter et personnaliser un champ Curseur numérique pour n'importe lequel de vos formulaires.
Ensuite, souhaitez-vous apprendre à analyser les données que vous avez collectées ? Assurez-vous de consulter notre tutoriel sur le module complémentaire Enquêtes et sondages pour savoir comment afficher les statistiques de saisie, générer des rapports, et plus encore.