### [Comment limiter les champs de formulaire avec des masques de saisie (+Exemples)](https://wpforms.com/how-to-create-input-masks-for-your-sites-forms-with-examples/) **Publié le :** 28 mai 2018 **Auteur :** Claire Broadley **Contenu :** Vous voulez apprendre à créer des masques de saisie pour les formulaires de votre site ? La possibilité de personnaliser la façon dont les données sont saisies dans vos formulaires WordPress facilite l'expérience utilisateur et garantit que les bonnes données sont saisies dans votre formulaire à chaque fois. [Créez votre formulaire WordPress maintenant](https://wpforms.com/pricing/) ## Qu'est-ce qu'un masque de saisie ? Les masques de saisie sont un moyen de restreindre les caractères qui peuvent être saisis dans un champ. Par exemple, vous pouvez limiter le champ à n'accepter que des chiffres ou du texte. Vous pourriez également vouloir restreindre le nombre de caractères. Les masques de saisie sont parfaits pour des éléments tels que les numéros de téléphone ou les noms d'utilisateur de médias sociaux qui suivent toujours le même format. ### Comment fonctionnent les masques de saisie Les masques de saisie utilisent les caractères suivants pour construire un modèle pour les données qui seront acceptées : - **9** représente n'importe quel chiffre (0-9) - **a** représente n'importe quelle lettre minuscule ou majuscule - **A** restreint les caractères acceptés aux lettres majuscules - **&** restreint le champ aux caractères alphanumériques majuscules (0-9 ou A-Z) - **\*** permet de saisir n'importe quelle lettre ou chiffre (0-9, a-z ou A-Z) Vous pouvez également ajouter des éléments tels que des tirets ou des parenthèses **( )** dans votre masque de saisie. Ceci est particulièrement utile lorsque vous souhaitez que les gens remplissent leur numéro de téléphone sur le formulaire de votre site.  Si vous souhaitez ajouter des caractères facultatifs, après avoir déjà utilisé les parenthèses, vous devez les placer entre crochets **\[ \]**. Par exemple, ce masque de saisie nécessiterait un minimum de 4 caractères, mais des entrées plus longues seraient également autorisées : `**** [***********]` ### Exemples de masques de saisie Maintenant que vous savez ce qu'est un masque de saisie, il est temps de jeter un coup d'œil à quelques-uns des exemples les plus basiques que vous pouvez utiliser dans vos formulaires WordPress. Code postal des États-Unis : - **Masque :** `99999` - **Saisie utilisateur exemple :** 89023 Code postal des États-Unis avec le complément facultatif : - **Masque :** `99999 [-9999]` - **Saisie utilisateur exemple :** 89023 ou 89023-5678 Nom d'utilisateur avec 6 à 8 lettres (première lettre majuscule, le reste en minuscules) : - **Masque :** `Aaaaaa [aa]` - **Saisie utilisateur exemple :** Minnie ou Minniems Nom d'utilisateur X (anciennement Twitter) avec 4 à 15 chiffres ou lettres majuscules/minuscules : - **Masque :** `@**** [***********]` - **Saisie utilisateur exemple :** @easywpforms Pour obtenir de l'aide sur les symboles avancés de masques de saisie, consultez ce tutoriel sur [l'ajout de masques de saisie à vos formulaires WordPress](https://wpforms.com/docs/how-to-use-custom-input-masks/#advanced). ## Comment créer des masques de saisie sur les champs de formulaire Maintenant que vous avez une bonne idée de ce que sont les masques de saisie, créons-en un. ### 1. Créer un nouveau formulaire WordPress La première chose à faire est d'installer et d'activer le [plugin WPForms](https://wpforms.com). Pour plus de détails, suivez ce guide étape par étape sur [comment installer un plugin dans WordPress](http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/). Ensuite, vous devrez créer un nouveau formulaire. Nous vous recommandons d'utiliser le [Formulaire de contact simple](https://wpforms.com/templates/simple-contact-form-template/) comme point de départ facile pour les tests.  ### 2. Ajouter un champ de texte à ligne unique Pour ajouter un masque de saisie à votre formulaire de contact, vous devrez ajouter un champ de formulaire **Texte à ligne unique**. Faites glisser et déposez le champ de formulaire depuis le panneau de gauche vers l'aperçu du formulaire.  Une fois que vous avez fait cela, cliquez sur le champ du formulaire sur le côté droit pour ouvrir le panneau **Options du champ**.  Cliquez sur l'onglet **Avancé**. C'est là que vous définirez votre masque de saisie personnalisé. Dans notre exemple, nous demanderons aux personnes qui remplissent notre formulaire de saisir leur code postal des États-Unis :  Ce masque restreindra le champ de manière à ce qu'il n'accepte que 5 chiffres. Cliquez sur **Enregistrer**. ### 3. Ajouter votre formulaire à votre site Maintenant que le formulaire de contact est personnalisé avec un masque de saisie, il est temps d'intégrer le formulaire sur votre site web. Cliquez sur le bouton Intégrer et choisissez l'emplacement de votre formulaire.  Ensuite, publiez votre article ou votre page pour que votre formulaire de contact apparaisse sur votre site. Regardez :  Remarquez les tirets qui guident l'utilisateur pour qu'il termine de remplir son code postal. [Créez votre formulaire WordPress maintenant](https://wpforms.com/pricing/) ### Ensuite, prenez le contrôle des soumissions de formulaire Et voilà ! Vous savez maintenant comment créer des masques de saisie pour les formulaires de votre site. Si vous cherchez d'autres moyens de contrôler le fonctionnement de vos formulaires, consultez ces ressources : - [Limitez les entrées du formulaire selon la date](https://wpforms.com/how-to-enable-wordpress-form-scheduling-step-by-step/) avec ce guide simple sur le module complémentaire Form Locker - Empêchez les visiteurs mineurs de remplir vos formulaires avec un [plugin de vérification d'âge](https://wpforms.com/age-verification-plugins-for-wordpress/). Prêt à construire votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. [WPForms Pro](https://wpforms.com/pricing) inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours. Si cet article vous a été utile, suivez-nous sur [Facebook](https://facebook.com/wpforms) et [Twitter](https://twitter.com/easywpforms) pour plus de tutoriels et de guides WordPress gratuits. **Catégories :** Tutoriels WordPress **Tags :** formulaire de contact, conversions, masques de saisie, connexion utilisateur ---