Utilisation de masques d'entrée personnalisés

Souhaitez-vous exiger 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 à saisir dans un champ. Cela peut être utile pour les numéros de téléphone internationaux, les codes postaux, et plus encore.

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. Ensuite, créez un nouveau formulaire ou modifiez-en un existant.

Ajout d'un masque de saisie personnalisé

Vous pouvez ajouter un masque de saisie personnalisé à n'importe quel champ Texte sur une seule ligne. Après avoir ajouté ce type de champ à votre formulaire, cliquez dessus pour ouvrir son panneau Options du champ.

Dans les options du champ, vous devrez cliquer sur l'onglet Avancé. Ensuite, vous pourrez ajouter votre règle au champ Masque de saisie.

Masques de saisie de base

Pour créer les règles d'un masque de saisie personnalisé, vous devrez utiliser un ensemble spécifique de caractères spéciaux.

• 9 : Numérique (0–9)
• a : Alphabétique (a–z ou A–Z)
• A : Alphabétique majuscule (A–Z)
• * : Alphanumérique (0–9, a–z ou A–Z)
• & : Alphanumérique majuscule (0–9 ou A–Z)

Par exemple, si vous souhaitez exiger un nombre à 5 chiffres, vous entreriez 5 9 dans le champ Masque de saisie.

Lorsque les utilisateurs cliquent dans ce champ de formulaire sur le front-end, ils verront un trait de soulignement ou un « blanc » pour chaque caractère requis afin de guider leur saisie. De plus, comme nous avons utilisé le symbole 9, le masque de saisie n'acceptera que les valeurs numériques (pas de lettres ou 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 pourriez utiliser le masque de saisie suivant pour exiger un format de numéro de téléphone avec l'indicatif du pays des États-Unis :

+1 (999) 999-9999

Lorsqu'un utilisateur clique dans ce champ, il verra des blancs à la place des 9. Le +1, les parenthèses et les tirets 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 qu'un masque de saisie partiellement. Ils doivent entrer le nombre et le type de caractères requis par le masque de saisie, sinon ils verront un message de validation indiquant : « Veuillez remplir tous les blancs. »

Cependant, l'ajout d'un masque de saisie à un champ ne le rend pas obligatoire. Les utilisateurs peuvent toujours soumettre le formulaire si le masque de saisie dans un champ non obligatoire est complètement vide.

Ajout de caractères facultatifs à vos masques de saisie

Parfois, vous voudrez peut-être exiger un format spécifique pour un champ, mais aussi permettre un nombre flexible de caractères. Par exemple, dans de nombreux pays, les numéros de téléphone dans différentes régions peuvent contenir un nombre différent de chiffres.

Placez les caractères facultatifs entre crochets comme ceci :

99 9999-9999[9]

Comme le dernier chiffre est facultatif, ce masque de saisie accepterait 10 chiffres, tels que 98 7654-3210, ou 11 chiffres, tels que 98 7654-32109.

Exemples supplémentaires de caractères facultatifs dans les masques de saisie

Nom d'utilisateur avec 6 à 8 lettres (première lettre majuscule, les autres minuscules)

• Masque : Aaaaa[a][a]
• Exemple de saisie : Sullie ou Sulliewp

Code postal américain avec +4 facultatif :

• Masque : 99999[-9999]
• Exemple de saisie : 98765 ou 98765-4321

Échappement des caractères spéciaux de masque

En raison des caractères spéciaux que les masques de saisie utilisent pour créer des formats requis, il existe certaines lettres, chiffres et symboles qui peuvent apparaître comme des blancs alors que vous ne le souhaitez pas.

Pour éviter que l'un des caractères spéciaux de masque de saisie ne soit converti en blancs côté client, vous pouvez simplement ajouter deux barres obliques inverses (\\) devant le caractère.

À titre d'exemple, créons un masque de saisie pour une URL Instagram.

