Comment définir un masque de contenu sur un champ de formulaire en fonction de la valeur saisie dans un autre champ

Si vous exigez un format spécifique pour les soumissions de vos formulaires et que vous avez ajouté des avertissements et des descriptions, mais que certaines personnes soumettent malgré tout un format incorrect, vous pouvez utiliser la fonctionnalité de masquage de saisie. Ce masquage est possible avec les champs « Texte court » et « Téléphone ».

Lorsque vous activez le masque de saisie, vous pouvez contraindre les utilisateurs à respecter le format que vous spécifiez.

Watch on youtube

Activer le masque de saisie

Si vous avez déjà ajouté l’élément Texte court ou Téléphone dans votre formulaire, vous pouvez activer le masquage de saisie en suivant ces étapes simples :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’élément Texte court ou Téléphone.
2. Ouvrez le volet Propriétés du champ sélectionné en cliquant sur l’icône en forme d’engrenage.
3. Cliquez sur l’onglet Options et activez/désactivez le masque d’entrée.

Avec le masque de saisie, vous pouvez utiliser les symboles suivants pour formater les valeurs :

• # (symbole dièse) : pour masquer les saisies numériques.
• @ (symbole @) : pour masquer les caractères saisis.
• * (astérisque) : pour masquer les saisies numériques et alphabétiques.

Ajoutez n’importe quel caractère comme valeur fixe ou séparateur entre ces signes de masquage.

Configurer un masque de saisie conditionnelle

Limiter le format de saisie via la barre d’outils est facile à comprendre, mais que se passe-t-il si le format change dans le formulaire en raison des préférences de l’utilisateur dans un autre champ ? Dans ce cas, configurer des conditions s’avère utile. Supposons que nous souhaitions contacter des prospects ou clients situés aux États-Unis et inclure la possibilité de saisir des numéros de téléphone internationaux tout en conservant le format des numéros français.

Il existe deux manières différentes d’y parvenir :

1. Créer plusieurs champs avec des conditions d’affichage/masquage

Pour ce faire, vous devrez créer au moins deux champs pour le même type d’information, l’un toujours rempli et le ou les autre(s) vide(s).

Dans notre formulaire de démonstration, cette méthode a été appliquée au champ Adresse afin de montrer la différence que cette configuration apporte. Voici la configuration :

1. Ajoutez un élément Choix unique comprenant les options proposée, comme sélecteur d’adresse, plus 3 éléments Adresse à votre formulaire, un pour chaque type d’adresse.

2. Cliquez sur l’onglet Paramètres en haut du formulaire.
3. Sélectionnez Conditions dans le volet de gauche.
4. Cliquez sur l’option Afficher/Masquer un champ.

5. Puis, créez une condition qui permet d’afficher le champ en fonction du type d’adresse sélectionné, puis cliquez sur le bouton Enregistrer.

Configurez cette même condition d’affichage/masquage pour les deux autres champs Adresse.

2. Créer un masque conditionnel sur un seul champ

Vous pouvez appliquer une mise en forme conditionnelle à un champ, même si sa valeur reste toujours la même.

Dans notre second formulaire de démonstration, cette méthode a été appliquée au champ Téléphone afin de mettre en évidence l’impact de cette configuration. Si l’activité est principalement locale, il est logique que le format de saisie soit celui des numéros de téléphone français : 07.12.34.56.78 par exemple. En revanche, pour les numéros internationaux qui commencent par un signe plus (+) et qui sont précédés de leur indicatif, le format sera par exemple le suivant : +123.7.12.34.56.78.

Tous les autres caractères ajoutés servent à faciliter le formatage et resteront donc toujours présents. Par exemple, pour le masque d’un numéro de téléphone international du Royaume-Uni, vous saisirez : +##-####-######, ce qui signifie qu’après le troisième chiffre, un tiret est automatiquement ajouté et que quatre chiffres, puis six chiffres supplémentaires peuvent être saisis.

Autres formats :

Numéros de téléphone aux États-Unis : (###) ###-####
Numéros de téléphone internationaux : +###-###-###-####

Pour créer la même chose :

1. Cliquez sur l’onglet Paramètres en haut de votre formulaire.
2. Sélectionnez Conditions dans le volet de gauche.
3. Sélectionnez Activer/Exiger/Formater un champ dans la liste.

4. Configurez la condition selon vos besoins. Cliquez sur le bouton Enregistrer. Pour notre formulaire de démonstration, la condition pour les numéros localisés au Royaume-Uni ressemblerait à la capture d’écran ci-dessous.

5. Reproduisez ces étapes pour ajouter les mêmes conditions à chaque masquage dans votre formulaire.

Il existe de nombreux types d’informations différentes qui peuvent être utilisées avec le masquage de saisie sur votre formulaire ; l’adresse et le numéro de téléphone n’en sont qu’un exemple.

Voici à quoi ressemble le formulaire dedémonstration. Si vous le souhaitez, vous pouvez le dupliquer sur votre compte pour l’examiner élément par élément.

Bien entendu, si vous avez des questions ou besoin d’aide, nous serons ravis de vous assister. Il vous suffit de nous le faire savoir en créant une nouvelle discussion ou en publiant un commentaire ci-dessous.