Améliorer le rendu des alertes JavaScript BreezingForms

Dans ce tutoriel, nous allons redonner une allure bien plus jolie aux popups d'alertes. Nous allons même pouvoir pousser un peu leur personnalisation.

Niveau : Facile
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4 : Oui

Un peu d'histoire…

Dans d'anciennes versions de BreezingForms, lorsque l'utilisateur entrait une valeur non autorisée ou mal formatée dans un champ, l'alerte JavaScript était jolie. Ces alertes ont, semble-t-il, disparu probablement suite à une mise à jour importante ou l'option a été omise.

Elles ressemblaient alors à ceci
Swal 04

Aujourd'hui, c'est à ceci qu'elles ressemblent
Swal 01

Autant dire que ça change, et pas dans la bonne direction. Nous allons donc retrouver ce popup d'il fut un temps et nous allons l'améliorer par de simples options.

  •  Avantage : Une plus-value au design du site, une expérience utilisateur plus agréable.
  •  Inconvénient : En cas de mise à jour, il se peut (sans certitude) que ce que nous verrons dans ce tutoriel soit à refaire. Rassurez-vous, il n'y a rien de très compliqué.

Dans ce passé pas si lointain, BreezingForms intégrait un JavaScript qui générait ce popup plus jolie. On en retrouve d'ailleurs encore des traces. Le JavaScript est toujours installé par BreezingForms dans un répertoire sur le site, il suffira de le charger à nouveau et de modifier les scripts de validation.

Chargement du JavaScript "Sweet Alert"

C'est en effet le JavaScript Sweet Alert qui permettra d'obtenir ces popups d'avertissement plus agréables à regarder et cerise sur le gâteau, c'est assez paramétrable.

Afin de vous assurer de la présence du script dans votre installation, rendrez-vous, à l'aide d'un client FTP (FileZilla, Cyberduck, etc.) sur l'installation de votre site chez votre hébergeur et dans le répertoire selon le chemin suivant : root/components/com_breezingforms/libraries/js/. Assurez-vous que le script nommé sweetalert.min.js s'y trouve bien.
S'il y est, c'est parfait, sinon, vous pouvez le télécharger l'adresse suivante, faites alors un clic droit sur la page puis enregistrer sous… quelque part sur votre disque dur avant de le charger sur votre hébergement par FTP selon le chemin renseigné précédemment.

Une fois que le script est assurément en place, il reste à donner au formulaire l'instruction de le charger.

Mise en place du code de chargement

Ouvrez votre formulaire et dans ses propriétés, onglet Avancé → Plus d'options → Onglet Pièces de formulaire → Avant le formulaire, cochez l'option "Personnalisé" et dans la zone de texte qui apparaît, entrez le petit bout de code suivant :

echo '
<script type="text/javascript" src="/components/com_breezingforms/libraries/js/sweetalert.min.js"></script>
';

Vous pouvez enregistrer votre formulaire.

Cette action est à répéter sur chaque formulaire sur lequel vous souhaitez utiliser ce beau popup.

Modification des scripts de validation

Dans le menu de navigation de BreezingForms, sélectionnez l'onglet "Scripts".

Dans l'idéal il faudra modifier tous les scripts qui sont composés du mot "validate". On en dénombre 5, nommés respectivement

  1. ff_validate_form
  2. ff_validate_nextpage
  3. ff_validate_page
  4. ff_validate_prevpage
  5. ff_validate_submit

Ouvrez le dernier, ff_validate_submit -- c'est celui qui nous aidera au mieux à paramétrer l'affaire -- en cliquant son titre.

Le code de ce script se présente comme suit

function ff_validate_submit(element, action)
{
    if(typeof bfUseErrorAlerts != 'undefined'){
     JQuery(".bfErrorMessage").html('');
     JQuery(".bfErrorMessage").css("display","none");
    }
    error = ff_validation(0);
    if (error != '') {
        if(typeof bfUseErrorAlerts == 'undefined'){
           alert(error);
           ff_validationFocus();
        }

        else {
           bfShowErrors(error);
        }
        ff_validationFocus();
    } else
        ff_submitForm();
} // ff_validate_submit

