Accueil Tuto 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

par Jérémy PASTOURET

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). Si vous ne connaissez pas, voici le lien pour en savoir plus.

 

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

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.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Notre grande fête</title>
</head>
<body>

<h1>Notre grande fête</h1>
<form>
    <label for="nom">Nom</label>
    <input type="text" name="nom" id="nom"/>

    <br />
    <br />

    <label for="prenom">Prénom</label>
    <input type="text" name="prenom" id="prenom"/>

    <br />
    <br />

    <label for="participation">Participerez-vous à notre grande fête ?</label>
    <select name="participation" id="participation">
        <option value="non">Non</option>
        <option value="peut-etre">Peut-être</option>
        <option value="Oui">Oui</option>
    </select>

    <br />
    <br />

    <label for="message">Message : </label>
    <textarea name="message" id="message">

    </textarea>

    <br />
    <br />

    <button type="submit" name="envoyer" >Envoyer</button>

</form>

</body>
</html>

 

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 :

<input type="text" name="nom" id="nom"/>
<input type="text" name="prenom" id="prenom"/>
<select name="participation" id="participation"></select>
<textarea name="message" id="message"></textarea>

 

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 faire un copier-coller du script ci-dessous :

// original from: http://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/
// original gist: https://gist.github.com/willpatera/ee41ae374d3c9839c2d6 

function doGet(e){
  return handleResponse(e);
}

//  Enter sheet name where data is to be written below
        var SHEET_NAME = "Sheet1";

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

function handleResponse(e) {
  // shortly after my original solution Google announced the LockService[1]
  // this prevents concurrent access overwritting data
  // [1] http://googleappsdeveloper.blogspot.co.uk/2011/10/concurrency-and-google-apps-script.html
  // we want a public lock, one that locks for all invocations
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.
  
  try {
    // next set where we write the data - you could write to multiple/alternate destinations
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);
    
    // we'll assume header is in row 1 but you can override with header_row in GET/POST data
    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = []; 
    // loop through the header columns
    for (i in headers){
      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
        row.push(new Date());
      } else { // else use header name to get data
        row.push(e.parameter[headers[i]]);
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

 

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 ScriptLe 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à :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Notre grande fête</title>
</head>
<body>

<h1>Notre grande fête</h1>
<form id="test-form">
    <label for="nom">Nom</label>
    <input type="text" name="nom" id="nom"/>

    <br />
    <br />

    <label for="prenom">Prénom</label>
    <input type="text" name="prenom" id="prenom"/>

    <br />
    <br />

    <label for="participation">Participerez-vous à notre grande fête ?</label>
    <select name="participation" id="participation">
        <option value="non">Non</option>
        <option value="peut-etre">Peut-être</option>
        <option value="Oui">Oui</option>
    </select>

    <br />
    <br />

    <label for="message">Message : </label>
    <textarea name="message" id="message">

    </textarea>

    <br />
    <br />

    <button type="submit" id="submit-form" name="envoyer" >Envoyer</button>

</form>

</body>
</html>

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 :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

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 :

<script type="text/javascript" src="./jquery.serializeObject.min.js"></script>

 

Puis nous allons rajouter un petit morceau de JQuery :

<script type="text/javascript">
var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/abcdefghijklmnopqrstuvwxyz1234567890/exec';

$('#submit-form').on('click', function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).done(function(){
// do something
}
); }); </script>

 

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

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Notre grande fête</title>
</head>
<body>

<h1>Notre grande fête</h1>
<form id="test-form">
    <label for="nom">Nom</label>
    <input type="text" name="nom" id="nom"/>

    <br />
    <br />

    <label for="prenom">Prénom</label>
    <input type="text" name="prenom" id="prenom"/>

    <br />
    <br />

    <label for="participation">Participerez-vous à notre grande fête ?</label>
    <select name="participation" id="participation">
        <option value="non">Non</option>
        <option value="peut-etre">Peut-être</option>
        <option value="Oui">Oui</option>
    </select>

    <br />
    <br />

    <label for="message">Message : </label>
    <textarea name="message" id="message">

    </textarea>

    <br />
    <br />

    <button type="submit" id="submit-form" name="envoyer" >Envoyer</button>

