Получение данных из форм в Google Таблицы

11min

Чтобы получать данные из форм на сайте в Google Таблицы, нужно настроить интеграцию с помощью вебхуков. 
Интеграция вебхуков доступна на тарифах Hosting Basic и Team Pro.
Шаг 1: В Редакторе дизайна в Taptop создайте форму﻿
Вы можете создать форму с любым набором полей, в зависимости от ваших задач — инпутами, чекбоксами, радио, списками выбора. Например, это может быть форма с полями Имя и Email.
﻿
Настройте форму — введите название, при желании измените названия полей.
﻿
Сохраните и опубликуйте страницу с созданной формой.
﻿
Шаг 2: Подготовьте Google Таблицу, в которую будете получать данные из формы
1) Создайте новую Google Таблицу.
2) В первой строке таблицы запишите названия столбцов:
Первые 4 столбца — Название формы, ID сайта, Дата отправки, ID формы. В них будут передаваться данные о сайте, форме и времени получения заявки. 
Название формы
ID сайта
Дата отправки
ID формы








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












Необязательно, чтобы имена столбцов в таблице соответствовали названиям полей в форме — вы можете использовать любые понятные для вас наименования. Однако порядок полей в форме и в таблице должен быть одинаковым.
Шаг 3: Создайте Google Apps Script
1) Перейдите в Расширения (Extensions) > Apps Script.
﻿
2) В редакторе удалите имеющийся код и вставьте следующий код:
JS
function doPost(e) {
  try {
    const jsonData = JSON.parse(e.postData.contents);
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

    const payload = jsonData.payload;
    
    const formName = payload.name;
    const siteId = payload.site_id;
    const submittedAt = payload.submitted_at;
    const formId = payload.form_id;
    const data = payload.data;

    const newRow = [
      formName,
      siteId,
      submittedAt,
      formId
    ];

    // Добавляем все значения из объекта data
    for (let key in data) {
      newRow.push(data[key]);
    }

    sheet.appendRow(newRow);

    return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({status: 'error', message: error.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
function doPost(e) {
  try {
    const jsonData = JSON.parse(e.postData.contents);
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

    const payload = jsonData.payload;
    
    const formName = payload.name;
    const siteId = payload.site_id;
    const submittedAt = payload.submitted_at;
    const formId = payload.form_id;
    const data = payload.data;

    const newRow = [
      formName,
      siteId,
      submittedAt,
      formId
    ];

    // Добавляем все значения из объекта data
    for (let key in data) {
      newRow.push(data[key]);
    }

    sheet.appendRow(newRow);

    return ContentService.createTextOutput(JSON.stringify({status: 'success'}))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({status: 'error', message: error.message}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
﻿
﻿
Шаг 4: Разверните веб-приложение
1) В меню справа нажмите  Начать развертывание (Deploy) > Новое развертывание (New deployment).
﻿
2) Выберите тип «Веб-приложение» (Web App).
﻿
3) Установите доступ «Все» (Anyone), чтобы разрешить доступ для записи.
﻿
4) Разверните приложение и разрешите необходимые доступы.
Нажмите кнопку «Начать развертывание» и далее «Предоставить доступ».
﻿
Выберите ваш Google-аккаунт и разрешите доступ к таблице, нажав кнопку Allow.
﻿
В открывшемся окне скопируйте URL веб-приложения и нажмите кнопку Готово.
﻿
Шаг 5: В настройках проекта в Taptop добавьте вебхук
1) Откройте Настройки проекта, перейдите в разделе «Интеграции» — «Вебхуки» и нажмите кнопку «Добавить вебхук».
﻿
2) В открывшемся поп-апе:
Заполните поле «Название вебхука».
В поле «Ссылка на вебхук» вставьте URL веб-приложения, скопированный из Google Таблицы. 
В поле «Формы» отметьте галочкой форму(ы), из которой вы будете получать данные в таблицу.
Нажмите кнопку «Добавить».
﻿
Добавленный вебхук появится в списке:
﻿
Готово! Интеграция подключена. Каждый раз, когда пользователь будет заполнять форму на сайте, в Google Таблице будет добавляться новая строка с данными.
Шаг 6: Проверьте работу интеграции 
Для этого проведите тест передачи данных. 
1) Откройте ваш сайт и заполните форму.
﻿
2) Откройте таблицу и проверьте, появилась ли в ней новая строка, и корректно ли передались данные.
﻿
﻿