Formulaire dynamique avec affichage en popup

Dans ce pas à pas, vous apprendrez à mettre en place un formulaire dynamique, qui pourra s'afficher sur plusieurs pages. Il récupérera le titre de l'article sur lequel il est placé ou depuis lequel il est appelé.

En outre, vous apprendrez à ouvrir ce formulaire dans une popup de type lightbox, le faire remplir et le valider, éventuellement le refermer automatiquement afin de rester sur la page active.

Pour ce pas à pas, nous choisirons une situation d'inscription à différents événements se trouvant décrits dans des articles. Un article - un titre d'événement - un affichage de formulaire ou son ouverture dans une popup.

Création du formulaire BreezingForms

Créez votre formulaire.

Titrez-le p.ex. Événements ou tout autre titre qui vous conviendra, nommez-le (sans caractères spéciaux).

Cochez la case Dernière page de remerciement.

Insérez deux pages (ou plus selon votre besoin) et enregistrez ce formulaire une première fois.

• Sélectionnez la dernière page, dans ses propriétés, cliquez Modifier et à l'aide de l'éditeur, rédigez votre message de remerciement, que l'initiateur du formulaire se verra affiché après l'avoir validé. Enregistrez à l'aide du bouton Save puis cliquez Enregistrer les propriétés.
• Revenez sur la première page et insérez, un à un, les champs nécessaires à votre formulaire, le premier sera prévu pour recevoir dynamiquement le titre de l'article depuis lequel le formulaire est appelé. Sélectionnez le type de chacun des champs, titrez et nommez-les comme vous le souhaitez au fur et à mesure de leur création. Veillez à rendre obligatoire les champs requis et leur appliquer un test de validation.
• Pensez bien à enregistrer les propriétés de chacun des champs créés avant de passer au suivant afin de ne pas perdre ces propriétés et enregistrer le formulaire régulièrement par sécurité, il serait dommage de devoir recommencer alors que vous avez quasiment terminé.

Pour cet exemple, j'ai préparé un formulaire simple reprenant les coordonnées de l'intéressé et une case à cocher obligatoire qui confirme que ce dernier ait bien pris connaissance des conditions de participation. À vous d'adapter votre formulaire à vos besoins.

Le champ Organisation est celui qui relèvera le titre de l'article afin que vous puissiez savoir à quel événement correspond l'inscription. Dans les propriétés avancées validez-le en lecture seule afin qu'il ne soit pas modifiable par l'utilisateur.

Notre formulaire est prêt.

Pour la suite de ce tutoriel, il sera indispensable que vous ayez installé le plugin et le module de BreezingForms, vous les trouverez dans l'archive, nommée breezingforms_lite_UNZIP_FIRST.zip, ou breezingforms_190_UNZIP_FIRST.zip (en cas de version pro) que vous avez téléchargée chez Crosstec. Ouvrez cette archive avec une application de type winzip. Dans le dossier extensions/addons, vous trouverez le plugin et module que vous installerez comme n'importe quelle extension pour Joomla!.
Activez le plugin et ouvrez le pour le configurer afin d'ouvrir les formulaires dans une iFrame (important). Validez et fermez le plugin.

Préparation des articles nécessaires à la présentation de nos manifestations.

Nous verrons deux méthodes, la première avec JCE la seconde avec UP de Lomart.

{ BreezingForms : NomDuFormulaire }

