Logo des Enovateurs
Astuces de Dev Web n° 9 : Envoyer les données d’un formulaire HTML sur Google Sheet

Astuces de Dev Web n° 9 : Envoyer les données d’un formulaire HTML sur Google Sheet

Aujourd’hui, je vais vous parler d’un problème que j’ai rencontré récemment. Je devais créer un site web qui présente un événement. J’y ai inclus un formulaire qui permet aux invités de dire s’ils participent ou non. Il fallait donc sauvegarder les informations issues du formulaire sans passer par une base de données du style MYSQL ou POSTGRES.

Au début, j’ai pensé à Google Forms. C’est typiquement l’outil de Google que la plupart des gens du marketing utilisent pour réaliser des sondages. Vous avez sûrement dû en créer ou en compléter. Un Google Form ressemble à peu près à ça :

L’avantage, c’est que vous pouvez consulter les réponses des utilisateurs dans un classeur Excel et mettre en place facilement vos filtres – par exemple pour envoyer un mail à tous ceux qui participent. Le désavantage, c’est que si vous intégrez le formulaire de Google sur un site, c’est très moche. On voit tout de suite que c’est une iframe (un élément provenant d’un service tiers). Pour plus d’informations, voici le site web de Google Forms.

En cherchant un peu, j’ai trouvé une meilleure solution : envoyer les données de mon formulaire vers un Google Sheet (l’équivalent d’Excel en ligne, géré par Google).

Envoyer des données d’un form HTML sur Google Sheet

Pour suivre ce tutoriel, je vous invite à le lire complètement d’abord. Ensuite, je vous propose de récupérer le code à la fin de l’article afin de pouvoir le personnaliser. Et si vous en êtes satisfait un petit café de soutien me fera plaisir 😀.

Créer un formulaire HTML

On va partir sur un exemple simple. Je vous propose de l’utiliser pour faire fonctionner votre système ; ensuite vous pourrez le personnaliser comme bon vous semble.

Créer un formulaire HTML - Google Sheet

C’est un formulaire vraiment simple. Il n’est pas beau et sert uniquement de base. Voici le rendu de mon formulaire qui s’ouvre avec votre navigateur sans même avoir de serveur Apache, c’est du pur HTML.

Formulaire de base pour Google Sheet

Paramétrer Google Sheet

La première étape consiste à créer un nouveau fichier Google Sheet qui recueillera les données du formulaire. Vous devez saisir sur la première ligne les names des inputs de vos formulaires par colonne.

Si on regarde notre code HTML de plus près :

Analyse des attributs HTML

Nous avons 4 name donc 4 colonnes => nom, prenom, participation, message.

Voici donc le résultat attendu sur notre feuille Google Sheet :

Feuille Google Sheet

Vous devez aussi renommer le nom de la feuille en Sheet1, car nous allons utiliser un script anglais qui a comme repère Sheet1. Vous pourrez le modifier plus tard si vous le souhaitez.

Donc on passe Feuille 1 à Sheet1 comme ci-dessous :

Création et importation du script Google Sheet

Pour que tout fonctionne, on doit insérer un morceau de code dans Google Sheet. Ainsi, celui-ci pourra récupérer les données provenant de notre formulaire HTML, et placer les valeurs dans les bonnes colonnes.

Pour créer un script, vous devez vous rendre dans la rubrique Outils puis Éditeur de scripts (comme ci-dessous) :

Editeur de script sur Google Sheet

Un nouvel onglet s’ouvre. N’ayez pas peur : même si c’est du code, vous n’avez pas besoin de réaliser beaucoup de manipulations.

Editeur de Script Google Sheet

Vous devez récupérer le script ci-dessous :

Script Google Sheet - Données provenant d'un fichier HTML

Mettez-le à la place de « function myFunction( )« .

Remplacement du code dans l'editeur de Google Sheet

Vous devriez avoir le même résultat que moi. Pour info, ce script ne provient pas de moi mais d’un certain Will Patera qui a fait un excellent travail (avec de bons commentaires dans son code) : voici le lien vers le gist original.

Ecrivons un nom de projet en haut à gauche. Je vous propose : Astuces de Dev Web n° 9 : Envoyer des données d’un form HTML sur Google Sheet. Il vous suffit juste de cliquer sur Projet sans titre pour y taper le votre.

Titre sur le script Google Sheet

A présent, sauvegardons le script en cliquant sur la petite disquette (en 4ème position).

Sauvegarde de script Google Sheet

Demander l’autorisation à Google Script d’utiliser votre compte Google

Il faut que Google Script ait l’autorisation d’écrire en votre nom dans votre fichier Google Sheet. Pour cela, vous devez vous rendre dans le menu et sélectionner Exécuter puis Exécuter la fonction et Setup :

Demande d'autorisation Google Script

Le script s’exécute et vous demande l’autorisation par le biais d’une petite pop-up.

Autorisation requise Google Script

Vous devez bien entendu cliquer sur le bouton Examiner les autorisations.

Une seconde pop-up se présente : sélectionnez le compte qui pourra accéder au script.

Sélection d'un compte

Google vous informe alors que l’application n’a pas encore été validée par Google et qu’il peut y avoir un risque pour vous. Autant vous dire qu’ils affichent ce message surtout pour se protéger eux-mêmes. Vous pouvez lire le script et vous faire votre propre opinion. En tout cas, je peux vous dire que pour moi tout a fonctionné ; je n’ai pas eu de dommage collatéral.

Validation d'application Google Script

Pour autoriser l’application, vous devez cliquer sur Masquer les paramètres avancés puis Accéder à Astuces de Dev (non sécurisé).

Google a tellement peur qu’on fasse une erreur qu’il nous affiche un dernier résumé de ce que l’on s’apprête à faire :

Autorisation de gérer des feuilles Google Sheet

Vous devez bien entendu cliquer sur Autoriser. Google nous laisse enfin tranquille, on va pouvoir passer à la suite.

Déployer le script comme une application Web

Le script doit être accessible depuis votre formulaire web. Cest la raison pour laquelle il faut déployer le script en tant qu’application web.

Pour cela, vous devez vous rendre sur le menu, à l’onglet Publier puis Déployer en tant qu’application Web…

Déployer en tant qu'application Web Google Sheet

Une nouvelle pop-up s’ouvre. Il faut y apporter quelques petites retouches :

Paramètres pour déployer en tant qu'application Web

Il est nécessaire de saisir une version de projet. Je lui ai donné le même nom que mon projet (premier rectangle rouge). Ensuite, dans la liste Qui a accès à l’application, vous devez choisir la valeur Tout le monde, même les utilisateurs anonymes. Cela permettra aux visiteurs anonymes de compléter notre formulaire web et d’envoyer leurs données sur un Google Sheet. Pour terminer, vous devez cliquer sur Déployer.

Google a maintenant généré une URL. Recopiez-la soigneusement dans un bloc-note car c’est grâce à elle qu’on pourra communiquer les données de notre formulaire.

Url de l'application Web Google Script

La partie script de Google étant maintenant terminée, je vous propose de repasser sur notre cher formulaire HTML.

Modifier le formulaire HTML

Il faut rajouter un id sur le formulaire ainsi que sur le bouton d’envoi des données, pour pouvoir structurer les informations grâce à JQuery. Sur la balise form, on rajoute l’id test-form et sur la balise button submit, on rajoute l’id submit-form. Maintenant, votre formulaire devrait avoir ce look-là :

Ajout Id dans le formulaire HTML - Google Sheet

Code mis à jour le 26/08/2019 pour gérer les versions plus récentes de JQuery.

A présent, on va s’occuper de la partie JQuery. Juste après la balise fermante </form>, on va importer la célèbre librairie JQuery, comme ceci :

Ajout de JQuery - Google Sheet

Nous allons devoir ajouter une autre librairie qui va structurer les données envoyées à Google Sheet. Vous pourrez trouver le détail de cette librairie en suivant cet URL. Il faut télécharger le fichier présent à cette adresse :

https://raw.githubusercontent.com/hongymagic/jQuery.serializeObject/master/dist/jquery.serializeObject.min.js

Et ajouter ce fichier au projet :

Ajout de serialize Object

Puis nous allons rajouter un petit morceau de JQuery :

Ajout Ajax requete vers Google Sheet

J’attire votre attention : vous devez changer la ligne en rouge ci-dessus par le lien généré par Google Sheet précédemment. Votre fichier complet doit avoir ce look-là :

Envoyer les données d’un formulaire HTML sur Google Sheet

Il ne vous reste plus qu’à tester tout ça ! Remplissez le formulaire et cliquez sur Envoyer, puis retournez sur le fichier Google Sheet. Comme par magie, la donnée va s’afficher. Voici le résultat pour moi :

Démo : Astuces de Dev Web n° 9 : Envoyer des données d'un form HTML sur Google Sheet

Si vous rencontrez des soucis pour tout faire fonctionner, servez-vous des commentaires. Si vous souhaitez voir le résultat de vos propres yeux, vous pouvez remplir le formulaire ici, et voir votre ligne sur ce document Drive. Pour information, je me suis basé sur cet article en anglais d’un certain David McCoy et du code Google Sheet de Will Patera.

Pour télécharger le code étape par étape ainsi que le code final, il faut remplir ce petit formulaire.

ATTENTION : Notre site évolue et ne propose plus d’envoi automatique pour le moment. Vous devez donc adresser vos réponses à l’adresse contact@les-enovateurs.com. Merci !

Formulaire de récupération du code
Jérémy PASTOURET
Jérémy PASTOURET
Journaliste en recherche constante de nouveaux outils plus légers, accessibles à tous et respectueux de la vie privée de leurs utilisateurs.