</form>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="./jquery.serializeObject.min.js"></script>

<script type="text/javascript">
    var $form = $('form#test-form'),
        url = 'https://script.google.com/macros/s/AKfycbyxcVsL3PWWrpjMJbRlCIctZtV18rxrn_NForMUAENMNqLFVdf_/exec';

    $('#submit-form').on('click', function(e) {
        e.preventDefault();
        var jqxhr = $.ajax({
            url: url,
            method: "GET",
            dataType: "json",
            data: $form.serializeObject()
        }).done(function(){
// do something
}
); }); </script> </body> </html>

 

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.

Summary
Astuces de Dev Web n° 9 : Envoyer les données d'un formulaire HTML sur Google Sheet
Article Name
Astuces de Dev Web n° 9 : Envoyer les données d'un formulaire HTML sur Google Sheet
Author
Les Enovateurs
Les Enovateurs
https://les-enovateurs.com/wp-content/uploads/2016/06/Logo-VF-1.png

Vous pourriez aussi aimer

72 commentaires

Pibolo 16 septembre 2018 - 11 h 50 min

Bonjour, peut-on aussi uploader des images ?

En fait je souhaitais utiliser ce système couplé en plus à google agenda. Je sais que c’est possible de créer automatiquement des événements à l’envoi du formulaire mais j’ai aussi besoin que des images puissent être “uploadées”. Vous savez si c’est possible ? Merci

Répondre
Jérémy PASTOURET 19 septembre 2018 - 13 h 36 min

Bonjour, à l’heure d’aujourd’hui, je n’ai pas fait de test sur l’upload d’images. Mais si vous vous lancez la dedans et que cela ne marche pas, je pense qu’il faudrait gérer le problème avec les base64_encode. En tout cas, n’hésitez pas à écrire un autre commentaire pour parler de vos résultats, je pense que ça intéressera plus d’un ! 🙂

Répondre
noémie 9 novembre 2018 - 17 h 04 min

Bonjour,

J’ai bien suivi votre tutoriel, Cependant lorsque je ne suis pas connecter à mon compte google et qu’on saisi le formulaire sur un autre navigateur par exemple, le google sheet ne se rempli pas.
auriez vous une solution ?

Répondre
Jérémy PASTOURET 13 novembre 2018 - 19 h 25 min

Bonjour,
Il faudrait regarder les logs sur la page Google Sheet.
Jérémy.

Répondre
MOLLET 4 décembre 2018 - 21 h 21 min

Merci beaucoup, cela fonctionne très bien.

Mais, car il y a un mais, j’aimerais qu’après avoir cliqué sur le bouton Envoyé, un message s’affiche du genre : “Données enregistrée, merci beaucoup”. Est-ce possible ? j’imagine que oui dans le script du bouton submit, mais je ne sais pas faire.

Merci pour votre aide.

Frédéric MOLLET

Répondre
Jérémy PASTOURET 13 décembre 2018 - 20 h 42 min

Merci pour votre retour positif.
Pour répondre à votre question : c’est tout à fait possible.

Je vous propose de jeter un œil à cette partie du code JQuery.

$('#submit-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject()
}).success(
// do something
);
});

Il vous suffit de coder l’action après le commentaire //do something.
Vous pouvez par exemple faire un alert('Données enregistrée, merci beaucoup');

ou mieux vous spécifier une div, et vous y mettez un message.
Par exemple :
Vous pouvez mettre cette ligne juste après le bouton envoyer :


et juste après le commentaire
//do something
vous pouvez mettre
$("#reponse").html("Données enregistrée, merci beaucoup");

Si vous avez besoin de plus de précisions, vous pouvez me répondre dans les commentaires.

Répondre
William Bruel 5 mars 2019 - 17 h 26 min

Bonsoir,

J’ai tester votre code mais il me renvoi sur la page. Je souhaiterais faire une redirection vers une autres page j’ai tester plusieurs solutions mai rien ne fonctionne pourriez vous m’aider ?

Répondre
Jérémy PASTOURET 5 mars 2019 - 22 h 16 min

Bonsoir,

Pouvez-vous mettre en commentaire la partie du code concernée ? Pouvez-vous aussi écrire ce que vous avez tenté ?

