Ajout d'un "spinner" durant la soumission d'un formulaire

Pas à Pas 3 Octobre 2020 Vues : 1496

BreezingForms ne propose pas (à l'heure de ces lignes) de visuel permettant à l'utilisateur de s'assurer de la soumission d'un long formulaire. Serait-il possible de faire apparaître une animation durant cette soumission ?

Niveau : Moyen, Avancé
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅

Situation

De longs formulaires, parfois de plusieurs pages, demandant la saisie de nombreuses données peuvent prendre un certain temps lors de leur soumission. Il s'agit souvent d'un maximum de quelques secondes durant lesquelles l'utilisateur pourrait se demander si les données sont bien en cours de soumission.

Afin de le rassurer et lui éviter de recliquer sur le bouton d'envoi ou de rafraîchir la page avant la fin du traitement, nous pouvons ajouter un pictogramme animé visuel, sur fond sombre p. ex., qui laisserait apercevoir le traitement des données soumises.

Pour cela, il va falloir ruser un peu, car BreezingForms ne propose pas cette option sans notre intervention. Voyons ensemble comment agencer ce visuel.

Détails

Il y a bien entendu diverses options pour réaliser ce que nous recherchons et je vais en détailler deux ci-après. La première fonctionnera sous condition que votre site soit muni de la fonte "Font Awesome 5 Free" qui offre de nombreuses icônes utilisables.

La seconde option se contentera simplement de quelques DIV's imbriquées et de CSS pour y parvenir.

Les deux solutions sont élégantes visuellement et vous opterez pour l'une ou l'autre selon vos exigences et préférences.

Préparatifs

Vous devez préalablement préparer votre formulaire exactement comme il doit se présenter et vous être assuré de son fonctionnement, les données saisies par l'utilisateur vous sont-elles bien transmises ? Oui ? Parfait, on peut passer à la suite.

Dans le menu de navigation de votre formulaire, sélectionnez la dernière page de ce dernier ou l'avant-dernière page si votre dernière page est une page de remerciement.

Il s'agit de la page sur laquelle se trouve le bouton de soumission du formulaire.

Option avec Font Awesome 5
Option avec div's imbriquées

Ajout du code html dans le formulaire

Dans la partie de droite, les propriétés de cette page s'affichent avec l'unique option d'édition. Cliquez le bouton "Éditer" afin d'ouvrir le popup d'édition. Passez en mode code de l'éditeur de textes et insérer une div avec l'ID "spinner-overlay" entourant la balise Font Awesome qui permet l'affichage d'un spinner animé
<i class="fas fa-spinner fa-spin fa-6x"></i> et à laquelle on ajoutera l'ID "spinner". Votre insertion doit être comme ceci :

<div id="spinner-overlay">
  <i id="spinner" class="fas fa-spinner fa-spin fa-8x"></i>
</div>

Validez et enregistrez le formulaire. Nous venons d'insérer la div qui couvrira l'écran de noir avec une opacité que nous réduirons à 80% et un spinner de Font Awesome.

Formatage par insertion de css

Dans l'arborescence de votre formulaire, sélectionnez ce formulaire

Dans la partie de droite, cliquez "Avancé" → "Plus d'option".
Sélectionnez ensuite l'onglet "Pièces de formulaire"
Dans la partie "Avant le formulaire", cochez l'option "Personnalisé"

Dans la zone de texte qui se présente, ajoutez le code suivant :

echo '
<style>
#spinner-overlay {
    position:fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.8);
    visibility: hidden;
    z-index: 10000;
}