Nous allons modifier la partie alert(error); et changer "alert" par swal swal(error);

Enregistrez la modification et testez le formulaire sur lequel vous avez au moins un script de validation et validez ce formulaire sans remplir le champ obligatoire afin de provoquer l'erreur et afficher le popup.

Votre popup se présente désormais comme suit avec les messages des champs invalidés
Swal 04

Personnalisation

Nous allons agrémenter ce popup de quelques fioritures qui rendront son aperçu encore un peu plus attrayant. Nous allons lui ajouter un titre, une icône qui attire bien l'attention sur le fait qu'il s'agisse d'une erreur, en personnaliser le texte du bouton et bien sûr les messages d'erreur paramétrés par champ avec une petite icône le précédent.

Personnalisation du popup

Rouvrez votre script préalablement modifié. Nous allons lui ajouter quelques petites lignes.

En lieu et place du code swal(error);, plaçons le code suivant (code avec explications en commentaire)

           swal({
                title:      'Une erreur s\'est produite', // le titre de la popup
                text:        error, // les messages d'erreur paramétré par champ requis
                icon:       'error', // l'icône erreur animée
                button:     'Corriger', // le texte du bouton
                });

Vous trouverez la documentation sur le site du script.

Dans cette partie de script, veillez à échapper les apostrophes des valeurs par un Backslash (caractère "\") sous peine de provoquer une erreur.

Enregistrez les modifications et testez à nouveau votre formulaire. Votre popup s'affiche désormais comme ceci
Swal 02

Lorsque vous êtes satisfait de votre résultat, réitérez les modifications pour chacun des scripts de validation mentionnés en début de tutoriel.

Petite amélioration visuelle des messages d'erreur.

Rendez-vous sur un site sur lequel vous pouvez copier, coller un Émoji (https://getemoji.com/ p. ex.). Ces "Smileys" sont devenus standards et compris par tous les navigateurs. Copiez l'icône que vous souhaitez placer devant votre texte.

Dans le formulaire, sélectionnez un champ requis pour lequel vous avez renseigné un message d'erreur en cas de saisie non souhaitée.

Juste avant son texte d'erreur, collez l'icône précédemment copiée et ajoutez une espace. Recommencez l'opération pour chacun des champs associés à un message d'erreur. Votre inspiration vous permettra d'utiliser des icônes identiques pour chaque message ou des différentes pourquoi pas…

Faites toutefois attention, certaines ne permettront pas l'enregistrement du formulaire, elles sont donc à éviter. Faites vos tests, en cas d'échec d'enregistrement il faudra éventuellement fermer le formulaire et le rouvrir pour le rééditer.

Pour l'exemple, j'ai utilisé l'icône ⛔️

Avant

Swal 01

Après

Swal 05

Sweet Alert 2

Sweet Alert existe également en version 2 avec encore plus de possibilités, sa documentation se trouve à cette adresse et en suivant cette documentation, on pourrait remplacer la version 1 par la 2 dans nos formulaires BreezingForms.

Conclusion

Nous voyons qu'avec peu d'interventions, nous pouvons modifier ces popups pour obtenir un résultat bien meilleur, bien que ce soit toujours une question de goût. 😊

Ce tutoriel est maintenant terminé et j'espère qu'il pourra vous aider à mener à bien votre propre personnalisation.

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

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

Considérez un don!

Vous avez trouvé des réponses à vos questions, les tutoriels disponibles vous ont aidé à monter votre formulaire et vous souhaitez m'être reconnaissant pour le contenu attractif de ces pages ?

paypal btn

Via PayPal ou Stripe.

Vos dons m'aident à maintenir le site et à vous proposer encore plus de tutoriels pour vous aider encore d'avantage.

x