Générer un qrCode des données saisies dans un formulaire BreezingForms

Vous aimeriez pouvoir proposer la génération d'un code de type qrCode résultant des données saisies dans votre formulaire et vous demandez si cela est seulement possible.
Avec BreezingForms, presque tout étant possible, nous allons voir ensemble comment construire ce type de formulaire.

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

Préambule

Pour la construction de ce formulaire, nous aurons besoin de faire appel à une API de générateur de qrCode. Pour ce pas à pas, j'ai opté pour deux options très faciles d'accès et d'intégration.

  1. L'API de Google
  2. L'API de qrServer

L'utiliation étant tout aussi facile pour l'une comme pour l'autre il vous suffira de faire votre choix le moment venu.

Accès à l'API

L'accès à ces API est très simple, il suffit de renseigner leur URL et d'y ajouter des paramètres. Les paramètres d'une URL sont les parties suivant un point d'interrogation et séparées par le caractère "&". Chaque paramètre est composé d'une clé et de sa valeur séparées par le caractère "=".

Exemple d'URL avec paramètres en gras : https://domaine.com?param1=1234&param2=breezingforms.eddy-vh.com

Que contiendront ces paramètres ? Et bien tout simplement les données dont on souhaite générer le qrCode. Cela peut être une URL de votre site web, une identité, une adresse voire une carte de visite contant de multiples informations telles prénom, nom, adresse, e-mail, téléphone, etc.
Les liens fournis ci-avant renseignent sur les paramètres à utiliser et vous pourrez vous en inspirer bien que si vous suivez ce tutoriel je vous expliquerai tout ce qui est utile et requis.

Création du formulaire

Pour ce pas à pas, nous allons prendre en exemple la création d'une "Carte de visite". Le scann du qrCode retournera les données saisies dans les champs du formulaire. Pour cet exemple, j'ai préparé un formulaire sur deux colonnes, la première affichant les champs de données et la seconde le bouton de génération du qrCode suivi d'une section contenant du HTML et qui servira à afficher le résultat obtenu ainsi qu'un peu de texte.

Dans ce formulaire pour lequel il est inutile d'envoyer une notification, vous décochez l'option idoine ainsi que l'inclusion du bouton Envoyer puisqu'il ne servira pas.

Pour la suite de ce pas à pas, n'oubliez pas d'enregistrer les propriétés de chaque élément après sa création et son paramétrage et avant de passer au suivant. N'hésitez pas à enregistrer le formulaire également de temps à autres.

  1. Créez votre nouveau formulaire à l'aide du bouton prévu à cet effet, nommez-le et ajoutez-lui une description si vous le souhaitez.
  2. Ajoutez-y une page, dans laquelle, vous ajoutez une section de type Normal pour laquelle le Type d'écran est Éléments sur la même ligne, nommez-la main.
  3. Dans cette section, ajoutez deux sous-sections de type Normal dont le Type d'écran est paramétré sur À la ligne après chaque élément et que vous nommez gauche et droite.
    Cliquez l'image pour visionner les différentes étapesqrCode form 01qrCode form 02qrCode form 03qrCode form 04qrCode form 05

Colonne gauche

  1. Dans la section de gauche, ajoutez les éléments de type texte que vous avez besoin pour la saisie des données. Prénom, nom, etc. et nommez-les avec des noms simples, sans caractères spéciaux, espaces, etc.
    qrCode col gauche 01
    Rendez ces éléments obligatoires si besoin et choisissez un script de validation parmis ceux disponibles dans la bibliothèque.

Colonne droite

  1. Dans la section droite, ajoutez un élément de type Bouton d'envoi que vous nommez qrcode_gen avec la valeur Générez votre qrCode. Cette valeur est le libellé qui s'affichera sur votre bouton.
  2. Ajoutez ensuite une section que vous nommez sec_qrCode.
    qrCode col droite 01

Le formulaire en lui-même est terminé.

