Enregistrement de données de formulaire vers une feuille de calcul Google Sheets

Le nouveau plugin plg_breezingforms_spreadsheets ne fonctionnant pas parfaitement, il se déconnecte régulièrement de la Feuille de calcul Google Sheets, j'ai fait des recherches et ai trouvé une solution pour continuer d'enregistrer ses données de formulaire dans une Google Sheets sans utiliser le plug-in. Le seul petit inconvénient, est qu'il est nécessaire d'enregistrer les données préalablement dans un fichier intermédiaire pour rester relativement aisé à gérer. Le bon côté de la chose est que cette méthode est aussi accessible avec la version gratuite de BreezingForms ce qui n'est pas le cas en utilisant le plugin.

Niveau : Avancé
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4 : ✅

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 l'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…

Dans les scripts mentionnés sur cette page se trouvent des commentaires, lisez-les, ils vous apportent les informations de personnalisation pour votre projet.

Création du formulaire

Créez votre formulaire comme à votre habitude.

Si vous utilisiez un formulaire avec le plugin suscité, vous pouvez bien entendu le modifier pour l'adapter, il faut juste désactiver l'utilisation du plugin.

Pour le tutoriel, j'ai créé un petit formulaire de quatre champs, la date et l'heure seront insérés dans le fichier CSV et, par extension, dans la feuille de calcul Google Sheets.

Mise en place du script

Nous devons insérer un script PHP pour que le fichier .csv soit créé s'il n'existe pas ou édité s'il existe.

Lorsque le formulaire est créé, rendez-vous dans ses options avancées → Plus d'option → Envoyer des pièces.
Dans la partie Début de soumission, cochez l'option Personnalisé et dans la zone de l'éditeur de script, entrez le script suivant :

$this->execPieceByName("ff_InitLib"); // Initialise la bibliothèque BreezingForms

// Fonction de nettoyage du texte pour les inputs multilignes.
// Évite la création d'une nouvelle ligne dans le csv à chaque retour chariot dans le champ multiligne, textarea p.ex.
function clean_text($text) {
    $cleaned_text = str_replace(array("\r", "\n"), " ", $text);
    return $cleaned_text;
}
date_default_timezone_set("Europe/Paris");
$date = date("d/m/Y"); //Création de la date de la soumission
$heure = date("H:i:s"); // Création de l"heure de la soumission

$file = "csv2gs.csv"; // Chemin relatif vers le fichier CSV (à adapter selon votre configuration)

// Dans la variable $data, nous allons stocker les valeurs de date et heure en plus des valeurs des champs ff_getSubmit("nomDuChamp")
$data = [
	$date,
	$heure,
    ff_getSubmit("nom"),
    ff_getSubmit("prenom"),
    ff_getSubmit("email"),
    clean_text(ff_getSubmit("message")) // Zone de texte multiligne -> ajout du nettoyage du texte multiligne par la fonction clean_text
];
$dataString = implode(";", $data); // Fusionne les valeurs des champs en une chaîne séparée par des ";"

if (!file_exists($file)) { // Teste si le fichier existe déjà, si pas, on lui ajoutera les entêtes de colonne du fichier csv
    $labels = "Date;Heure;Nom;Prénom;E-Mail;Message"; // Labels des champs, séparés par des ";"
    file_put_contents($file, $labels); // Écrit les labels dans le fichier
}

$current = file_get_contents($file); // Lit le contenu du fichier

if (!empty($current)) {
    $current .= "\n"; // Ajoute un saut de ligne s'il y a déjà des données dans le fichier
}

$current .= $dataString; // Ajoute les nouvelles données à la fin du contenu

file_put_contents($file, $current); // Écrit le contenu dans le fichier

// Fin de l'enregistrement

Les champs supplémentaires de votre formulaire doivent être ajoutés dans la variable $data.

Leurs entêtes de colonne doivent être ajoutés à la liste de la variable $labels entre les guillemets et séparés par un point-virgule.
Les textes suivant les doubles slash sont des commentaires pour détailler le script, ils peuvent rester dans le script ou être supprimés si vous le désirez.

Enregistrez le script et sortez de l'édition pour revenir au formulaire que vous enregistrez une fois de plus pour être sûr qu'il soit bien dans son état final. Testez le formulaire en backend avec l'option Prévisualiser. Vérifiez ensuite l'existence du fichier .csv sur votre hébergement à l'aide d'un logiciel FTP ou depuis le cPanel ou similaire chez votre hébergeur.

