Sådan indsendes en HTML-formular til Google Sheets ... uden Google Formularer

Google Forms er en fantastisk service. Let, flot formularer med resultater, der er gemt i Google Sheets. Men hvad nu hvis du ikke ønsker, at din form skal ligne en Google-form? Hvordan kan du oprette din egen HTML-form og registrere svarene i Google Sheets?

Svaret er overraskende vanskeligt. Man skulle tro, at Google Forms ville have en API til at modtage AJAX-anmodninger, men desværre er det ikke tilfældet. Så vi udskiller mellemmanden i Google Forms og sender vores AJAX-anmodninger direkte til Google Sheets.

Opsætning af Google Sheet

Da vi springer over Google Formularer, skal du gå direkte til Google Sheets og oprette et nyt regneark. Det eneste, vi skal gøre til selve regnearket, er at tildele kolonnenavne til hvert formularfelt, vi samler.

Placer navnene på hvert formularfelt i række 1. Ordren er ikke vigtig, men navnet på cellen i regnearket skal svare til navnet på formularindtastningen. Det er store og små bogstaver, så vælg dine navne omhyggeligt!

Konfiguration af Google Script

Nu hvor vi har konfigureret vores Google Sheet med vores formularfelter, er det tid til at skrive det script, der giver os mulighed for at sende vores formulardata til det. Fra det regneark, vi lige har oprettet, skal du gå til menuen "Værktøjer" og vælge "Scripteditor" i rullemenuen.

Dette åbner en ny Google Script, der ser sådan ud:

Slip af med denne ubrukelige funktion. Vi har vores egne til dette job!

Slet den kreativt navngivne funktion, og kopier / indsæt følgende hoveddel:

Ovenstående script konfigurerer dit Google Sheet til at håndtere en GET-anmodning (funktion doGet ()), fortæller regnearket, hvor de modtagne data skal placeres (linjer 21–38) og indstiller den tilladte MIME-type (setMimeType (ContentService.MimeType.JSON) )). Giv det en læsning - Will Patera gjorde et godt stykke arbejde med at forklare manuset med hans kommentarer, så jeg lod dem være derinde. (Den originale kerne findes her.)

Gem scriptet, og giv det et passende navn. Gå derefter til menuen "Kør" og vælg "opsætning."

Du bliver muligvis bedt om at give Google Scripts til at bruge din Google-konto.

Når du har givet din tilladelse, skal du gå til menuen "Publicer" og vælge "Distribuere som webapp."

Derefter får du vist et par muligheder, som du kan tilpasse dit script til.

De sidste to af disse tre indstillinger er ekstremt vigtige at indstille korrekt, eller du kan ikke få adgang til dit script med en AJAX-anmodning. Du skal køre appen som dig selv, og du skal give "Enhver, endda anonym" adgang til appen. Uden disse indstillinger afviser dit script enhver anmodning fra en anden server, ligesom din forms AJAX-anmodning, fordi det ikke er konfigureret til at give mulighed for deling af ressourcer på tværs af oprindelser (CORS).

Når du har konfigureret disse indstillinger, skal du gå videre og klikke på "Distribuere".

Du får præsenteret URL'en til din webapp. Det er her, vi sender vores AJAX-anmodning, så kopier den URL og gem den til senere.

Opbygning af HTML-formularen

Så vi har oprettet et Google Sheet med en kolonne for hvert af vores formularfelter samt et script, der accepterer formulardata i en AJAX-anmodning og skriver dem til regnearket. Det eneste, der er tilbage, er at oprette en HTML-form, så vi kan indsamle nogle oplysninger og fortsætte den i vores Google Sheet!

Det er ikke nødvendigt at gøre noget fint med din form - bare sørg for, at hvert indgangs navn stemmer overens med det navn, du brugte som kolonnenavne i dit regneark. Din form kan se sådan ud, hvis du var bange for styling:

Igen er nøglen at sikre, at navnet på hver input matcher navnet på hver kolonne i dit Google Sheet.

Endelig forbinder vi vores HTML-form med vores Google Script med lidt JavaScript / jQuery. Intet for skør her heller. Vi forhindrer formularen i at indsende normalt og konstruerer i stedet en AJAX-anmodning til URL'en til vores webapp / script, som vi fik tidligere.

Den eneste interessante del er de data, vi sender. Vores script forventer en JSON-datatype, så vi bliver nødt til at konvertere vores formdata til et JSON-objekt. Jeg valgte at gøre dette med scriptet jQuery Serialize Object, som indeholder metoden serializeObject (), og vil konvertere vores form til et JavaScript-objekt. Du kan løse dette problem, uanset hvor du vil - så længe dine data er struktureret som JSON!

Når nogen nu indsender din HTML-form, skal deres svar registreres i dit Google Sheet. Sød!

En Google-form uden Google-form

Det krævede lidt mere arbejde, end det burde have været nødvendigt, men vi gjorde det! Ved at bruge Google Sheets i forbindelse med Google Scripts var vi i stand til at opbygge vores egen Google Form… uden at blive tvunget til at bruge en Google Form. Hvorfor der ikke findes en Google API til at gøre dette, er uden for mig… men det er i det mindste muligt!

Opdater! Hvis du har problemer ...

Tak til Joel Aguero for at løse nogle problemer, som folk bruger denne vejledning. Hans svar er her og gengivet nedenfor.

  1. CORS-problemer
    Hvis du ser en fejl som følgende: "Intet" Access-Control-Allow-Origin "-hoved findes på den anmodede ressource,” dobbeltkontrol, at du opretter en GET-anmodning og ikke en POST-anmodning.
  2. Web-app-URL
    URL-formatet er ikke det samme som i Davids originale eksempel, hvis du har flere Google-konti. Specifikt ser Googles web-app-URL sådan ud:
    https://script.google.com/macros/u/1/s/.../exec
    Du skal fjerne “/ u / 1” for at ramme slutpunktet, hvilket resulterer i følgende:
    https://script.google.com/macros/s/.../exec
  3. Adgang til parametre
    Hvis du kæmper for at få adgang til parametre eller videregive korrekt data, kan du prøve at vedhæfte dem i slutningen af ​​url'en i stedet:
    https://script.google.com/macros/s/.../exec?firstName=Joel
    Hvis du går denne rute, anbefaler jeg at bruge kodeURIC-komponent til at undslippe specialtegn (f.eks: “+” i test+1@example.com).
  4. Anmod om biblioteker
    Jeg brugte Fetch API til at anmode om, fordi React angiveligt sendes med en polyfil som standard. Hvis du ikke bruger React, anbefaler jeg den populære pakkeanmodning eller finder en polyfill, så du kan tilbyde cross-browser support.