Répondre
William 6 mars 2019 - 8 h 53 min

Bien entendu :

$(‘#submit-form’).on(‘click’, function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: “GET”,
dataType: “json”,
data: $form.serializeObject()
}).success(
$(“#reponse”.windows.location = “https://bodypack-shop.com/”;
);
});

J’ai également tenter :

Next

Pour ce cas le problème est que la redirection ce fait la redirection ne prend pas compte de la validation du formulaire.

Jérémy PASTOURET 14 mars 2019 - 21 h 48 min

Les lignes suivantes sont erronées :
.success(
$(“#reponse”.windows.location = “https://bodypack-shop.com/”;
);
});
Je ne sais pas si le commentaire a mal été récupéré, ou si vous avez fait un mauvais copier-coller.
Dans le doute, je vous invite à remplacer ces lignes par :
.success(function(){
window.location = “https://bodypack-shop.com/”;
}
);
Au passage j’ai remarqué que mon code comportait aussi un petit souci. C’est corrigé, tenez-moi au courant si pour vous cela fonctionne aussi.

guillaume 9 janvier 2019 - 10 h 53 min

Merci beaucoup, cela fonctionne bien ! par contre lorsque j’intègre vos lignes pour ajouter un message “Données enregistrée, merci beaucoup” une nouvelle page s’ouvre (https://1111560850-atari-embeds.googleusercontent.com/formbuilder/view.php) avec une erreur 404.
De quoi peut-il s’agir ?
merci !!

Répondre
Jérémy PASTOURET 5 février 2019 - 20 h 23 min

Pouvez-vous mettre en commentaire le code que vous avez adapté du mien ? Car il difficile pour moi de vous aider sans lire le code qui a été rédigé.

Répondre
GUILLAUME 8 février 2019 - 12 h 56 min

Bonjour Jérémy,

j’ai utilisé exactement votre code qui fonctionne très bien par ailleurs (écriture dans le google sheet sans aucun soucis), sauf que lorsque je change la ligne “// do something ” par une ligne de commande (par exemple : $(“#reponse”).html(“Données enregistrée, merci beaucoup”)) une nouvelle page s’ouvre mais une page d’erreur (celle que je mentionne dans mon premier commentaire). L’idée est d’avoir une page informative de confirmation comme vous pouvez l’imaginer.
Je vous remercie pour votre aide !

Répondre
Jérémy PASTOURET 10 février 2019 - 22 h 52 min

Bonjour Guillaume, je pense que c’est simplement une erreur de Javascript. Il faudrait essayer de mettre un console.log(“test”); à la place, juste pour vérifier s’il y a un changement de comportement.

Répondre
Jérémy PASTOURET 14 mars 2019 - 21 h 50 min

Bonjour Guillaume,
Je viens de comprendre : une coquille s’est glissée dans le code de l’article. Je viens de le corriger, aussi je vous conseille de reprendre la partie success que j’ai modifiée. Tenez-moi au courant si vous rencontrez d’autres problèmes.

Répondre
GUILLAUME 21 mars 2019 - 17 h 03 min

Bonjour Jérémy,

Je n’arrive malheureusement toujours pas à retourner quelque-chose, voici mon code :

var $form = $(‘form#test-form’),
url = ‘https://script.google.com/macros/s/AKfycbzh7S62OzNc6uv05-Rv3-aWnHo9NAt8olFpXubfs7SZcnqG344/exec’;

$(‘#submit-form’).on(‘click’, function(e) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: “GET”,
dataType: “json”,
data: $form.serializeObject()
}).success(function(){
window.location = “https://www.google.fr/”;
}
);
});

encore merci pour votre aide !

Répondre
Guillaume 22 mars 2019 - 23 h 13 min

Bonjour,

Je ne trouve pas ou ajouter et exécuter le fichier HTML … Quand je test le lien publié j’ai l’erreur : {“result”:”success”,”row”:7}
Mais jamais l’apparition du visuelle HTML. des piste ? 🙂

Merci

Répondre
Guillaume 28 mars 2019 - 15 h 28 min

Bonjour,

Personne pour me renseigner ..? 🙁

