Рубрики
Без рубрики

Отправить форму в таблицу Google

В последнее время я создал форму HTML, в которой результаты отправляются в таблицу Google. Я использовал его для анального … Tagged with JavaScript, Google.

В последнее время я создал форму HTML, в которой результаты отправляются в таблицу Google. Я использовал его для аналитических целей, но это полезно даже для отслеживания результатов формы. Попробовав все виды решений и даже поиск за пределами 2 -й страницы в Google, я нашел что -то, что сработало для меня, и я подумал, что стоит поделиться.

Предварительные условия: HTML и базовые знания JavaScript.

Кредит для этого решения идет на Джейми Уилсон Кто создал и загрузил его в GitHub Анкет

Сначала создайте электронную таблицу

  1. Перейти к Google Sheets а также Начните новую таблицу с Пусто шаблон. Отказ от ответственности: не имеет значения, как вы называете файл.
  2. В первом ряду напишите TimeStamp на первом столбце и Эл. адрес На втором столбце.

Создать скрипт приложений Google

  1. Нажмите на Инструменты> Редактор скриптов… который должен открыть новую вкладку.
  2. Назовите скрипт Отправить форму в Google Sheets Или как вы хотите вспомнить, что делает сценарий.
  3. Удалить function myfunction () {} Блок с Code.gs вкладка
  4. Вставьте следующий сценарий на его место и Файл> Сохранить :
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Если вы хотите лучше понять, что делает этот скрипт, ознакомьтесь с Form-script-commented.js Файл в репо для подробного объяснения.

Запустите функцию настройки

  1. Теперь перейдите к Запустить> Fun Function> Начальная сеть запустить эту функцию.
  2. В Требуется авторизация Диалог, нажмите на Обзор разрешения Анкет
  3. Войдите или выберите учетную запись Google, связанную с этим проектом.
  4. Вы должны увидеть диалог с надписью Привет {ваше имя}, отправьте форму в Google Sheets, хочет ...
  5. Затем нажмите Разрешать

Добавить новый триггер проекта

  1. Нажмите на РЕДАКТИРОВАТЬ> Триггеры текущего проекта Анкет
  2. В диалоговом окне щелкнуть Триггеры не установлены. Нажмите здесь, чтобы добавить один сейчас Анкет
  3. В выпадении выберите допост
  4. Установите поля событий на Из электронной таблицы и В форме отправить
  5. Затем нажмите Сохранять

Опубликовать проект как веб -приложение

  1. Нажмите на Опубликовать> развернуть как веб -приложение… Анкет
  2. Установить Версия проекта к Новый и положить начальная версия в поле ввода ниже.
  3. Оставить Выполнить приложение как: установить в Я (your@address.com) Анкет
  4. Для Кто имеет доступ к приложению: Выберите Кто -нибудь, даже анонимный Анкет
  5. Нажмите Развернуть Анкет
  6. Во всплывающем окне скопируйте Текущее веб -приложение URL из диалога.
  7. И нажмите ОК Анкет

ВАЖНЫЙ! Если у вас есть пользовательский домен с Gmail, вы может нужно щелкнуть ОК Обновить страницу, а затем перейти к Опубликовать> развернуть как веб -приложение… Снова, чтобы получить правильный URL -адрес веб -приложения. Это должно выглядеть как -то вроде https://script.google.com/a/yourdomain.com/macros/s/xxxx… Анкет

Введите URL вашего веб -приложения

Откройте файл с именем index.html Анкет В строке 7 заменить С вашим сценарием URL:

Как видите, этот скрипт использует Fetch API , довольно новый механизм на основе обещаний для выполнения веб-запросов. Это делает запрос «сообщения» на URL -адрес вашего сценария и использует FormData передавать наши данные в виде параметров URL.

Добавление дополнительных данных формы

Чтобы забрать дополнительные данные, вам просто нужно создать новые столбцы с названиями, соответствующими именно имя значения из входов вашей формы. Например, если вы хотите добавить входные данные имени и фамилии, вы бы дали им имя ценности как так:

Затем вы можете создать новые заголовки с точным, чувствительным к случаям имя ценности. Просто перейдите в таблицу и добавьте имена в первый ряд, каждый имя в другом столбце.

Связанные полифиллы

Некоторые из этих вещей еще не полностью поддерживаются браузерами или не работают на более старых. Вот несколько вариантов полифилла для лучшей поддержки.

  1. Обещайте многофил
  2. Принесите многофил
  3. FormData Polyfill

Поскольку полифилл FormData опубликован в виде пакета узлов и должен быть скомпилирован для работы с браузерами, хороший вариант для включения их – это использование CDN Browserify под названием Wzrd.in Анкет Этот сервис компилизируется, минифирует и обслуживает последнюю версию этих сценариев для нас.

Вы захотите убедиться, что они загружаются до того, как основной сценарий обрабатывает подчинение формы. например.:

А также… Да, это все. Попробовав несколько различных методов для выполнения этого «простого» действия, это единственное, что сработало для меня – поэтому я надеюсь, что это поможет. Не стесняйтесь поделиться им/сохранять его для будущего использования и не стесняться комментировать, если у вас есть идеи, чтобы улучшить его!

Оригинал: “https://dev.to/omerlahav/submit-a-form-to-a-google-spreadsheet-1bia”

Читайте ещё по теме: