L'avantage d'enregistrer les données d'un formulaire dans une feuille de calcul de type Google Sheets est qu'il sera possible de partager ces données avec toute personne avec qui on aura partagé cette feuille de calcul. L'intérêt peut également être de conserver des données d'enregistrement à un événement p.ex.
Voyons comment faire pour synchroniser un formulaire avec cette Google Sheets…
Niveau : Moyen
Version BF minimale requise : BreezingForms Pro
Compatibilité Joomla! 4 : ✅
Ce tutoriel contient de nombreuses illustrations afin de bien vous guider dans votre démarche. Prenez bien le temps de suivre les étapes une à une.
Nouveau Plugin "plg_breezingforms_spreadsheets"
Suite à des changements chez Google, il a été nécessaire que Crosstec développe un tout nouveau plugin. Si vous aviez déjà une expérience avec d'anciennes versions du plugin Gdata et que ce plugin est encore installé sur votre Joomla, il est temps de le désinstaller.
Rendez-vous ensuite dans le centre de téléchargement de Crosstec et téléchargez-y la dernière version de BreezingForms correspondant à votre version de Joomla et dézippez l'archive. Dans le répertoire "addons", vous trouverez le plugin plg_breezingforms_spreadsheets.zip qu'il faudra installer sur votre Joomla de la manière habituelle.
Le plugin présent dans l'archive à l'heure de l'écriture de ces ligne présente un défaut, il ne respecte pas l'ordre d'enregistrement des champs de formulaire dans les cellules correspondantes mais place les données les unes derrière les autres. P. ex. si le champ 2 reste vide, la donnée du champ 3sera enregistrée dans le champ 2. Jusqu'à la prochaine pise à jour de BreezingForms, vous pouvez trélécharger une version corrigée et parfaitement fonctionnelle du plugin ci-après.
Vous devez être enregistré et connecté pour accéder aux téléchargements.
Après l'installation, n'oubliez pas d'activer le plugin, il est désactivé par défaut.
Le projet chez Google
Afin de pouvoir connecter un formulaire BreezingForms à une feuille de calcul Google Sheets, il faut préalablement créer une application et la paramétrer.
La création de l'application
Pour créer l'application qui permettra l'enregistrement des données du formulaire dans une feuille de calcul, rendez-vous sur la console développeurs Google à l'URL suivante https://console.cloud.google.com. Si vous n'êtes pas connecté à votre compte Google, il sera temps de le faire.
Une fois connecté, vous pouvez cliquer sur le lien "Sélectionnez un projet" en haut de page. Dans le popup qui s'ouvre, cliquez "Nouveau projet" (Fig. 1). Dans la fenêtre suivante, donnez un nom à votre projet et validez par un clic sur "Créer" (Fig. 2). Revenu sur la page principale, recliquez le lien "Sélectionnez un projet" et sélectionnez le projet créé (Fig. 3).
Fig. 1
Fig. 2
Fig. 3
Activation des API nécessaires
Dans le menu de gauche, cliquez les liens "API et services" → "API et services activés" (Fig. 4). Ensuite, cliquez "Activer les API et les services" (Fig. 5).
Fig. 4
Fig. 5
Dans le champ de recherche, tapez "Drive" et validez puis cliquez sur la première option affichée "Google Drive API" (Fig. 6). Activez l'API par le clic sur le bouton "Activer" (Fig. 7). Cherchez ensuite l'API "Google Sheets API" en entrant "sheet" dans le champ de recherche et activez l'API comme précédemment (Fig. 8 et 9)
Fig. 6
Fig. 7
Fig. 8
Fig. 9
Consentement OAuth
Dans le menu de gauche, cliquez à présent sur le lien de menu "Écran de consentement OAuth".
Créez les données de consentement. Prenez soin de sélectionner l'option "Externes" et cliquez "Créer" (Fig. 10)
Fig. 10
Dans la page suivante, il s'agit de renseigner les informations de l'application et les coordonnées de son développeur (vous). Donnez un nom (quelconque) à votre application et renseignez l'adresse e-Mail d'assistance en sélectionnant votre adresse e-Mail dans la liste. Renseignez ensuite l'adresse e-Mail du développeur, elle pourra être votre adresse Gmail (Fig. 11). Validez par "Enregistrer et continuer".
Fig. 11
Ajout des champs d'application
C'est ici que nous allons autoriser les API préalablement activées. Cliquez le bouton d'ajout (Fig. 12). Dans le champ de recherche, saisissez "Drive" et repérer puis cocher l'option "Google Drive API (…/auth/drive)" (Fig. 13). Faites de même pour l'API Sheets (Fig. 14 et 15). Enregistrer et continuer…
Fig. 12
Fig. 13
Fig. 14
Fig. 15
Ajout d'utilisateur
Nous allons maintenant ajouter un utilisateur. Cliquez le bouton "Add users" et saisissez l'adresse e-Mail de votre compte Gmail, validez (Fig. 16) L'adresse apparaît alors dans les informations utilisateurs.
Fig. 16
Création des identifiants
Dans le menu de gauche, cliquez le lien de menu "Identifiants" puis en haut, "+ Créer des identifiants" et cochez l'option "ID Client OAuth" (Fig. 17). Dans le panneau suivant, sélectionnez "Application web", donnez un nom quelconque, il ne sera pas visible et indiquez l'URI de redirection autorisé (Fig. 18).
L'URI doit être comme suit : https://YOURDOMAIN/plugins/breezingforms_addons/gspreadsheets/code.php
Fig. 17
Fig. 18
Cliquez alors le lien "Créer". Dans la fenêtre suivante, "Télécharger au format JSON" (Fig. 19) et rangez le fichier sur votre disque dur. Au besoin, il pourrait être retéléchargé, voir Fig. 20.
Fig. 19
Fig. 20
La partie préparation de l'application Google est terminée. Passons à la préparation du formulaire, de la feuille de calcul et à la connexion entre les deux.
Préparation du formulaire et de la feuille de calcul
Préparez votre formulaire comme à votre habitude en paramétrant tous les champs comme étant requis* ainsi que votre feuille de calcul. Nommez-la afin de la repérer facilement lors de la connexion.
Réservez la première ligne de votre feuille de calcul pour y insérer les titres de colonne. Il est important de titrer les colonnes identiquement aux noms (et non les titres) des champs de votre formulaire (Fig. 21).
Dans la figure ci-dessous, les cellules surlignées de bleu clair correspondent aux champs de mon formulaire de test. Les cellules plus sombres correspondent à des colonnes qui pourront accueillir des données du formulaire ne nécessitant pas de champ. Voir explications en fin de tutoriel. Ces dernieres sont accessoires et dispensables
Fig. 21
Connexion entre le formulaire et la feuille de calcul Google Sheet
À ce stade, vous avez créé l'application Google et téléchargé le fichier de paramètres au format JSON. Vous avez créé votre formulaire et la feuille de calcul qui réceptionnera les données.
ATTENTION :
Si votre site est protégé par aeSecure, il sera important de neutraliser temporairement une ligne son code dans le .htaccess de votre site, sous peine de ne pouvoir continuer. Ouvrez votre .htaccess, repérez la ligne RewriteRule .* /aesecure/accessdenied.php?s=782 [L] et placer le signe # en tête de ligne afin de la commenter. Après la connexion à la feuille de calcul, vous n'omettrez pas de décommenter la ligne afin de retrouver la protection fournie par aeSecure.
Dans l'édition de votre formulaire, cliquez Avancé → Plus d'options et activez l'onglet "Google Spreadsheets". Parallèlement, ouvrez votre fichier JSON dans un éditeur de texte quelconque et copier tout son contenu que vous collez dans le champ "Client Json" du formulaire (Fig. 22).
Cliquez ensuite le bouton "Enregistrer". La page se recharge, repassez à l'onglet "Google Spreadsheets".
Cliquez le lien " Connectez-vous au compte Google que vous désirez utiliser" (Fig. 23).
Fig. 22
Fig. 23
Dans la fenêtre suivante, sélectionnez le compte avec lequel vous souhaitez vous connecter et en tout cas celui avec lequel vous avez créé l'application (Fig. 24).
Dans le panneau suivant, cliquez sur "Continuer" (Fig. 25) et dans le suivant, cochez les deux API et cliquez "Continuer" (Fig. 26).
Fig. 24
Fig. 25
Fig. 26
Vous êtes alors redirigé vers une page offrant votre code d'authentification (Fig. 27). Copier la totalité de ce code dans le presse-papier et retournez vers votre formulaire. Collez ce code dans le champ nommé "Récupérez votre code d'authentification" puis enregistrez (Fig. 28).
Après chaque enregistrement, revenez vers l'onglet de Google Spreadsheets pour l'étape suivante.
Fig. 27
Fig. 28
Cochez l'option "Activé" et sélectionnez votre feuille de calcul dans la liste déroulante. Enregistrez (Fig. 29). Sélectionner la feuille dans laquelle vous souhaitez enregistrer les données. Enregistrez (Fig. 30).
À ce stade, votre feuille de calcul est prête à recevoir les données du formulaire. Revenez à votre formulaire en cliquant "Fermer" en haut à droite.
L'option "Réinitialiser" de l'onglet "Google Spreadsheets" sert à déconnecter le formulaire de la feuille de calcul. Ne l'activez que si vous souhaitez ne plus envoyer les données sur la feuille de calcul avant d'enregistrer l'option.
Fig. 29
Fig. 30
Test du formulaire et de l'enregistrement
Dans l'édition de votre formulaire, cliquez l'option "Prévisualiser" afin d'afficher un popup contenant votre formulaire. Renseignez chaque champ de ce formulaire (Fig. 31) et validez. Contrôlez que les données soient bien transmises à la feuille de calcul (Fig. 32).
Fig. 31
Fig. 32
Annexe
Ci-dessous se trouvent quelques données de formulaires qui ne nécessitent pas de champ de formulaire pour être envoyées à la feuille de calcul. Entrez leur nom dans une colonne de la feuille de calcul pour activer leur enregistrement.
- "recordid" = l'ID du formulaire - à l'heure de ces lignes, il semble que la donnée ne s'enregistre pas comme elle le devrait, le bogue est signalé et sera prochainement résolu.
- "formid" = l'ID du formulaire
- "formtitle" = le titre du formulaire
- "formname" = le nom du formulaire
- "timestamp" = le timestamp de la soumission du formulaire au standart UTC
- "date" = la date UTC de l'enregistrement des données au format SQL
- "time" = l'heure UTC de l'enregistrement au format 24 heures
- "ip" = l'adresse IP de l'utilisateur, en cas d'enregistrement de cette IP (qui peut être désactivé dans la configuration de BreezingForms), veillez à la conformité du traitement de cette donnée au sens RGPD.
- "useragent" = le navigateur utilisé lors de l'envoi du formulaire
- "userid" = l'ID de l'utilisateur enregistré et connecté
- "username" = Le nom d'utilisateur de l'utilisateur enregistré et connecté
- "userfullname" = Le nom complet de l'utilisateur enregistré et connecté.
En cas d'utilisation d'un second, troisième, etc. formulaire, il sera inutile de recréer d'autres applications Google, il suffit de reprendre pour ce(s) formulaire(s) à partir de l'étape du copier / coller du contenu du fichier JSON et continuer avec les étapes suivantes en ayant bien pris soin de créer la feuille de calcul. Chaque connexiobn de formulaire reçoit une code d'authentification différent, n'utilisez pas un même code pour plusieurs formulaires.
Les données de plusieurs formulaires pourraient être enregistrées sur une seule et même feuille de calcul. Il suffirait d'ajouter une feuille 2 à votre Google Sheets et la mentionner comme étant réceptrice des données dans la figure Fig. 30. Les données du premier formulaire seraient alors enregistrées en feuille 1 et celle du second formulaire en feuille 2.
