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.

Niveau: Moyen, Avancé

Prérequis: Plugin BreezingForms, module BreezingForms, JCE Editeur + JCE Mediabox ou Up de Lomart

Version BF minimale requise: BreezingForms Lite

Table des matières

  1. Création du formulaire BreezingForms
  2. Préparation des articles nécessaires à la présentation de nos manifestations
  3. Méthode avec JCE Mediabox
  4. Méthode avec UP de Lomart
  5. Finalisation du formulaire
    1. Récupération du titre de l'événement
    2. Fermeture automatique du formulaire validé

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.

popupForm 01 tn

  • 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.

 popupForm 02 tn

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.

Méthode avec JCE Mediabox

Si vous optez pour la méthode JCE Mediabox, vous devrez avoir installé JCE Editor et Mediabox.

Téléchargez JCE Editor en français

Téléchargez JCE Mediabox en français

Préparez un article que vous nommez p.ex. Formulaire d'inscription.

Insérez le shortcode d'affichage d'un formulaire BreezingForms, géré par le plugin, dans cet article. Cela se fait comme suit :

{ BreezingForms : NomDuFormulaire }

NomDuFormulaire doit bien sûr être le nom réel de votre formulaire (non pas son titre).

Créez ensuite un lien de menu vers cet article. Paramétrez votre lien pour n'afficher que le contenu de l'article, sans modules, sans menu, sans infos, etc. Prenez soin de le placer dans un menu non affiché ou désactivez son affichage dans le menu.

Il convient maintenant de publier vos articles décrivant vos événements auxquels une inscription est nécessaire. Dans chacun de ces articles, insérez un lien depuis l'éditeur JCE, vers votre article sur lequel votre formulaire est publié et dans l'onglet Popups, paramétrez votre popup (voir les captures suivantes). JCE Mediabox accepte une entré numérique seule pour des dimensions en px et avec un % pour les dimensions en pourcentage.

popupForm 03 tnpopupForm 04 tn

Enregistrez votre article et testez le résultat en ligne.

JCE ne permettant pas le chargement direct d'un module, nous sommes contraints de charger un article dans la popup comme présenté ici. Il est également impossible de charger directement un lien de menu vers le formulaire, ce dernier charge bien mais sa css et ses scripts ne chargent pas et le formulaire ne répond donc pas.

Méthode avec UP de Lomart

Si vous optez pour la méthode UP de Lomart, il sera nécessaire d'installer ce super plugin. L'installation complète (conseillée) inclut toutes les actions, la "min" ne concerne que le plugin, vous pourrez installer les actions nécessaires à votre utilisation. Une documentation complète est disponible sur le site du très sympathique éditeur.
UP étant en mesure de charger un module dans une popup, il est inutile de créer un article pour afficher le formulaire.

Télécharger Up sur le site UPlomart.fr installez-le et activez-le.

Pour l'utilisation avec UP, il sera nécessaire de préparer un module de formulaire. Rendez-vous dans la gestion des modules et ouvrez le module BreezingForms ou créez-en un nouveau.

Dans les paramètres de ce module, renseignez le nom de votre formulaire et cochez l'option Run in iframe sur Oui. Les autres options peuvent rester standard. Ne donnez aucune position à ce module afin qu'il ne s'affiche pas sur le site où vous ne désirez pas le voir. Activez et enregistrez / fermez ce module.

popupForm 05 tn

De la même manière qu'avec JCE Mediabox, vous créez vos articles de présentation d'événements.

Dans chaque article concerné, à l'endroit où vous désirez voir apparaître le lien ouvrant la popup de votre formulaire, insérez le shortcode de UP modal (modal est le nom de l'action) pour le chargement de la popup. En suivant sa documentation, on insère donc le code suivant :

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

Nous chargeons ensuite notre module à l'aide de la fonction prévue de l'éditeur. Cliquez sur le bouton idoine, sélectionnez le module de votre formulaire et validez afin d'obtenir un code comme celui ci-après ou IDMod est l'id de votre module :

<p>{loadmoduleid IDMod}</p>

Sous ce code il reste à fermer la balise UP comme suit pour obtenir un code entier comme ceci :

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

Explications de ce code :

  • up charge les infos du plugin
  • modal=html = indique qu'il s'agit d'une popup modale de contenu html
  • label=Formulaire d'inscription = Texte qui servira de lien
  • class=btn btn-success = la classe du lien pour en faire un bouton (dépend éventuellement de votre template et à adapter donc)
  • height=450px = la hauteur de la popup selon votre propre souhait.

Lorsque votre article est terminé, enregistrez-le et testez-le en ligne afin de vous assurer que la popup s'ouvre bien. Elle n'est pas encore optimisée.

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.

popupForm 06 tn

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.

popupForm 07 tn

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.

popupForm 08 tnpopupForm 09 tn

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

popup automatique

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.

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