Commentaires

  • Antoine

    2021-1-16 18:1

    Bonjour Jérémy,

    Un grand merci pour ce super tuto !

    J’ai néanmoins un problème de lien entre le fichier source et le google sheet.
    Lorsque j’affiche le code source de la page j’ai cette erreur :

    Failed to load resource: net::ERR_FILE_NOT_FOUND sur la ligne : jquery.serializeObject.min.js:1

    Et je dois avouer que la partie qui concerne l’installation de la librairie JQUERY est le seul passage que je n’ai pas compris ^^

    Avez vous une petite idée ?

    Merci d’avance 🙂

    • Jérémy PASTOURET

      2021-1-16 19:19

      Bonjour Antoine,
      Il semblerait que cela soit un problème d’inclusion du fichier jquery.serializeObject.min.js.
      Il faut donc vérifier que les chemins d’inclusions des fichiers sont correctes.
      Sinon est-ce que votre formulaire est disponible sur le Web ?
      Jérémy

  • Juliette G.

    2022-1-19 10:38

    Bonjour,

    Votre tutoriel est vraiment très intéressant et pratique à mettre en place si on ne souhaite pas prendre en main une base de données ! ^^

    J’ai une question, pour complexifier la chose :
    je souhaiterais ajouter une checkbox, pour choisir plusieurs jours sur une semaine, mais les informations ne sont pas prises en compte dans le tableau.
    Auriez-vous une solution pour ce problème, s’il vous plaît ?

    Je vous remercie d’avance et vous souhaite une agréable journée !
    Cordialement.

    • Jérémy PASTOURET

      2022-1-19 11:26

      Bonjour,
      Il faut penser à :
      – ajouter une nouvelle colonne dans le tableau de Google
      – ajouter la checkbox dans le code html
      – envoyer la valeur de la checkbox dans la requête ajax.
      Il doit vous manquer une de ces étapes.
      Je vous souhaite également une agréable journée.
      Jérémy.

      • Juliette G.

        2022-1-19 11:56

        Merci pour cette première réponse rapide !

        Pour le tableau Google et la checkbox html, je pense que c’est bon.
        C’est plutôt pour la requête Ajax que j’ai des soucis : quel code faut-il intégrer et où ? (sur le script de google sheet, ou mon propre js ?)

        Je suis débutante dans le JS, donc j’ai un peu de mal à situer le problème…

        • Jérémy PASTOURET

          2022-1-19 12:30

          Pour éviter d’être embêté avec JS. Je vous propose de tester l’ajout de liste déroulante une par jour en mettant oui ou non. Déjà pour vérifier si c’est un problème avec l’envoi JS ou non. Ensuite, le champ checkbox est un peu particulier, il peut envoyer une liste de valeur, gestion qui est surement pas géré par serializeObject. Il faut probablement écrire quelques lignes avant var jqxhr afin de formater la donnée présent dans les checkbox dans un autre champ texte qui sera transmis au tableur de Google.

          • Juliette G.

            2022-1-19 13:43

            J’ai testé la liste déroulante, il n’y a pas de problème, car il n’y a qu’un choix fait sur la liste.
            Le problème de la checkbox, c’est qu’il peut y avoir plusieurs cases cochées en même temps, et les colonnes ne prennent qu’une seule informations à chaque fois actuellement (j’ai eu beau changer les « id », « name » et autres, rien n’y a fait…). Il est possible qu’il faille changer quelque chose dans le script, mais mon niveau n’est pas assez bon pour passer cette étape là !
            Donc je pense que je vais voir pour détourner le problème…
            Mais si vous trouvez une solution efficace, je serai toujours preneuse !
            Merci à vous et bonne continuation.

  • Aissam

    2022-2-15 21:43
    Je suis sur le même projet un peu près. Pour moi je doit envoyer des données de mon pc local connectés à internet vers Google sheet. Est ce que c'est la même chose à faire.
    • Jérémy PASTOURET

      2022-2-16 12:43
      Bonjour, Oui cet article peux vous aider à remplir un Google sheet depuis votre pc en local. Par contre, je ne comprends pas le cas d'usage. Pourquoi ne pas le remplir à la main ?
  • Dominique

    2022-3-11 14:13
    Bonjour, Excellent tuto, mais est-il possible d'avoir la possibilité de télécharger les différents encarts de codes utilisés. Merci d'avance.
    • Jérémy

      2022-3-11 14:13
      Bonjour, Merci pour votre retour. Pour récupérer le code source : envoyez-nous un mail à contact@les-enovateurs.com
Ecrire un commentaire

Sobriété

Pour aller plus loin

Découvrez nos tutos !

Les Enovateurs

Rejoignez notre communauté de lecteurs

Retrouvez-nous aussi sur

linkedin