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/5 : ✅

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'utilisation étant tout aussi accessible 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 ? Eh 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 scan 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 étapes

Colonne gauche

3. 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.
   
   Rendez ces éléments obligatoires si besoin et choisissez un script de validation parmi ceux disponibles dans la bibliothèque.

Colonne droite

4. 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.
5. Ajoutez ensuite une section que vous nommez sec_qrCode.
   

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

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

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

8. 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.
9. 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.
10. Déclarons en premier lieu deux variables, la première nommée url et la seconde _qrCode, elles 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 = '';

11. Vous devez maintenant envoyer les données saisies dans des variables. Saisissez, 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.
12. Vous devrez à présent construire les paramètres d'URL du qrCode qui sera produit pas les informations du formulaire.
    Ajoutez à présent 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. Saisissez 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

13. 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;

14.  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é.

Pour tester ce formulaire, vous devez être connecté