Si nous entrons le masque de saisie comme https://instagram.com/*{1,30}, tous les caractères a seront convertis en blancs que les utilisateurs devront remplir côté client.

Pour corriger cela, il suffit d'ajouter une double barre oblique inverse devant tout a que nous ne voulons pas convertir en blanc. Donc, pour cet exemple, nous entrerions le masque de saisie comme https://inst\\agr\\am.com/*{1,30} dans les options du champ.

Maintenant, lorsque nous afficherons ce champ dans le formulaire intégré, les blancs n'apparaîtront qu'aux endroits prévus.

Exemples supplémentaires d'échappement de caractères spéciaux dans les masques de saisie

SKU de produit (2 chiffres suivis de 3 chiffres ou lettres majuscules supplémentaires)

• Masque : \\9\\9-&&&
• Exemple de saisie : 99-654 ou 99-BC8

Adresse Gmail

• Masque : *{1,50}@gm\\ail.com
• Exemple de saisie : [email protected]

Masques de saisie avancés

Si vous souhaitez encore plus de contrôle sur 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 l'un 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 caractères répétitifs

Code postal américain avec +4 facultatif

• Masque : 9{5}[-9{4}]
• Exemples d'entrées : 33409 ou 33409-4053

Numéro de commande de 12 caractères avec chiffres et lettres majuscules

• Masque : &{12}
• Exemples d'entrées : 29X483HK8192 ou 10G7382ZR638

Plages flexibles de caractères

Vous pouvez utiliser l'un des caractères spéciaux devant {n,m} (où n et m représentent des valeurs numériques) pour permettre aux utilisateurs de saisir une plage de caractères.

Exemples de masques d'entrée avec des plages flexibles

URL Facebook (autorise 5 à 50 caractères) :

• Masque : https://f\\acebook.com/*****[*{0,45}]
• Exemples d'entrées : https://facebook.com/wpforms ou https://facebook.com/monsterinsights

Pseudo Twitter (autorise 4 à 15 chiffres, lettres majuscules ou minuscules)

• Masque : @****[*{0,11}]
• Exemple d'entrée : @easywpforms ou @WPBeginner

E-mail pour un domaine spécifique (autorise 1 à 51 caractères) :

• Masque : *[*{0,50}]@mysite.com
• Exemple d'entrée : [email protected] ou [email protected]