Répondre
Jérémy PASTOURET 28 mars 2019 - 19 h 37 min

Bonjour, désolé pour cette réponse tardive : nous gérons le blog sur notre temps libre.
J’ai testé votre code mis en commentaire et je n’ai pas rencontré de souci particulier. Je suis bien redirigé vers Google.com. A tout hasard, quelle est la version de JQuery utilisée ? Pouvez-vous essayer la version 1.12.4.min.js pour voir si cela corrige votre problème ?

Répondre
Aubert 26 avril 2019 - 17 h 28 min

Bonjour, j’ai suivi à la lettre votre tuto mais cela ne fonctionne pas pour moi. J’ai regardé également les sites que vous citez mais je ne trouve pas l’erreur. Rien n’apparait sur Google Sheets pourtant j’ai bien recopié l’URL sur mon fichier HTML. Pourriez-vous m’aider s’il vous plait ?

Répondre
Aubert 30 avril 2019 - 10 h 52 min

UPDATE : J’ai testé avec uniquement votre code pour en savoir plus sur l’origine du problème, et même comme ça je n’arrive pas à le faire fonctionner alors que je suis précisément votre tutoriel.

Répondre
Jérémy PASTOURET 6 mai 2019 - 19 h 36 min

Bonjour,
Je vous propose un exemple concret du résultat obtenu en suivant l’article.
Voici les liens :
– pour accéder au formulaire HTML : https://les-enovateurs.com/exemple/astuce_web_9.html
– pour voir le résultat sur le drive : https://docs.google.com/spreadsheets/d/1r7S3713z8t-kTHu3J1bgSCjUcSmiM97ztO_fybEZYY4/edit#gid=0
Je précise que pour éviter que mon document drive ne soit rempli par des robots, j’ai ajouté une variante dans le code en plaçant un Captcha (mais son efficacité reste à démontrer).

Répondre
Aubert 7 mai 2019 - 10 h 31 min

Bonjour, je vous remercie de votre réponse.

Je me demande en fait si le problème ne viendrait pas de mon propre compte Google Drive.
En effet, je ne comprends pas pourquoi en suivant la même démarche et en utilisant uniquement votre code cela ne fonctionne pas.
Savez-vous s’il faut modifier certains paramètres de notre compte Google ?

En attendant, lorsque je test avec vos liens, cela fonctionne parfaitement.

Répondre
Jérémy PASTOURET 16 juin 2019 - 20 h 50 min

Bonjour,
je vous conseille de recommencer le tutoriel sur un nouveau fichier Excel. Il est tout à fait possible que vous ayez raté une pop-up vous demandant l’autorisation d’effectuer une opération.
En espérant que cela fonctionnera maintenant.

Répondre
Simon Fayolle 13 juillet 2019 - 19 h 33 min

Bonjour, j’ai un souci.
J’ai besoin d’appeller 2 fois la librairie jquery-1.12.4.min.js dans ma page car j’ai aussi un autre script (externe à ma page celui-là) me permettant d’animer le défilement de ma page entre différentes balises.
Votre script que j’ai mis en interne sur ma page recquiert en effet ce même appel à cette librairie jquery.

Le résultat fait qu’il y a un conflit entre les deux.
J’ai bien réussi à regler ce conflit via jQuery.noConflict() seulement un autre problème apparait quand j’ai remplacé les $ : le google sheet marque “undifined” lorsqu’on envoie les données via le formulaire…

Auriez-vous une solution ?
Merci !

Répondre
Jérémy PASTOURET 15 juillet 2019 - 22 h 18 min

Bonjour,
Il est difficile pour moi de vous aider sans avoir le code sous les yeux.
Est-il hébergé quelque part afin que je puisse le lire ?

Répondre
Simon Fayolle 13 juillet 2019 - 19 h 38 min

Peut-être puis-je externaliser le code que vous mettez dans la page html ?
Comme pour l’autre code me permettant d’animer mon défilement entre balises… (il y a plusieurs fichiers javascript appellés)
Si oui, comment est-ce possible ?
Merci, merci !

Répondre
Simon Fayolle 13 juillet 2019 - 19 h 42 min

Pour vous clarifier ma situation : lorsque j’appelle 2 dois la librairie jquery (1 fois dans mon header pour l’autre script qui m’anime le défilement, et 1 fois dans votre code à mettre dans le contenu de ma page), le défilement animé ne marche plus…
Seul le formulaire fonctionne (dans ce cas de figure).

Répondre
Simon Fayolle 17 juillet 2019 - 13 h 14 min

Bonjour Jérémy,
Voilà le site en question : http://simcha.fr/

Répondre
Simon Fayolle 17 juillet 2019 - 13 h 17 min

Le code n’est pas complexe, voici le conflit qui pose problème avec le votre (il est dans ma balis ° /

Il y a aussi ceux là dans le mais qui ne posent aucun problème vu qu’ils sont externalisés et ne sont pas de librairies jquery.

Répondre
Simon Fayolle 17 juillet 2019 - 13 h 18 min

Bon… Je ne peux pas mettre de code dans vos commentaires. Ils n’apparaissent pas :/ Je vous laisse les lire sur mon site

Répondre
Jérémy PASTOURET 24 juillet 2019 - 12 h 46 min

Bonjour,
Je vous invite à mettre le code sur https://pastebin.com/ puis à insérer le lien généré par le site.

Répondre
Simon Fayolle 23 juillet 2019 - 15 h 11 min

Pas d’idée pour ma problématique Jérémy ??

Répondre
Jérémy PASTOURET 24 juillet 2019 - 12 h 47 min

Je viens de consulter votre site, avez-vous essayé d’enlever la librairie jquery 1.12 pour voir si votre version de Jquery fonctionne avec mon code ?

Répondre
Simon Fayolle 7 août 2019 - 13 h 47 min

Oui : le formulaire marche si j’enlève la librairie 1.12 que j’appelle dans mon header pour le défilement animé. Mais c’est le défilement qui ne marche plus dans ces cas là.
Et à l’inverse, si j’enlève votre appel vers la librairie dans votre code et que je le laisse ce même appel dans mon header : l’animation marche, mais plus le formulaire…

Répondre
Jérémy PASTOURET 8 août 2019 - 15 h 37 min

Dans la documentation de votre librairie, regardez comment faire un appel Ajax. Puis reportez dans le code ce que vous voyez dans la documentation. Normalement, cela devrait fonctionner.

Répondre
Simon Fayolle 9 août 2019 - 14 h 22 min

Voilà le code que j’ai trouvé sur le net :
Hors mêmes problemes : quand je le mets 2 fois (header + votre code) seul le formulaire marche, et une seule fois dans votre code : le défilement animé marche plus, une seule fois dans header : le formulaire marche plus….

Simon Fayolle 9 août 2019 - 14 h 53 min

Ca fait un bail que j’épluche tous les forums. Y’a rien a faire, tout le monde dit que 2 appels de librairies dans la même page, c’est impossible et incohérant… Tu connais la technique noConflict() toi ?

Simon Fayolle 25 août 2019 - 23 h 04 min

Bonjour Jérémy, aurais-tu trouvé une solution pour moi ? Comme je te disais voilà le code ajax trouvé, mais qui ne fonctionne pas sur mon site !
lien généré pour accéder au code que j’ai trouvé : https://pastebin.com/AWBQHqgb

Simon Fayolle 26 août 2019 - 2 h 53 min

Il n’est pas possible d’externaliser le code javascript que tu propose pour le formulaire ? Car c’est le cas pour mon code jaascript de défilement (easing) et cela fonctionne bien. J’ai beau tenter de mettre ton code dans 1 ou 2 fichier .js externes, l’appeler (les appeler) dans le header et mettre dans le formulaire html : “onclick=”function()” ou “onclick=”function(e)”… rien à faire, ça ne marche pas :/

Voilà mon code html : https://pastebin.com/LEuEYLkk
Et mon code .js externe (le tien) : https://pastebin.com/dMk6idV8

Merci !

Simon Fayolle 26 août 2019 - 16 h 11 min

Pour ceux que ça intéresse, j’ai lancé ce sujet sur alsacréation – forum : https://forum.alsacreations.com/topic-5-85534-1-Externalisation-de-fichier-javascript.html

Jérémy PASTOURET 26 août 2019 - 22 h 32 min

Bonjour Simon,
J’ai résolu le problème de compatibilité avec les versions plus récentes de JQuery. L’article et l’exemple en ligne ont été mis à jour.
Il faut intégrer une autre librairie en charge de la sérialisation du formulaire et changer la propriété success par done.
En espérant que cela fonctionne pour vous.

Simon Fayolle 3 septembre 2019 - 1 h 46 min

Bonjour Jérémy, toujours le même problème : l’animation javascript ne marche pas si j’appelle la librairie comme tu l’a fait après la balise form, et non plus si je l’appelle aussi dans le header (pour l’animation javascript). Le seul moyen pour que l’animation marche, c’est de le faire dans le header…et uniquement à cet endroit :/

Jérémy PASTOURET 26 septembre 2019 - 14 h 17 min

Bonjour,
Il faut que tu migres le code du fichier https://simcha.fr/scroll.js pour qu’il soit compatible avec la version de 3 de JQuery. Il suffit de regarder dans la console les erreurs qui remontent. Par exemple le sélecteur actuel est incorrect. Le voici corrigé :

$('a[href^="#"]')

Simon Fayolle 3 septembre 2019 - 1 h 56 min

Revoilà le code entier de ma page si tu veux le tester de chez toi : https://pastebin.com/Qc8t2sRx

Simon 4 octobre 2019 - 11 h 09 min

J’ai fait cette modif : $(‘a[href^=”#”]’).
Maintenant il me dit : k.easing[this.easing] is not a function.
Et ce bout de code est présent dans la librairie 3.4.1 qui est appelée d’internet… je ne pige pas grand chose à tout ça. Je te laisse me dire. Merci

Jérémy PASTOURET 24 octobre 2019 - 12 h 38 min

Il faut faire attention à la récupération de code depuis un commentaire. La plupart du temps le symbole ‘ est remplacé par un caractère différent (pour éviter l’injection SQL). Je te conseille donc de récrire l’instruction $(‘… à la main. Et ça devrait marcher comme sur des roulettes.

Mazioua Amirouche 31 juillet 2019 - 11 h 40 min

bonjour merci pour le code en 1er, le programme est fait d’une manière à que le nom par exemple soit dans la 1er cellule et donc le son input c dans la 2e ligne , sauf que j’ai envie par exemple que j’écris nom dans la cellule 500 par exemple et donc l’input dans la ligne 501 sauf que l’a sa marche par je tente de changer mais sa marche pas

Répondre
Jérémy PASTOURET 8 août 2019 - 15 h 37 min

Bonjour,
changer le code de la macro n’est pas simple.
Pour éviter les ennuis, je vous conseille de créer une nouvelle feuille sur votre classeur Google Sheet.
La feuille 1 contient les données comme présenté dans l’article.
Dans la deuxième feuille, cliquez sur la première cellule et dans la barre de saisie de formule, saisissez le terme =TRANSPOSE(.
Ensuite cliquez sur la feuille 1 et sélectionnez la plage de données, fermez la parenthèse de la formule, tapez sur la touche entrée.
Le tour est joué, la fonction transpose permet de retourner le tableau. Si j’ai bien compris votre problématique, cela devrait la résoudre.

Répondre
mazioua amirouche 20 août 2019 - 12 h 25 min

ce n’est pas exactement ce que je veux mais y a de l’idée, si on reste dans votre idée alors il faut copier la contenue de la feuille 1 pas les transposer avec le même bénéfique d’actualisation a chaque modif de feuille 1, si y a une fonction qui c fait son c bien sinon je fais double transposé. merci à toi si t’a une idée je t’écoute sinon je voulais juste partager mes résultats.

Répondre
Simon Fayolle 25 août 2019 - 22 h 18 min

Bonjour Jérémy, aurais-tu trouvé une solution pour moi ? Comme je te disais voilà le code ajax trouvé, mais qui ne fonctionne pas sur mon site !
lien généré pour accéder au code que j’ai trouvé : https://pastebin.com/AWBQHqgb

Répondre
Antony 18 août 2019 - 12 h 34 min

Bonjour Jérémy,

Merci pour cette astuce. Je voudrais savoir si celle-ci est compatible avec Bootstrap car lorsque j’applique cette méthode sur un fichier html à part (sans Bootstrap), tout marche bien. Par contre lorsque je l’intègre à un fichier html utilisant Bootstrap qui fait déja appel à un lien Jquery, le document Google Sheet ne s’actualise plus. Savez-vous comment régler le problème ?

Ci-dessous les liens Bootstrap:

Merci par avance !

Répondre
Jérémy PASTOURET 26 août 2019 - 22 h 33 min

Bonjour Antony,
Je viens de faire quelques changements dans le code. Il maintenant compatible avec Bootstrap et les dernières versions de JQuery.
Il faut intégrer une autre librairie en charge de la sérialisation du formulaire et changer la propriété success par done.
En espérant que cela fonctionne pour vous.

Répondre
Guillaume 31 août 2019 - 23 h 02 min

Bonjour,

Merci beaucoup pour votre code !
Néanmoins, le mien ne marche qu’avec safari… Est-ce normal ? cela vient peut-être de l’URL pris également de safari ?

De plus, les valeurs qui s’affichent dans le drive ne sont que des “undefined”…

Merci d’avance de votre aide et du temps passé dessus !

Répondre
Jérémy PASTOURET 26 septembre 2019 - 14 h 18 min

Bonjour,
Est-il possible d’accéder au code afin que j’y jette un oeil ? Pour les valeurs undefined, je pense que c’est un problème de sélecteur. Utilise les instructions une à une dans la console de ton navigateur, de cette manière tu trouveras celles qui ne fonctionnent pas correctement.

Répondre
Gilles 14 septembre 2019 - 13 h 36 min

Bonjour,
Je reviens vers vous, mon formulaire fonctionne, j’ai une autre question, je souhaiterai contrôler la saisie.
rendre des <input obligatoires, j'ai essayé required et required="required", mais cela ne fonctionne pas comme indiqué dans plusieurs tutos.
et aussi avec des contrôles plus complexes comme le format d'un numéro de téléphone. seul le maxlength="10" fonctionne, toujours après de multiples essais issus de tutos.
Merci par avance.
gilles

Répondre
Jérémy PASTOURET 26 septembre 2019 - 14 h 17 min

Bonjour,
Pour les champs obligatoires, je vous propose d’utiliser la librairie suivante : https://jqueryvalidation.org/documentation/.
Elle est assez simple, et vous permet d’utiliser une fonction qui vérifie si le formulaire est complet. Si c’est le cas, vous pouvez envoyer les données auprès de la feuille GoogleSheet.

Répondre
Christian 28 janvier 2020 - 14 h 48 min

Bonjour Jérémy,
merci pour le tuto, il est génial !
En revanche, j’ai un problème avec https://jqueryvalidation.org/documentation/ pour vérifier que les champs soient bien remplis.
Pas moyen d’avoir la vérification AVANT que le formulaire ne soit envoyé !
Est-ce que tu pourrais mettre un exemple pour que je comprenne comment d’abord avoir la vérification et seulement ensuite, l’envoi des données ?
Christian

Répondre
Jérémy PASTOURET 17 février 2020 - 13 h 28 min

Bonjour Christian,
Je te remercie pour ton message.
Pour ton problème, l’envoi des données se fait à cet endroit :

$('#submit-form').on('click', function(e) {
e.preventDefault();
var jqxhr = $.ajax(
{
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject()
}).done(function(){
// do something
});
});

Il faut que tu valides le formulaire avant la ligne var jqxhr.
Si le formulaire est bon, tu peux lancer l’instruction var jqxhr…
Partage notre site sur les réseaux sociaux, tu nous aideras à gagner en visibilité et nous pourrons continuer à publier des articles utiles 😉
Jérémy

Répondre
Gilles 14 septembre 2019 - 17 h 06 min

Re bonjour, précédemment, j’avais envoyé un commentaire, mais visiblement il n’est pas parti. Je renouvelle donc ma demande ici.
Ce commentaire demandait, s’il y avait une possibilité de pouvoir d’insérer un morceau de script dans code.gs qui permettrait de trier selon une colonne les réponses ainsi alimentées dans sheet1. Le morceaux de script je l’ai déjà fait mais je souhaiterai si cela était possible de l’insérer, ma question porte sur l’endroit où je dois l’insérer…..
Par avance merci
Gilles

Répondre
Jérémy PASTOURET 26 septembre 2019 - 14 h 16 min

Bonjour,
Au lieu d’écrire un script JS, il serait peut-être intéressant de créer une nouvelle feuille spécifique pour gérer les tris. Cela permet d’éviter des problèmes de conflit entre le script qui alimente la feuille et des fonctions de GoogleSheet. Dans la feuille créée, il suffirait d’appliquer une formule qui récupère l’ensemble des données de la feuille numéro une puis d’ajouter un notion de tri.

Répondre
kande 17 septembre 2019 - 23 h 02 min

Bonjour,
Mon formulaire fonctionne.
J’ai modifié le nom de ma feuille “Sheet1” et j’ai aussi modifié le nom dans le script.
Après cela le code ne marche plus. Comment faire pour renommer la feuille et faire marcher le script?
Merci d’avance.

Répondre
Gilles legrand 19 septembre 2019 - 11 h 39 min

Bonjour, je me permet de répondre.
Il m’est arrivé la même chose, pour remettre sheet1 :
Clic droit sur l’étiquette de l’onglet -> dans le menu qui se déroule choisir Renommer. Le double clic dans l’étiquette fonctionne aussi.
Souhaitant que cela vous aide.
Cordialement
Gilles

Répondre
Jérémy PASTOURET 26 septembre 2019 - 14 h 16 min

Bonjour,
Votre code est-il disponible en ligne ? Afin que je puisse y jeter un oeil.

Répondre
kande 26 septembre 2019 - 14 h 50 min

Bonjour,
Voici un bout du code :

function doGet(e){
return handleResponse(e);
}
// Enter sheet name where data is to be written below
var SHEET_NAME = “Data”;

J’ai renommé “Sheet1” en “Data” dans le code et sur la feuille.
Après cela j’ai testé, mais le code ne marche plus.

Merci.

Répondre
Jérémy PASTOURET 24 octobre 2019 - 12 h 39 min

Bonjour,

Avez-vous essayer de renommer Data en Sheet1 uniquement sur la feuille pour voir si ça marchait de nouveau ?

Si c’est le cas, cela signifie que le code pur n’a pas été mis à jour. Vous devez ré-appliquer les instructions “setup” et déploiement d’application.

Jérémy

Répondre
PHILIPPE 15 novembre 2019 - 20 h 50 min

Bonjour,
J’ai réalisé votre tutoriel mais le problème est que le formulaire n’envoie pas les valeurs, après analyse sur de la console j’ai un warning : “Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://script.google.com/macros/liendel'appli . Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.”
Et les valeurs ne sont pas ajoutées au tableau.
Merci

Répondre
Jérémy PASTOURET 28 novembre 2019 - 16 h 02 min

Bonjour,

c’est étrange car sur l’exemple en ligne, je ne rencontre pas ce problème. Pouvez-vous essayer d’utiliser mon formulaire en ligne pour voir si cela fonctionne ? L’erreur dont vous parlez provient du navigateur qui cherche à vous protéger. Est-il possible d’accéder à votre formulaire en ligne ?

Répondre
Ro 22 janvier 2020 - 22 h 46 min

tu es au top merci

Répondre
Conant 24 février 2020 - 16 h 20 min

Bonjour,
Merci pour votre tuto
il se trouve que j’ai un problème. Le fichier excel et le fichier source ne communique pas.
Comment je peux resoudre se problème (cela ne vient pas des “logs” j’ai verifié?

Merci d’avance

Répondre
Jérémy PASTOURET 24 février 2020 - 17 h 46 min

Bonjour,
est-ce que votre page est disponible sur le web ?
Jérémy.

Répondre
Morad 31 mars 2020 - 14 h 52 min

Bonjour je suis un jeune entrepreneur,

je souhaite savoir s’il y aurait quelqu’un pour m’aider à monter ce genre de formulaire mais plutôt pour des conducteurs :

– heure de depart
– heure d’arrivée
– km depart
– km arrivée
– quantité de carburant
-km au moment du carburant
– numéro du véhicule pris

Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.