Masque de saisie pour champs BreezingForms

Lors de la saisie d'un formulaire, afin de guider l'internaute, j'aimerais lui proposer un formatage particulier et imposé pour certains champs.

Est-ce que cela est réalisable avec BreezingForms ?

C'est en effet faisable, avec BreezingForms mais aussi probablement avec d'autres gestionnaires de formulaires puisque nous allons user d'un petit plugin externe à BreezingForms et à Joomla! en plus d'un petit peu de code dans les options du formulaire.

Niveau: Moyen
Version BF minimale requise: BreezingForms Lite

Nous allons commencer par nous rendre à cette adresse et y télécharger le plugin jQuery Masked Input de digitalBush.

Après téléchargement, dézippez l'archive et renommez le répertoire principal en maskedinput pour plus d'aisance. Chargez le tout dans un répertoire de votre site.
Pour ce tutoriel, j'ai chargé le répertoire dans includes/js (js que j'ai créé). Le chemin vers ce plugin sera donc includes/js/maskedinput/.

Il faut maintenant préparer votre formulaire s'il n'est pas déjà fait.

Lorsque votre formulaire est prêt et enregistré, il faut récupérer les ID des champs auxquels on appliquera les "masques".

Faites une prévisualisation du formulaire, faites un clic droit sur un champ à formater et examinez l'élément à l'aide de l'inspecteur de votre navigateur afin d'en relever son ID, elle se présente comme suit : ff_elem6138 (le nombre dépend de chaque situation et chaque champ à son ID).

Faites de même avec les autres champs à formater… N'hésitez pas à noter sur papier les ID de vos champs à formater afin de les avoir sous la main lors de l'édition du script que l'on va mettre en place.

Dans le cas de ce tuto, le formulaire prévu contient 3 champs : Date, Téléphone et IBAN dont les ID sont respectivement ff_elem6138, ff_elem6139 et ff_elem6140.

Maintenant, rendez-vous dans les propriétés avancées de votre formulaire et cliquez le bouton Plus d'options puis ouvrez l'onglet Pièces de formulaire.

Dans la partie Avant le formulaire, cochez l'option Personnalisé et entrez le code suivant :

echo '<script src="/includes/js/maskedinput/src/jquery.maskedinput.js" 
type="text/javascript"></script>';
echo '<script>
jQuery(function($){
     $("#ff_elem6138").mask("99.99.9999");
     $("#ff_elem6139").mask("+99 9 999999?99");
     $("#ff_elem6140").mask("aa99 9999 9999 9999 9999 99");
});
</script>';

Si vous avez chargé votre plugin dans un autre répertoire que celui mentionné dans ce tutoriel, vous veillerez à adapter le chemin vers le script !

Dans ces masque, le chiffre "9" indique que le caractère à taper doit être un chiffre, la lettre "a" correspond à la nécessité de taper une lettre. Le caractère * permet la frappe de n'importe quel caractère alpha-numérique (A-Z,a-z,0-9).

Dans le premier champs, j'ai une date dont les parties sont séparées par un point (et oui, je suis en Allemagne et cela correspond (entre autre) au format de date chez nous).

Le second serait un numéro de téléphone de type français avec préfixe de pays, etc. le caractère ? indique que les caractères suivants ne sont pas obligatoires.

Le troisième correspond à un code IBAN allemand formaté de deux lettres suivies de deux chiffres, 4 séries de 4 chiffres puis deux chiffres.

Le plugin permet divers formatages, vous pourrez vous référer au fichier README.txt inclus dans l'archive téléchargée et / ou plus bas sur la page de téléchargement du plugin.

Lorsque vos masques sont prêts, il reste à enregistrer le script à l'aide du bouton idoine. Vous pouvez alors sortir de l'interface "Plus d'options" afin de revenir sur votre formulaire, enregistrez-le lui aussi une fois de plus par sécurité et testez-le à l'aide de la prévisualisation.

Il vous reste à adapter ce tutoriel à vos propres formulaires et selon vos propres besoins.

Voici ci dessous le formulaire de trois champs formatés par les masques comme ils sont renseignés ci-dessus dans le script.

Inspiré de: https://crosstec.org/en/support/online-documentation/breezingforms/12-examples-scripts/67-masked-field-input.html

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !