Как да изпратите HTML формуляр в Google Таблици ... без Google Форми

Google Forms е страхотна услуга. Лесни, добре изглеждащи форми с резултати, съхранявани в Google Таблици. Но какво ще стане, ако не искате формулярът ви да изглежда като формуляр на Google? Как можете да създадете свой собствен HTML формуляр и да запишете отговорите в Google Таблици?

Отговорът е изненадващо труден. Човек би си помислил, че Google Forms ще има API за получаване на заявки AJAX, но, уви, това не е така. Така че ще изрежем посредника на Google Forms и ще изпратим нашите заявки AJAX директно в Google Sheets.

Настройка на Google Sheet

Тъй като прескачаме Google Forms, се насочете направо към Google Sheets и създайте нова електронна таблица. Единственото, което трябва да направим на самата електронна таблица, е да присвоим имена на колони за всяко поле на формуляр, което ще събираме.

Поставете имената на всяко поле на формуляр в ред 1. Редът не е важен, но името на клетката в електронната таблица трябва да съвпада с името на въвеждането на формуляра. В зависимост от регистъра, затова избирайте внимателно имената си!

Конфигуриране на Google Script

Сега, когато настроихме нашия Google Sheet с нашите формулярни полета, време е да напишем скрипта, който ще ни позволи да изпращаме данните от формулярите си към него. От създадената от нас електронна таблица отидете в менюто „Инструменти“ и изберете „Редактор на скриптове“ от падащото меню.

Това ще отвори нов Google Script, който ще изглежда така:

Отървете се от тази безполезна функция. Ние имаме своя собствена за тази работа!

Изтрийте функцията, наречена творчески, и копирайте / поставете следния списък:

Скриптът по-горе ще конфигурира вашия Google Sheet за обработка на GET заявка (функция doGet ()), казва на електронната таблица къде да поставите получените данни (редове 21–38) и задава разрешения MIME тип (setMimeType (ContentService.MimeType.JSON) )). Прочетете - Уил Патера свърши чудесна работа, обяснявайки сценария с коментарите си, така че ги оставих там. (Оригиналната същност можете да намерите тук.)

Запазете скрипта и му дайте подходящо име. След това отидете в менюто "Изпълнение" и изберете "настройка".

Може да бъдете помолени да дадете Google Scripts да използва вашия акаунт в Google.

След като дадете своето разрешение, отидете в менюто „Публикуване“ и изберете „Разгръщане като уеб приложение“.

След това ще ви бъдат представени няколко опции, с които да персонализирате вашия скрипт.

Последните две от тези три опции са изключително важни за правилното задаване или няма да имате достъп до скрипта си с AJAX заявка. Трябва да изпълните приложението като себе си и трябва да дадете достъп на „всеки, дори анонимен“. Без тези настройки вашият скрипт ще отхвърли всяка заявка от различен сървър, като например заявката на AJAX на вашата форма, тъй като няма да бъде конфигуриран така, че да позволява разделяне на ресурси с различен произход (CORS).

След като конфигурирате тези опции, продължете напред и кликнете върху „Разгръщане“.

Ще бъдете представени с URL адреса на вашето уеб приложение. Тук ще изпратим нашата заявка AJAX, така че копирайте този URL адрес и го запазете за по-късно.

Изграждане на HTML форма

Така че имаме създаден Google Sheet с колона за всяко от формулярните ни полета, както и скрипт, който ще приема данните от формуляра в заявка AJAX и ще го запише в електронната таблица. Остава само да създадем HTML форма, за да можем да събираме малко информация и да я поддържаме в нашия Google Sheet!

Не е необходимо да правите нищо фантастично с формата си - просто се уверете, че името на всеки вход съвпада с името, което сте използвали като имена на колони в електронната си таблица. Формата ви може да изглежда така, ако се страхувате от стайлинг:

Отново, ключът е да се уверите, че името на всеки вход съвпада с името на всяка колона във вашия Google Sheet.

Накрая ще свържем нашия HTML формуляр с нашия Google Script с малко JavaScript / jQuery. Нищо прекалено лудо и тук. Ние пречим на формуляра да се изпраща нормално и вместо това създаваме заявка AJAX към URL адреса за нашето уеб приложение / скрипт, което получихме по-рано.

Единствената интересна част са данните, които изпращаме. Нашият скрипт очаква тип данни от JSON, така че ще трябва да преобразуваме данните си от формуляри в JSON обект. Избрах да направя това със скрипта на jQuery Serialize Object, който предоставя метода serializeObject () и ще преобразува нашата форма в JavaScript обект. Можете да разрешите този проблем, колкото искате - стига вашите данни да бъдат структурирани като JSON!

Сега, когато някой изпрати вашия HTML формуляр, отговорите му трябва да бъдат записани във вашия Google Sheet. Сладка!

Форма без форма на Google

Е, това отне малко повече работа, отколкото трябваше да се наложи, но ние го направихме! Използвайки Google Таблици съвместно с Google Scripts, успяхме да изградим своя собствена Google Form ... без да сме принудени да използваме Google Form. Защо няма API на Google, който да прави това, е извън мен ... но поне е възможно!

Актуализиране! Ако имате проблеми ...

Благодаря на Джоел Агуеро за справяне с някои проблеми, които хората използват това ръководство. Отговорът му е тук и е възпроизведен по-долу.

  1. Проблеми с CORS
    Ако виждате грешка като следното: „Няма заглавие„ Access-Control-Allow-Origin “в заявения ресурс“, проверете два пъти дали правите GET заявка, а не POST заявка.
  2. URL адрес на уеб приложение
    Форматът на URL адреса не е същият като в оригиналния пример на Дейвид, ако имате няколко акаунта в Google. По-конкретно URL адресът на уеб приложението на Google изглежда така:
    https://script.google.com/macros/u/1/s/.../exec
    Трябва да премахнете „/ u / 1“, за да достигнете крайната точка, което води до следното:
    https://script.google.com/macros/s/.../exec
  3. Достъп до параметри
    Ако се мъчите за достъп до параметри или правилно предавате данни, опитайте да ги прикачите в края на URL адреса:
    https://script.google.com/macros/s/.../exec?firstName=Joel
    Ако отидете по този маршрут, препоръчвам да използвате encodeURIComponent, за да избягате от специални символи (например: „+“ в test+1@example.com).
  4. Поискайте библиотеки
    Използвах Fetch API, за да направя заявката, тъй като React уж се доставя с polyfill по подразбиране. Ако не използвате React, препоръчвам популярната заявка за пакети или намирането на полифил, за да можете да предложите поддръжка между браузъри.