Préparation de la zone de réception de votre qrCode

  1. Dans l'arborescence de votre formulaire, cliquez la section sec_qrCode et dans son panneau de propriétés, cliquez le lien Éditer afin d'ouvrir sa zone d'édition pour y ajouter le code html nécessaire. Passez en mode code et ajouter le code suivant :
    <div id="qrcode" style="visibility: hidden;">
    	<p>Voici votre qrCode carte de visite<br />Pour sauvegarder, clic droit, Enregistrer l'image sous… (dépend de votre navigateur).</p>
    	<p><img scr="#" id="qrCodeImg" alt="votre qrCode" /></p>
    </div>
    Notez bien les id de la balise div et de la balise img, respectivement qrcode et qrCodeImg, vous en aurez besoin lors de la conception du javascript qui générera l'image du qrCode.
  2. Validez cet ajout par le bouton Save de l'éditeur afin de sauvegarder et de revenir sur le formulaire. Enregistrez les propriétés de la section.

Préparation du bouton de génération du qrCode

  1. Dans l'arborescence de votre formulaire, sélectionnez le bouton d'envoi. Dans ses propriétés avancées, cochez l'option Cacher l'étiquette et dans la partie Script Action, cochez l'option Personnalisé → Cochez Clic pour l'option Actions → Cliquez le bouton Crée le code framework afin d'insérer la base du code nécessaire :
    function ff_qrcode_gen_action(element, action)
    {
        switch (action) {
            case 'click':
                break;
            default:;
        } // switch
    } // ff_qrcode_gen_action

    Ce bout de code signifie qu'une action se produira dès lors que l'on cliquera sur le bouton, il reste à définir cette action, c-à-d la génération du qrCode selon les données issues des champs et transmises au javascript.
  2. Afin d'obtenir un code bien lisible et faciliter la saisie, on placera les données saisies dans des variables. Pour cela, juste après le bout de code case 'click':, tapez deux retours chariots afin de saisir les variables.
  3. Déclarons en premier lieu deux variables, la première nommée url et la second _qrCode, elle serviront en fin de script à générer l'url de l'image générée par l'API utilisée.
    Insérez ce code :
            var url = '';
            var _qrCode = '';
  4. Vous devez maintenant envoyer les données saisies dans des variables. Sasissez, pour chacun des champs, sa variable comme suit et ce, autant de fois qu'il y a de champ :
    var _nomDeChamp1 = ff_getElementByName('nomDeChamp1').value;
    var _nomDeChamp2 = ff_getElementByName('nomDeChamp2').value; 
    Vous devez obtenir un code comme celui-ci :
    function ff_qrcode_gen_action(element, action)
    {
        switch (action) {
            case 'click':
            
            var url = '';
            var _qrCode = '';
                
            var _nom =      ff_getElementByName('nom').value;
            var _prenom =   ff_getElementByName('prenom').value;
            var _email =    ff_getElementByName('email').value;
            var _phone =    ff_getElementByName('phone').value;
            var _mobile =   ff_getElementByName('mobile').value;
            var _rue =      ff_getElementByName('rue').value;
            var _cp =       ff_getElementByName('cp').value;
            var _ville =    ff_getElementByName('ville').value;
            var _depart =   ff_getElementByName('departement').value;
            var _pays =     ff_getElementByName('pays').value;
    
                break;
            default:;
        } // switch
    } // ff_qrcode_gen_action
    Les données qui seront saisies dans les champs seront désormais transmises à vos variables lors du clic sur le bouton de génération du qrCode.
  5. Vous devrez maintenant construire les paramètres d'URL du qrCode qui sera produit pas les informations du formulaire.
    Ajoutez maintenant les données à la variable url. Après vos variables précédentes, tapez deux retours chariot pour bien séparer les parties de code. Sasissez ensuite les informations comme suit :
    (pour les variables _phone, _mobile et _depart (département), vous n'enverrez les données à la variable url que si les champs sont renseignés. Pour cela, vous les insérerez dans une condition. Ceci afin de ne pas générer de ligne vide si la donnée n'est pas renseignée)
                url + = _prenom + ' ' + _nom,
                url + = '\n' + _email;
                
                if ( _phone !='' ) {
                    url + = '\nTel: ' + _phone;
                }
                if ( _mobile !='' ) {
                    url + = '\nMobile: ' + _mobile;
                }
                
                url + = '\n' + _rue,
                url + = '\n' + _cp + ' ' + _ville;
                
                if ( _depart != '' ) {
                    url + = '\n' + _depart;
                }
                
                url + = '\n' + _pays;
                
                url = encodeURI(url); // encodage de l'url pour la compréhension de certains caractères
  6. Lorsque les paramètres d'URL sont stockés dans la variable url, il faut former cette URL. Selon la solution pour laquelle vous aurez opté, vous ajouterez le bout de code suivant :
    • Solution avec l'API Google
    • Solution avec l'API qrServer
                _qrCode =    'https://chart.googleapis.com/chart?cht=qr&chs=250x250&chld=L|1&chl=' + url;
                _qrCode = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + url;
  7.  Il reste maintenant à envoyer cette url dans le code html que vous aviez inséré dans l'édition de la section sec_qrCode et faire apparaître la div afin d'afficher son contenu et l'image du qrCode généré. Insérez finalement le bout de code suivant dans votre script (sous condition que vous ayez respecté les ID de l'image et de la div) :
                document.getElementById('qrCodeImg').setAttribute('src', _qrCode);
                document.getElementById('qrcode').style.visibility = 'visible';