<p>{up modal=html | label=Formulaire d'inscription | class=btn btn-success | height=450px}</p>

<p>{loadmoduleid IDMod}</p>

<p>{up modal=html | label=Formulaire d'inscription | class=btn btn-success | height=450px}</p>
<p>{loadmoduleid IDMod}</p>
<p>{/up modal}</p>

Finalisation du formulaire

Il faut maintenant que nous peaufinions notre formulaire afin qu'il s'affiche bien dans notre popup. S'il est plus grand, JCE le gère bien mais pas UP Modal sans ajout d'une css.

Commençons par repérer la hauteur de notre formulaire.

Dans l'éditeur BreezingForms, votre formulaire en mode Édition, cliquez le bouton Prévisualiser. Dans la fenêtre qui s'ouvre et vous présente votre formulaire, faites un clic droit puis cliquez Examiner l'élément sur Firefox (inspecter sur Chrome). S'ouvre alors une fenêtre d'inspection, repérez la balise iframe, un peu plus bas, pointez la balise body et relevez sa hauteur.

Dans le cas de ce formulaire de présentation, nous obtenons 775px, nous compterons une marge et retiendrons donc 800px.

Refermez l'aperçu et, dans la fenêtre des propriétés de votre formulaire, cliquez l'onglet Avancé → Plus d'options. Dans l'onglet Paramètres, saisissez la hauteur précédemment relevée, ajoutée de sa marge, dans le cas présent, indiquons 800px et paramétrons l'option iFrame Autoheight sur non. Enregistrons les modifications et sortons des options avancées.

Rendez-vous sur l'un de vos articles et cliquez le lien vers le formulaire afin de voir le résultat. La popup JCE s'affiche normalement bien, celle d'UP pas encore.

Avant de continuer, nous allons ajouter une CSS à Modal afin d'embellir le résultat. Rendez-vous, à l'aide d'un logiciel FTP, dans le répertoire suivant de votre site :
Site/plugins/content/up/actions/modal/ et ouvrez le fichier flashy.css pour le modifier.

Recherchez la classe .flashy-container .flashy-content à la ligne 61 sur un fichier original. Ajouter lui une propriété CSS overflow avec la valeur auto → overflow:auto;

Enregistrez et renvoyez votre fichier sur le serveur. Contrôlez que la popup UP s'ouvre bien maintenant sans débordement et qu'elle soit scrollable. C'est bien mieux non ?

Récupération du titre de l'événement

Le formulaire s'affiche dans la popup mais aussi depuis votre article décrivant votre événement, idéalement titré par son nom, le lieu et la date de l'événement. Ce sont ces informations que nous allons récupérer dans le premier champ du formulaire.

Rendez-vous dans l'édition du formulaire sélectionnez le premier champ intitulé Organisation. Dans ses propriétés avancées, en bas de page, dans la section Script d'initialisation, cochez l'option Personnalisé puis cocher la case Entrée du formulaire. Cliquez ensuite Crée le code Framework afin que BreezingForms insère le script d'initialisation.

Juste après la ligne case 'formentry':, taper un retour charriot et entrez la ligne de code suivante :

element.value = window.parent.document.title;

Afin d'obtenir un code semblable à celui-ci :

function ff_organisation_init(element, condition)
{
    switch (condition) {
        case 'formentry':
                element.value = window.parent.document.title;
            break;
        default:;
    } // switch
} // ff_organisation_init

Enregistrez les propriétés du champ et enregistrez votre formulaire.

Contrôlez le formulaire en ligne et vérifiez bien que le titre de votre article de référence s'affiche bien dans le champ.

Ce formulaire pourra se trouver sur n'importe quelle page, le script du champs Organisation charge dynamiquement le titre de l'article à partir duquel il est lancé en popup.

Fermeture automatique du formulaire validé

Dernière touche pour optimiser notre formulaire, lorsque l'intéressé l'aura validé, un message de remerciement s'affichera. À partir de là, il lui est aisé de refermer la popup, il n'a qu'à cliquer sur la croix de la popup ou simplement hors de cette dernière mais nous allons aller plus loin et forcer la fermeture de notre popup après un délai si l'intéressé n'intervient pas de son propre gré.

Retournons dans notre formulaire → Avancé → Plus d'options → Onglet script → Script de soumission.

Vu la présence d'une page de remerciement, BreezingForms a déjà introduit automatiquement le script de passage à cette page dès la validation du formulaire. Ce code se présente comme suit :

function ff_evenements_submitted(status, message){if(status==0){ff_switchpage(2);}else{alert(message);}}

Il convient d'ajouter une petite fonction de rechargement de la page mère et pour cela nous allons insérer, juste après le "switch" vers la page 2, ce petit bout de code :
setTimeout(function(){window.parent.location.reload();},3000);

Pour obtenir le code suivant :

function ff_evenements_submitted(status, message){if(status==0){ff_switchpage(2);
setTimeout(function(){window.parent.location.reload();},3000);}else{alert(message);}}

Enregistrez la modification et ressortez des options avancées. N'enregistrez pas votre formulaire, c'est inutile et déconseillé. Testez le formulaire, validez et voyez la popup se fermer après 3 secondes, délais inséré par le bout de code. Si vous nécessitez d'un délai plus long, modifiez 3000 par la valeur souhaitée sachant qu'il s'agisse de millisecondes.

ATTENTION
Une fois le code modifié, il est déconseillé d'enregistrer le formulaire sous peine d'écraser ce code par l'original de BreezingForms. Si par mégarde ou suite à une modification du formulaire, vous avez fait un enregistrement de ce dernier, il ne faudra pas omettre de retourner dans les options pour remettre le petit bout de code dans le script BreezingForms.

JCE

•  Avantages :
  • Gère bien le scroll sans intervention CSS
  • Facile à mettre en œuvre depuis l'interface d'insertion de lien
•  Inconvénients :
  • Assez long à charger
  • Nécessite la création d'un article contenant le formulaire

UP de Lomart

•  Avantages :
  • Très léger et charge rapidement
  • Ne charge les ressources nécessaires (Javascript; CSS) que dans la page où il est utilisé
  • Est en mesure de charger un module
•  Inconvénients :
  • Nécessite une petite intervention simple au sein du fichier css de l'action pour permettre le scroll

En espérant que ce pas à pas vous aura servi et que vous arrivez à mettre votre formulaire BreezingForms en popup !

Annexe :
Au sujet du plugin UP. Si vous ne le connaissez pas, je vous invite à vous y intéresser, il permet de très nombreuses choses, il est léger, ne charge en scripts et CSS que ce qu'il nécessite et là où il le nécessite. Ses actions sont très nombreuses, et je vous laisse les découvrir dans les démonstrations disponibles sur le site officiel.