Mise en place de la feuille de calcul Google Sheet

Afin de pouvoir enregistrer les données sur la feuille de calcul Google Sheets, rendez-vous sur votre espace Google Drive et dans le menu des applications, sélectionnez Sheets.

Créez une nouvelle feuille de calcul que vous nommez comme vous le voulez. Nommez également la feuille qui réceptionnera les données du formulaire. En bas de la feuille affichée, double-cliquez sur le nom de la feuille en question et éditez son nom. Restez simple, il faudra utiliser ce nom dans le script qui suivra.

La feuille de calcul est désormais prête à recevoir les données.

Exécuter l'import des données depuis le fichier .csv sur le serveur

Afin d'exécuter l'import, nous allons créer une macro Google pour Sheets.

Depuis votre feuille de calcul, cliquez l'option de menu Extensions → Apps Script pour accéder la partie de programmation de Sheets. Cette zone est l'équivalent du Visual Basic d'Excel.

Nommez votre projet en cliquant / modifiant le nom Projet sans titre.

Un bout de script se trouve déjà dans la zone d'édition, supprimez-le et entrez-y le script suivant :

function importCSVToNamedSheet() {
  var csvURL = 'https://www.mondomaine.com/csv2gs.csv'; // remplacez le lien ci-avant par le lien réel vers votre fichier CSV sur votre hébergement
  var response = UrlFetchApp.fetch(csvURL);
  var csvContent = response.getContentText();
  var csvData = Utilities.parseCsv(csvContent, ';');
  
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  
  // Spécifiez le nom de la feuille où vous souhaitez enregistrer les données
  var sheetName = 'Form-Data'; // Remplacez Form-Data par le nom réel de la feuille qui recevra les données
  
  // Récupérez ou créez la feuille avec le nom spécifié
  var sheet = spreadsheet.getSheetByName(sheetName);
  if (!sheet) {
    sheet = spreadsheet.insertSheet(sheetName);
  }
  
  // Effacer les données existantes dans la feuille de calcul
  sheet.clearContents();
  
  // Insérer les nouvelles données dans la feuille de calcul
  sheet.getRange(1, 1, csvData.length, csvData[0].length).setValues(csvData);
}

Enregistrez le projet en cliquant sur la petite icône d'enregistrement .

Test du script et de l'import des informations du fichier CSV

Revenez sur votre feuille de calcul Google Sheets. Cliquez l'option de menu Extensions → Macros → Importer une macro. Dans le popup qui s'ouvre, cliquez l'option Ajouter la fonction. Ouvrez une fois de plus le menu Extensions → Macros pour voir la présence de la macro dans le sous-menu.

Puisque vous aviez testé le formulaire et la création du fichier .CSV sur votre hébergeur, ce dernier contient déjà des données que vous pourrez importer en cliquant la macro. Ceci servira de test pour s'assurer que tout aille bien.

L'import s'est exécuté avec succès ? Génial, passons à la dernière étape.

Automatisation de l'import des données

Chacun peut penser ce qu'il veut de Google, il faut avouer que ses outils sont bien fichus et efficaces, voyons le suivant, le déclencheur.

Retournez sur la page d'édition des scripts Extensions → Apps Script, comme nous l'avons vu précédemment.

Dans le menu de gauche, pointez l'icône de Chronomètre et cliquer afin d'ouvrir l'éditeur de déclenchement. Dans le bas à droite dans la page, cliquez le bouton d'ajout de déclencheur. Dans le popup qui vient de s'ouvrir, paramétrez les options comme dans la capture suivante et enregistrez. Pour le test, nous choisissons une exécution par minute.

Rendez-vous sur votre formulaire BreezingForms et saisissez des données et validez. Rendez-vous sur votre feuille de calcul et patientez maximum une minute pour vous assurer que tout fonctionne comme vous l'espériez. Les données s'importent automatiquement et à intervalles réguliers.

Lorsque les tests sont concluants, vous pouvez éditer ce déclencheur pour l'adapter à votre situation, pour exécution chaque heure ou chaque jour, p. ex.

Si les données doivent être effacées pour de futurs enregistrements, il suffit de vous rendre sur votre FTP et supprimer le fichier .CSV, il sera recréé et resynchronisé au prochain enregistrement du formulaire.

En espérant que ce tutoriel pourra vous aider à contourner le bogue du plugin Spreadsheets de Crosstec.