Référence produit de 8 à 11 caractères (autorise chiffres ou 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 d'entrée qui acceptera plusieurs valeurs d'entrée possibles. Pour ce faire, saisissez une barre oblique inverse suivie des valeurs autorisées entre parenthèses, séparées par des barres verticales, comme dans \(x|y).

Exemples de masques autorisant plusieurs entrées possibles

Numéro de téléphone avec code pays pour les États-Unis (+1), l'Australie (+61) ou le Mexique (+52)

• Masque : +\(1|61|52) 9999999999
• Exemples d'entrées : +1 2127893920 ou +52 3307490285

Numéro de compte commençant par TN ou KY

• Masque : \(TN|KY)9{10}
• Exemples d'entrées : TN3756284765 ou KY2975387529

Masques date / heure

Vous pouvez également utiliser des masques de saisie personnalisés pour exiger un format de date ou d'heure spécifique.

Pour configurer 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

En utilisant les options ci-dessous, vous pouvez créer des masques de saisie de date personnalisés qui répondent à vos besoins.

• d : Jour du mois en chiffres ; pas de zéro initial pour les jours à un chiffre.
• dd : Jour du mois en chiffres ; zéro initial pour les jours à un chiffre.
• m : Mois en chiffres ; pas de zéro initial pour les mois à un chiffre.
• mm : Mois en chiffres ; zéro initial pour les mois à un chiffre.
• yy : Année en 2 chiffres ; zéro initial pour les années inférieures à 10.
• yyyy : Année en 4 chiffres

À 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 verra des espaces réservés pour le format requis.

Masques d'heure

En utilisant les options ci-dessous, vous pouvez créer des masques de saisie d'heure personnalisés qui répondent à vos besoins.

• 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 initial pour les minutes à un chiffre. M majuscule pour éviter les conflits avec les mois.
• MM : Minutes ; zéro initial pour les minutes à un chiffre. MM majuscule pour éviter les conflits 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 marqueur horaire minuscule, en un seul caractère : a ou p.
• tt : Chaîne de marqueur horaire, en deux caractères : am ou pm.
• T : Chaîne de marqueur horaire, en un seul caractère : A ou P.
• TT : Chaîne de marqueur horaire, en deux caractères : AM ou PM.

À titre d'exemple, date:h:MM permettra aux utilisateurs de saisir une heure telle que 8:30. Sur le frontend, 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 entrer un alias dans le champ Masque de saisie dans les options avancées du champ pour utiliser un masque de saisie pré-empaqueté.

Les alias de masques de saisie disponibles dans WPForms incluent :

• alias:numeric : Permet aux utilisateurs de saisir n'importe quelle valeur numérique.
• alias:currency : Permet aux utilisateurs de saisir des valeurs numériques au format 0,00.

• alias:decimal : Permet aux utilisateurs de saisir n'importe quelle valeur numérique avec ou sans décimale.
• alias:integer : Permet aux utilisateurs de saisir n'importe quelle valeur entière.
• alias:percentage : Permet aux utilisateurs de saisir n'importe quel nombre de 1 à 100 sous forme de pourcentage.
• alias:url : Ajoute un masque de saisie pour une URL commençant par http://.
• alias:email : Ajoute un masque de saisie pour une adresse e-mail.

Questions fréquemment posées

Ici, nous aborderons certaines des questions les plus fréquentes que nous recevons concernant les masques de saisie dans WPForms.

Je ne trouve pas l'option Masque de saisie dans les paramètres de mon champ. Où est-elle ?

L'option Masque de saisie n'est disponible que pour le champ Texte de ligne unique. Vous ne la trouverez pas sur d'autres types de champs tels que Téléphone, E-mail, Nombres ou Paragraphe.

Pour utiliser un masque de saisie personnalisé, ajoutez un champ Texte de ligne unique à votre formulaire, cliquez dessus pour ouvrir ses Options de champ, puis accédez à l'onglet Avancé où vous trouverez le champ Masque de saisie.

L'utilisation de Limiter la longueur avec un masque de saisie restreindra-t-elle la saisie de caractères dans les champs de texte de ligne unique ?

Oui. Lorsque vous ajoutez des limites de caractères et des masques de saisie ensemble dans les champs de texte de ligne unique, la limite compte tout, y compris les symboles comme les tirets, dans le cadre de la limite. Pour vous assurer que les utilisateurs peuvent 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.

Pourquoi mes caractères spéciaux échappés sont-ils supprimés du champ masque de saisie ?

Par défaut, WordPress supprime les barres obliques inverses lors du traitement des données du formulaire. Si vous échappez des caractères de masque spéciaux (comme \9 ou \*) et remarquez qu'ils disparaissent, vous pouvez les préserver en activant le slashing des données du formulaire.

Pour ce faire, ajoutez la ligne suivante au fichier wp-config.php de votre site, juste avant la ligne qui dit /* C'est tout, arrêtez de modifier ! */ :

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Cela garantira que les barres obliques inverses soient conservées et que vos masques de saisie fonctionnent correctement. Si vous n’êtes pas sûr de la manière de modifier le fichier wp-config.php de votre site, consultez le guide de WPBeginner sur la modification du fichier wp-config.php dans WordPress.

C'est tout ! Vous pouvez maintenant créer des masques de saisie personnalisés pour exiger des formats spécifiques dans les champs de vos formulaires.

Ensuite, souhaitez-vous rendre vos formulaires plus compacts ? Consultez notre tutoriel sur l'utilisation de mises en page multicolonnes pour apprendre à organiser les champs en lignes dans votre formulaire.