Vous devez finalement obtenir un code complet comme celui-ci :

function ff_qrcode_gen_action(element, action)
{
    switch (action) {
        case 'click':
        
        var url = '',
            _qrCode = '',
            
            _nom =      ff_getElementByName('nom').value,
            _prenom =   ff_getElementByName('prenom').value,
            _email =    ff_getElementByName('email').value,
            _phone =    ff_getElementByName('phone').value,
            _mobile =   ff_getElementByName('mobile').value,
            _rue =      ff_getElementByName('rue').value,
            _cp =       ff_getElementByName('cp').value,
            _ville =    ff_getElementByName('ville').value,
            _depart =   ff_getElementByName('departement').value,
            _pays =     ff_getElementByName('pays').value;
            
            url + = _prenom + ' ' + _nom,
            url + = '\n' + _email;
            
            if ( _phone !='' ) {
                url + = '\nTel: ' + _phone;
            }
            if ( _mobile !='' ) {
                url + = '\nMobile: ' + _mobile;
            }
            
            url + = '\n' + _rue,
            url + = '\n' + _cp + ' ' + _ville;
            
            if ( _depart != '' ) {
                url + = '\n' + _depart;
            }
            
            url + = '\n' + _pays;
            
            url = encodeURI(url);

            // Selon le choix d'API, commentez l'une des deux lignes suivantes et décommentez l'autre
            
            // _qrCode =    'https://chart.googleapis.com/chart?cht=qr&chs=250x250&chld=L|1&chl=' + url;
            _qrCode = 'https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=' + url;
            
            document.getElementById('qrCodeImg').setAttribute('src', _qrCode);
            document.getElementById('qrcode').style.visibility = 'visible';

            break;
        default:;
    } // switch
} // ff_qrcode_gen_action

Ne copiez/collez pas simplement ce code ci-dessus dans votre zone de script, si vous avez des éléments nommés différemment de dans ce tutoriel, votre script ne pourrait fonctionner.

Prenez soin d'enregistrer votre formulaire et testez-le. Saisissez des données dans les champs du formulaire et générez votre qrCode à l'aide de votre bouton programmé.

Testez ici le formulaire de ce tutoriel (cliquez pour ouvrir)

Ce formulaire ne sert qu'à produire une image qrCode et n'enregistre aucune des données saisies.

Formulaire disponible.

Le formulaire de ce pas-à-pas est disponible ci-dessous au téléchargement. Si vous désirez l'installer sur votre site, il est important de décompresser l'archive. Suivez ensuite les instructions de ce tutoriel, section Comment installer un package ?

Vous devez être enregistré et connecté pour accéder aux téléchargements.

Attention :
Si vous avez mis des csp en place sur votre site, prenez soins d'autoriser les images issues du serveur de l'API pour laquelle vous avez opté.

Images cliquables

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 !