Получение данных из форм в Google Таблицы
Чтобы получать данные из форм на сайте в Google Таблицы, нужно настроить интеграцию с помощью вебхуков.
Интеграция вебхуков доступна на тарифах Business и Team.
Шаг 1: В Редакторе дизайна в Taptop создайте форму
Вы можете создать форму с любым набором полей, в зависимости от ваших задач — инпутами, чекбоксами, радио, списками выбора. Например, это может быть форма с полями Имя и Email.
Настройте форму — введите название, при желании измените названия полей.
Сохраните и опубликуйте страницу с созданной формой.
Шаг 2: Подготовьте Google Таблицу, в которую будете получать данные из формы
- Создайте новую Google Таблицу.
- В первой строке таблицы запишите названия столбцов:
Первые 4 столбца — Название формы, ID сайта, Дата отправки, ID формы. В них будут передаваться данные о сайте, форме и времени получения заявки.
В следующие столбцы запишите названия полей формы, данные из которых вы будете получать.
Например, для формы, содержащей поля Имя и Email, таблица будет выглядеть так:
Необязательно, чтобы имена столбцов в таблице соответствовали названиям полей в форме — вы можете использовать любые понятные для вас наименования. Однако порядок полей в форме и в таблице должен быть одинаковым.
Шаг 3: Создайте Google Apps Script
- Перейдите в Расширения (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: Разверните веб-приложение
- В меню справа нажмите Начать развертывание (Deploy) > Новое развертывание (New deployment).
2. Выберите тип «Веб-приложение» (Web App).
3. Установите доступ «Все» (Anyone), чтобы разрешить доступ для записи.
4. Разверните приложение и разрешите необходимые доступы.
Нажмите кнопку «Начать развертывание» и далее «Предоставить доступ».
Выберите ваш Google-аккаунт и разрешите доступ к таблице, нажав кнопку Allow.
В открывшемся окне скопируйте URL веб-приложения и нажмите кнопку Готово.
Шаг 5: В настройках проекта в Taptop добавьте вебхук
- Откройте Настройки проекта, перейдите в разделе «Интеграции» — «Вебхуки» и нажмите кнопку «Добавить вебхук».
2. В открывшемся поп-апе:
- Заполните поле «Название вебхука».
- В поле «Ссылка на вебхук» вставьте URL веб-приложения, скопированный из Google Таблицы.
- В поле «Формы» отметьте галочкой форму(ы), из которой вы будете получать данные в таблицу.
- Нажмите кнопку «Добавить».
Добавленный вебхук появится в списке:
Готово! Интеграция подключена. Каждый раз, когда пользователь будет заполнять форму на сайте, в Google Таблице будет добавляться новая строка с данными.
Шаг 6: Проверьте работу интеграции
Для этого проведите тест передачи данных.
- Откройте ваш сайт и заполните форму.
2. Откройте таблицу и проверьте, появилась ли в ней новая строка, и корректно ли передались данные.