Souhaitez-vous imposer un format spécifique pour un champ de formulaire ? Les masques de saisie personnalisés vous permettent de définir des règles pour les valeurs que les utilisateurs sont autorisés à entrer dans un champ. Cela peut être utile pour les numéros de téléphone internationaux, les codes postaux, etc.
Ce tutoriel vous montrera comment créer et ajouter un masque de saisie personnalisé à un champ de formulaire.
Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress. Créez ensuite un nouveau formulaire ou modifiez un formulaire existant.
Ajout d'un masque de saisie personnalisé
Vous pouvez ajouter un masque de saisie personnalisé à n'importe quel champ de type Single Line Text. Après avoir ajouté ce type de champ à votre formulaire, cliquez dessus pour ouvrir son panneau d'options.
Dans les options du champ, vous devez cliquer sur l'onglet Avancé. Vous pouvez ensuite ajouter votre règle au champ Masque d'entrée.
Masques d'entrée de base
Pour créer les règles d'un masque de saisie personnalisé, vous devez utiliser un ensemble spécifique de caractères spéciaux.
9: Numérique (0-9)a: Alphabétique (a-z ou A-Z)A: Majuscules alphabétiques (A-Z)*: Alphanumérique (0-9, a-z, ou A-Z)&: Lettres majuscules alphanumériques (0-9 ou A-Z)
Par exemple, si vous souhaitez exiger un numéro à 5 chiffres, vous devez saisir 5 9dans le champ Masque d'entrée.
Lorsque l'utilisateur clique sur ce champ de formulaire dans la partie frontale, il voit un trait de soulignement ou un "blanc" pour chaque caractère requis afin de l'aider à saisir ses données. En outre, comme nous avons utilisé la méthode 9 le masque de saisie n'acceptera que des valeurs numériques (pas de lettres ni d'autres caractères).
Vous pouvez également inclure des symboles tels que des tirets (-) ou des parenthèses dans votre masque de saisie. Par exemple, vous pouvez utiliser le masque de saisie suivant pour exiger un format de numéro de téléphone avec l'indicatif de pays des États-Unis :
+1 (999)-999-9999
Lorsqu'un utilisateur clique dans ce champ, il voit des blancs à la place de la mention 9s. Les +1, les parenthèses et les traits d'union sont automatiquement saisis dans le champ, de sorte que les utilisateurs n'ont qu'à remplir les chiffres.
Il est important de noter que les utilisateurs ne peuvent pas soumettre un formulaire s'ils n'ont rempli que partiellement un masque de saisie. Il doit saisir le nombre et le type de caractères requis par le masque de saisie, faute de quoi un message de validation s'affichera : "Veuillez remplir tous les espaces vides".
Remarque : vous souhaitez modifier le message de validation que les utilisateurs verront s'ils ne remplissent pas un masque de saisie ? Consultez notre tutoriel sur la personnalisation des messages de validation.
Toutefois, l'ajout d'un masque de saisie à un champ ne rend pas ce dernier obligatoire. Les utilisateurs peuvent toujours soumettre le formulaire si le masque de saisie d'un champ non obligatoire est complètement vide.
Ajouter des caractères optionnels à vos masques de saisie
Il peut arriver que vous souhaitiez exiger un format spécifique pour un champ, tout en autorisant un nombre variable de caractères. Par exemple, dans de nombreux pays, les numéros de téléphone des différentes régions peuvent contenir un nombre différent de chiffres.
Placez les caractères facultatifs entre crochets comme suit :
99 9999-9999[9]
Le dernier chiffre étant facultatif, ce masque de saisie accepterait 10 chiffres, comme par exemple 98 7654-3210ou 11 chiffres, tels que 98 7654-32109.
Autres exemples de caractères facultatifs dans les masques de saisie
Nom d'utilisateur avec 6-8 lettres (première lettre en majuscule, les autres en minuscules)
- Masque :
Aaaaa[a][a] - Exemple d'entrée : Sullie ou Sulliewp
Code postal américain avec l'option +4 :
- Masque :
99999[-9999] - Exemple d'entrée : 98765 ou 98765-4321
Remarque : les utilisateurs doivent toujours remplir tous les espaces pour les caractères facultatifs dans les masques de saisie. Par exemple, les utilisateurs ne peuvent pas saisir "33409-40" dans le masque de saisie du code postal +4 ci-dessus et soumettre le formulaire.
Pour créer des masques de saisie avec des plages flexibles de caractères facultatifs, veuillez consulter les options avancées de masque de saisie ci-dessous.
Échapper aux caractères spéciaux du masque
En raison des caractères spéciaux utilisés par les masques de saisie pour créer les formats requis, certaines lettres, certains chiffres et certains symboles peuvent apparaître comme des blancs lorsque vous ne le souhaitez pas.
Pour éviter de convertir l'un des caractères spéciaux du masque d'entrée en blanc sur le frontend, vous pouvez simplement ajouter deux barres obliques inverses (\\N) devant le caractère.
À titre d'exemple, créons un masque de saisie pour une URL Instagram.
Si nous saisissons le masque de saisie sous la forme https://instagram.com/*{1,30}, tous les a seront convertis en espaces vides que les utilisateurs devront remplir sur le frontend.
Pour y remédier, il suffit d'ajouter une double barre oblique inverse devant chaque a que nous ne voulons pas convertir en blanc. Ainsi, pour cet exemple, nous saisirons le masque de saisie sous la forme suivante https://inst\\agr\\am.com/*{1,30} dans les options du champ.
Désormais, lorsque nous afficherons ce champ dans le formulaire intégré, les espaces vides n'apparaîtront qu'à l'endroit prévu.
Autres exemples d'échappement de caractères spéciaux dans les masques de saisie
SKU du produit (2 9 suivis de 3 chiffres ou lettres majuscules supplémentaires)
- Masque :
\\9\\9-&&& - Exemple d'entrée : 99-654 ou 99-BC8
Adresse Gmail
- Masque :
*{1,50}@gm\\ail.com - Exemple d'entrée : [email protected]
Masques de saisie avancés
Si vous souhaitez contrôler davantage les masques de saisie de votre formulaire, vous pouvez également utiliser des options de formatage avancées. Elles fonctionnent en combinaison avec tous les caractères de masque spéciaux décrits ci-dessus.
Caractères répétitifs
Vous pouvez utiliser n'importe lequel des caractères spéciaux devant {n} (où n est une valeur numérique) pour exiger un caractère répétitif.
Exemples de masques de saisie avec des caractères répétitifs
Code postal américain avec option +4
- Masque :
9{5}[-9{4}] - Exemple d'entrées : 33409 ou 33409-4053
Numéro d'ordre à 12 caractères avec chiffres et lettres majuscules
- Masque :
&{12} - Exemple d'entrées : 29X483HK8192 ou 10G7382ZR638
Plages de caractères flexibles
Vous pouvez utiliser n'importe lequel des caractères spéciaux devant {n,m} (où n et m représentent des valeurs numériques) pour permettre aux utilisateurs d'entrer une série de caractères.
Exemples de masques d'entrée à plages flexibles
URL Facebook (5 à 50 caractères) :
- Masque :
https://f\\acebook.com/*****[*{0,45}] - Exemple d'entrées : https://facebook.com/wpforms ou https://facebook.com/monsterinsights
Adresse Twitter (de 4 à 15 chiffres, lettres majuscules ou minuscules)
- Masque :
@****[*{0,11}] - Exemple d'entrée : @easywpforms ou @WPBeginner
Email pour un domaine spécifique (1-51 caractères) :
- Masque :
*[*{0,50}]@mysite.com - Exemple d'entrée : [email protected] ou [email protected]
SKU du produit avec 8-11 caractères (permet des chiffres ou des lettres majuscules) :
- Masque :
&{4}-&{4}[&{0,3}] - Exemple d'entrée : A987-BC65 ou A987-BC65D43
Masquage pour plusieurs valeurs d'entrée possibles
Une autre option consiste à créer un masque de saisie qui acceptera plusieurs valeurs de saisie possibles. Pour ce faire, saisissez une barre oblique inverse suivie des valeurs autorisées entre parenthèses séparées par des barres obliques verticales, comme dans l'exemple suivant \(x|y).
Remarque : Cette option de masque de saisie avancé ne fonctionne pas avec les caractères spéciaux énumérés au début de ce billet. x et y doivent être des chiffres ou des lettres spécifiques que vous voulez que les utilisateurs incluent dans leur saisie.
Exemples de masques permettant plusieurs entrées possibles
Numéro de téléphone avec indicatif de pays pour les États-Unis (+1), l'Australie (+61) ou le Mexique (+52)
- Masque :
+\(1|61|52) 9999999999 - Exemple d'entrées : +1 2127893920 ou +52 3307490285
Numéro de compte enregistré à TN ou KY
- Masque :
\(TN|KY)9{10} - Exemple d'entrées : TN3756284765 ou KY2975387529
Masques de date et d'heure
Vous pouvez également utiliser des masques de saisie personnalisés pour exiger un format de date ou d'heure spécifique.
Remarque : si vous souhaitez proposer un calendrier ou des options déroulantes pour la date ou l'heure, le champ Date/Heure sera probablement mieux adapté qu'un masque de saisie personnalisé.
Pour définir un masque de saisie pour la date ou l'heure, vous devez commencer par date: suivi du format que vous souhaitez exiger.
Masques de date
Les options ci-dessous vous permettent de créer des masques de saisie de date personnalisés qui répondent à vos besoins.
d: Jour du mois sous forme de chiffres ; pas de zéro initial pour les jours à un chiffre.dd: Jour du mois sous forme de chiffres ; zéro en tête pour les jours à un chiffre.m: Mois sous forme de chiffres ; pas de zéro en tête pour les mois à un chiffre.mm: Mois sous forme de chiffres ; zéro en tête pour les mois à un chiffre.yy: L'année est composée des deux derniers chiffres ; zéro en tête pour les années inférieures à 10.yyyy: Année à 4 chiffres
A titre d'exemple, date:dd/mm/yyyy exigera une date telle que 12/08/2021. Lorsqu'un utilisateur visite votre formulaire et survole le champ, il voit des espaces réservés pour le format requis.
Masques temporels
Les options ci-dessous vous permettent de créer des masques de saisie des temps personnalisés qui répondent à vos besoins.
Remarque : N'oubliez pas d'ajouter date: avant votre masque de saisie des temps.
h: Heures ; pas de zéro initial pour les heures à un chiffre (horloge de 12 heures).hh: Heures ; zéro initial pour les heures à un chiffre (horloge de 12 heures).H: Heures ; pas de zéro initial pour les heures à un chiffre (horloge de 24 heures).HH: Heures ; zéro initial pour les heures à un chiffre (horloge de 24 heures).M: Minutes ; pas de zéro pour les minutes à un chiffre. M majuscule pour éviter tout conflit avec les mois.MM: Minutes ; zéro initial pour les minutes à un chiffre. MM en majuscules pour éviter tout conflit avec les mois.s: Secondes ; pas de zéro initial pour les secondes à un chiffre.ss: Secondes ; zéro initial pour les secondes à un chiffre.l: Millisecondes. 3 chiffres.L: Millisecondes. 2 chiffres.t: Chaîne de repères temporels en minuscules, à un seul caractère : a ou p.tt: Chaîne de repères temporels à deux caractères : am ou pm.T: Chaîne de repères temporels à un seul caractère : A ou P.TT: Chaîne de repères temporels à deux caractères : AM ou PM.
A titre d'exemple, date:h:MM permettra aux utilisateurs d'entrer une heure telle que 8:30. Sur le site web, les utilisateurs verront des espaces réservés dans le champ lorsqu'ils le survoleront.
Utilisation d'alias pour ajouter des masques de saisie
Vous pouvez saisir un alias dans le champ Masque d'entrée dans les options de champ avancées pour utiliser un masque d'entrée préemballé.
Les alias de masque de saisie disponibles dans WPForms sont les suivants :
alias:numeric: Permet aux utilisateurs d'entrer n'importe quelle valeur numérique.alias:currency: Permet aux utilisateurs d'entrer des valeurs numériques au format 0.00.alias:decimal: Permet aux utilisateurs d'entrer n'importe quelle valeur numérique avec ou sans décimale.alias:integer: Permet aux utilisateurs d'entrer n'importe quel nombre entier.alias:percentage: Permet aux utilisateurs d'entrer un nombre de 1 à 100 sous forme de pourcentage.alias:url: Ajoute un masque de saisie pour une URL commençant parhttp://.alias:email: Ajoute un masque de saisie pour une adresse électronique.
Remarque : Gardez à l'esprit que alias:email et alias:URL ne vérifient pas si les utilisateurs ont saisi un format d'adresse électronique ou d'adresse web valide. Si vous souhaitez valider la saisie de ces informations par les utilisateurs, envisagez d'utiliser la fonction Courriel et Site web / URL à la place.
Questions fréquemment posées
Ici, nous allons discuter des questions les plus courantes que nous recevons à propos des masques de saisie dans WPForms.
L'utilisation d'une limite de longueur avec un masque de saisie restreint-elle la saisie de caractères dans les champs de texte à ligne unique ?
Oui. Lorsque vous ajoutez des limites de caractères et des masques de saisie dans des champs de texte à ligne unique, tout est pris en compte dans la limite, y compris les symboles tels que les tirets. Pour que les utilisateurs puissent saisir leurs informations sans problème, ajustez la limite de caractères pour inclure ces symboles supplémentaires.
Pour plus d'informations sur l'ajustement des limites de caractères, consultez notre guide sur la limitation des caractères et des mots.
Voilà qui est fait ! Vous pouvez maintenant créer des masques de saisie personnalisés pour exiger des formats spécifiques dans les champs de vos formulaires.
Ensuite, vous souhaitez rendre vos formulaires plus compacts ? N'oubliez pas de consulter notre tutoriel sur l'utilisation des mises en page multi-colonnes pour apprendre à organiser les champs en lignes dans votre formulaire.