.fa-spinner {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.visible {
    visibility: visible !important;
}
</style>
';

Enregistrez et fermez cette fenêtre pour revenir au formulaire. Enregistrez le formulaire.

Si vous désirez appliquer cette css à tous vos formulaires, il vous est bien sûr possible de les copier dans le fichier theme.css de votre style de formulaire et de passer cette étape.

Ajout du code HTML dans le formulaire

Dans la partie de droite, les propriétés de cette page s'affichent avec l'unique option d'édition. Cliquez le bouton "Éditer" afin d'ouvrir le popup d'édition. Passez en mode code de l'éditeur de textes et insérer une div avec l'ID "spinner-overlay" entourant le code html suivant qui permettra l'affichage d'un spinner pivotant et à laquelle on ajoutera l'ID "spinner". Votre insertion doit être comme ceci :

<div id="spinner-overlay">
	<div id="spinner" class="lds-default">
		<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
	</div>
</div>

Validez et enregistrez le formulaire. Nous venons d'insérer la div qui couvrira l'écran de noir avec une opacité que nous réduirons à 80% et les divs qui formeront le spinner animé.

Formatage par insertion de CSS

Dans l'arborescence de votre formulaire, sélectionnez ce formulaire

Dans la partie de droite, cliquez "Avancé" → "Plus d'option".
Sélectionnez ensuite l'onglet "Pièces de formulaire"
Dans la partie "Avant le formulaire", cochez l'option "Personnalisé"

Dans la zone de texte qui se présente, ajoutez le code suivant :

echo '
<style>
.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}


#spinner-overlay {
    position:fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.8);
    visibility: hidden;
    z-index:10000;
}

Enregistrez et fermez cette fenêtre pour revenir au formulaire. Enregistrez le formulaire.

Si vous désirez appliquer cette css à tous vos formulaires, il vous est bien sûr possible de les copier dans le fichier theme.css de votre style de formulaire et de passer cette étape.

Après cette étape, le visuel est en place, mais non visible par l'utilisateur. Pour le rendre visible à la soumission, le clic sur le bouton d'envoi devra ajouter une classe "visible" à la div ayant l'ID "spinner-overlay".

Copie et modification du script de soumission du formulaire

Dans le menu de gauche cliquez sur l'option "Scripts" et repérez le script de soumission nommé "ff_validate_submit". Cochez la case à cocher en tête de ligne puis sélectionnez l'option "Copier" afin d'obtenir une copie de ce script.

Repérez ce nouveau script dans la liste et cliquez-le afin de l'éditer.

Renommez-le comme ceci p. ex. "ff_validate_submit_delay", adaptez son titre afin que vous puissiez le repérer facilement et donnez-lui éventuellement une description.

En fin de script, remplacez :

    else 

        ff_submitForm();

par :

    else {
        // overlay et spinner durant la soumission du formuliare
        document.getElementById('spinner-overlay').addClass('visible');

        ff_submitForm();
    }

Ce petit bout de script permettra d'ajouter, lors du clic sur le bouton, la classe "visible" à la div que l'on a insérée dans la description de la page. Cette classe rendra la div et son contenu (animation) visible durant la soumission.

Application du script au bouton de soumission.

Il reste maintenant à appliquer le script modifié au bouton d'envoi du formulaire. Pour cela, il faut utiliser un bouton de soumission personnalisé.

Dans les propriétés de votre formulaire, réglez l'option " Inclure bouton 'Envoyer' " sur non afin de ne pas afficher le bouton classique.

En fin de formulaire, là où le bouton d'envoi doit apparaître, ajoutez un élément de type "Bouton d'envoi".

Nommez-le, titrez-le comme vous le souhaitez et donnez-lui la valeur "Valider" (ou envoyer, ou ce que vous souhaitez y voir apparaître).

Passez ensuite dans ses propriétés avancées et dans la partie "Script d'action", sélectionnez "Bibliothèque". Dans la liste déroulante, sélectionnez le script "ff_validate_submit_delay". Enregistrez les propriétés et le formulaire.

Si vous avez bien suivi, votre formulaire devrait être prêt à fonctionner et afficher le spinner d'attente lors de la soumission du formulaire.

Font Awesome 5 ayant réduit ses icônes "free", les utilisateurs de cette version n'ont plus accès à ce beau spinner que la version 4.7 proposait. La version avec divs imbriquées est alors visuellement plus jolie.

L'animation ne se verra que sur des formulaire avec un certain temps de traitement. Sur les formulaires à soumisison rapide, l'effet ne se verra peut-être pas ou se verra avec une très courte durée.

Connectez-vous !