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

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

Шаг 1: В Редакторе дизайна в Taptop создайте форму

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

Настройте форму — введите название, при желании измените названия полей.

Сохраните и опубликуйте страницу с созданной формой.

Шаг 2: Подготовьте Google Таблицу, в которую будете получать данные из формы

1. Создайте новую Google Таблицу.
2. В первой строке таблицы запишите названия столбцов:

Первые 4 столбца — Название формы, ID сайта, Дата отправки, ID формы. В них будут передаваться данные о сайте, форме и времени получения заявки.

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

Например, для формы, содержащей поля Имя и Email, таблица будет выглядеть так:

Необязательно, чтобы имена столбцов в таблице соответствовали названиям полей в форме — вы можете использовать любые понятные для вас наименования. Однако порядок полей в форме и в таблице должен быть одинаковым.

Шаг 3: Создайте Google Apps Script

1. Перейдите в Расширения (Extensions) > Apps Script.

2. В редакторе удалите имеющийся код и вставьте следующий код:

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 Таблицы.
• В поле «Формы» отметьте галочкой форму(ы), из которой вы будете получать данные в таблицу.
• Нажмите кнопку «Добавить».

Добавленный вебхук появится в списке:

Шаг 6: Проверьте работу интеграции

Для этого проведите тест передачи данных.

1. Откройте ваш сайт и заполните форму.

2. Откройте таблицу и проверьте, появилась ли в ней новая строка, и корректно ли передались данные.