Jak odeslat formulář HTML do Tabulek Google… bez formulářů Google

Google Forms je skvělá služba. Snadné a dobře vypadající formuláře s výsledky uloženými v Tabulkách Google. Co když ale nechcete, aby váš formulář vypadal jako Google Form? Jak si můžete vytvořit svůj vlastní formulář HTML a zaznamenat odpovědi do Tabulek Google?

Odpověď je překvapivě složitá. Člověk by si myslel, že Google Forms bude mít API pro příjem požadavků AJAX, ale bohužel to tak není. Vystřihneme tedy prostředníka Google Forms a odešlete naše žádosti AJAX přímo do Tabulek Google.

Nastavení listu Google

Protože přeskočíme formuláře Google, vydejte se přímo do Tabulek Google a vytvořte novou tabulku. Jedinou věcí, kterou musíme udělat pro samotnou tabulku, je přiřazení názvů sloupců pro každé pole formuláře, které shromažďujeme.

Vložte názvy každého pole formuláře do řádku 1. Pořadí není důležité, ale název buňky v tabulce se musí shodovat s názvem vstupního formuláře. Je to citlivé na velikost písmen, proto si pečlivě vybírejte svá jména!

Konfigurace skriptu Google

Nyní, když jsme vytvořili náš list Google pomocí našich polí formuláře, je na čase napsat skript, který nám umožní zaslat naše údaje formuláře. Z tabulky, kterou jsme právě vytvořili, přejděte do nabídky „Nástroje“ a v rozbalovací nabídce vyberte „Editor skriptů“.

Otevře se nový skript Google, který bude vypadat asi takto:

Zbavte se této zbytečné funkce. Máme tu vlastní práci!

Vymažte tuto kreativně pojmenovanou funkci a zkopírujte / vložte následující klíč:

Skript výše nakonfiguruje váš list Google tak, aby vyřizoval požadavek GET (funkce doGet ()), sdělil tabulce, kam umístit přijatá data (řádky 21–38), a nastaví povolený typ MIME (setMimeType (ContentService.MimeType.JSON) )). Přečtěte si to - Will Patera odvedl skvělou práci a vysvětlil skript svými komentáři, takže jsem je tam nechal. (Původní podstatu najdete zde.)

Skript uložte a přiřaďte mu odpovídající název. Poté přejděte do nabídky „Spustit“ a vyberte „Nastavení“.

Možná budete požádáni o poskytnutí skriptů Google k používání vašeho účtu Google.

Jakmile udělíte oprávnění, přejděte do nabídky Publikovat a vyberte možnost Nasadit jako webovou aplikaci.

Poté vám bude nabídnuto několik možností, jak přizpůsobit skript.

Poslední dvě z těchto tří možností jsou nesmírně důležité správně nastavit, jinak nebudete mít přístup ke skriptu pomocí žádosti AJAX. Aplikaci musíte spustit jako vy a musíte do aplikace udělit přístup „kdokoli, dokonce anonymní“. Bez těchto nastavení váš skript odmítne jakoukoli žádost z jiného serveru, například požadavek AJAX ve vašem formuláři, protože nebude nakonfigurován tak, aby umožňoval sdílení zdrojů křížového původu (CORS).

Jakmile tyto možnosti nakonfigurujete, pokračujte a klikněte na „Nasadit“.

Zobrazí se vám adresa URL vaší webové aplikace. Zde pošleme náš požadavek AJAX, takže zkopírujte tuto adresu URL a uložte ji pro pozdější použití.

Vytváření formuláře HTML

Máme tedy Google Sheet nastavený se sloupcem pro každé z našich polí formuláře, stejně jako skript, který přijímá data formuláře v žádosti AJAX a zapisuje je do tabulky. Zbývá už jen vytvořit formulář HTML, abychom mohli shromažďovat některé informace a setrvat v našem listu Google!

S formulářem nemusíte dělat nic efektního - stačí se ujistit, že název každého vstupu odpovídá názvu, který jste použili jako název sloupce v tabulce. Vaše forma by mohla vypadat něco podobného, ​​kdybyste se obávali stylingu:

Klíčem je opět zajistit, aby se název každého vstupu shodoval s názvem každého sloupce v listu Google.

Nakonec propojíme náš HTML formulář s naším Google Script s trochou JavaScriptu / jQuery. Ani tady není nic moc šíleného. Zabraňujeme normálnímu odesílání formuláře a místo toho vytváříme požadavek AJAX na adresu URL pro naši webovou aplikaci / skript, kterou jsme získali dříve.

Jedinou zajímavou částí jsou data, která posíláme. Náš skript očekává datový typ JSON, takže musíme převést data z formuláře do objektu JSON. Rozhodl jsem se to provést skriptem jQuery Serialize Object, který poskytuje metodu serializeObject () a převede náš formulář na objekt JavaScript. Tento problém můžete vyřešit, jak byste chtěli - pokud jsou vaše data strukturována jako JSON!

Když někdo odešle váš formulář HTML, měly by být jeho odpovědi zaznamenány do vašeho listu Google. Sladký!

Formulář Google bez formuláře Google

Trvalo to trochu víc práce, než by bylo nutné, ale my jsme to udělali! Pomocí Tabulek Google ve spojení se skripty Google jsme dokázali vytvořit vlastní formulář Google ... aniž bychom byli nuceni používat formulář Google. Proč neexistuje rozhraní Google API, které by to bylo nado mnou ... ale je to alespoň možné!

Aktualizace! Pokud máte problémy ...

Děkujeme Joel Aguero za řešení některých problémů, které lidé mají pomocí této příručky. Jeho odpověď je zde a reprodukována níže.

  1. Problémy CORS
    Pokud se zobrazuje chyba, jako je například následující: „Požadovaný zdroj neobsahuje záhlaví„ Neexistuje záhlaví „Řízení přístupu - Povolit-Původ“, znovu zkontrolujte, zda zadáváte požadavek GET, nikoli požadavek POST.
  2. URL webové aplikace
    Formát adresy URL není stejný jako v Davidově původním příkladu, pokud máte více účtů Google. Konkrétně URL webové aplikace Google vypadá takto:
    https://script.google.com/macros/u/1/s/…/exec
    Chcete-li zasáhnout koncový bod, musíte odstranit “/ u / 1”, což má za následek:
    https://script.google.com/macros/s/…/exec
  3. Přístup k parametrům
    Pokud se snažíte získat přístup k parametrům nebo správně předat data, zkuste je místo toho připojit na konec adresy URL:
    https://script.google.com/macros/s/…/exec?firstName=Joel
    Pokud se vydáte touto cestou, doporučujeme vám použít escape kódování, abyste unikli zvláštním znakům (např .: „+“ v test+1@example.com).
  4. Vyžádejte si knihovny
    K vytvoření požadavku jsem použil API Fetch API, protože React je ve výchozím nastavení dodáván s polyfillem. Pokud nepoužíváte React, doporučuji populární žádost o balíček nebo nalezení polyfill, abyste mohli nabídnout podporu pro více prohlížečů.