Как отправить данные из формы на сайте в Гугл таблицу

Привет, друзья. Сегодня поговорим о том, как отправить данные из формы обратной связи на сайте в Google Sheets. Долго я искал подобное решение в русскоязычном интернете, который бы меня полностью устраивал, но так и не нашел. Говорю как есть, информацию брал отсюда. Если кому-то удобнее читать оригинал - милости прошу. А это вольная адаптация материала на русский язык со своими вставками. Если кто-то знает решение получше, буду рад увидеть ссылку в комментариях. Вот, что получилось у меня. После отправки переходите по ссылке на таблицу и увидите свои данные.

Самостоятельные разбираться в API Google Sheets и делать готовое решение совсем не было времени, так как нужно было быстро решать задачу но, если вам, как и мне, подойдет "черный ящик", которой просто выполняет свою работу, а именно, отправляет данные из формы обратной связи в Гугл таблицу, то давайте разбираться.

При этом под черным ящиком я подразумеваю код, который нужно вставить непосредственно в "Редактор скриптов", который можно открыть в редакторе таблиц, а не код, который будет у нас на сайте.

Но давайте обо все по порядку.

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

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

Первым делом войдите в свой аккаунт Гугл и скопируйте этот файл. Перейдите по ссылке и нажмите "сделать копию".

Копия гугл таблицы

Это позволит сохранить правильный, готовый к работе документ, который в последствии можно будет подправить под свои нужды.

Пример таблицы с отправленными данными из формы

Надеюсь, с этим вы легко справились. Теперь можно поменять названии документа и вместо "Таблица с лидами" дать любое другое имя.

Теперь перейдите во вкладку "Инструменты" и выберите "Редактор скриптов".

Как открыть редактор скриптов в таблицах гугл

Перед вами откроется файл с уже добавленным js-кодом. То самый "черный ящик" о котором я говорил. Если принять некоторые условия, то не вижу особого смысла разбираться во всем этом. В данном случае нас интересует только 8 строка, в которой нужно указать свой email.

Настройка почты в редакторе скриптов

Далее жмем на вкладку "Опубликовать" и выбираем "Развернуть как веб приложение".

Выставляем настройки как на скрине и жмем "Обновить". После этого появится новое окно и жмем "Предоставить разрешение", выбираем свой аккаунт и должно появиться такое предупреждение.

Предоставление доступа приложению

Не пугайтесь. Все в порядке. Так и должно быть. Жмём "дополнительные настройки", а далее кликаем по ссылке "Перейти на страницу "html contact form sendEmail" (небезопасно)"

После этого откроется новое модальное окно, в котором разрешаем доступ.

Если все сделали правильно, то появится модальное окно со ссылкой, ради которой все затевалось. Скопируйте ее себе в текстовый файл, она нам скоро пригодится и нажмите "OK".

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

Следующее условие, которое нужно принять это то, что столбцы должны называться также, как и у вас будет заполнен атрибут name у поля в формы. При этом важен регистр. Например, если вы сделает столбец под название "ФИО", то в форме должно быть такое поле:

<input namе="ФИО" type="text" class="some-input" placeholder="Введите ваше ФИО">

У меня в таблице такие поля:

  • Первое - автоматическое "Дата и время заявки". Можете назвать как угодно.
  • Второе - "Имя".
  • Третье - "Телефон".
  • Четвертое - "Email".
  • Пятое - "Произвольное поле". Создал для примера, чтобы показать, что можно дать любое название. Главное не забывать, что название должно соответствовать параметру атрибута name у поля.
  • Шестое - "Сообщение".

Создаем форму обратной связи на сайте

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

	<form class="g-form" id="g-form-1" method="POST" action="" autocomplete="off">
		<h2 class="g-form__title g-form__title_main">Оставьте заявку прямо сейчас и получите скидку 10%</h2>
		<h2 class="g-form__title g-form__title_respond"></h2>
		<div class="g-form__preloader"></div>
		<div class="g-form__inputs">
			<fieldset class="g-form__input-wrapper">
				<input class="g-form__input g-form__input_name" id="name" name="Имя" placeholder="Введите ваше имя" required>
			</fieldset>

			<fieldset class="g-form__input-wrapper">
				<input class="g-form__input g-form__input_tel" id="tel" name="Телефон" placeholder="Введите ваш телефон">
			</fieldset>

			<fieldset class="g-form__input-wrapper">
				<input id="email" name="Email" type="email" value=""
				required placeholder="Введите ваш email"/>
			</fieldset>

			<fieldset class="g-form__input-wrapper">
				<input id="arbitrary-field" name="Произвольное поле" placeholder="Произвольное поле для теста">
			</fieldset>

			<fieldset class="g-form__input-wrapper">
				<textarea id="message" name="Сообщение" rows="10"
				placeholder="Введите сообщение"></textarea>
			</fieldset>

			<fieldset class="g-form__input-wrapper g-form__input-wrapper_hidden">
				<label for="honeypot">Помогает бороться со спамом. Должно быть пустым!</label>
				<input id="honeypot" type="text" name="honeypot" value="">
			</fieldset>

			<div class="g-form__button-wrapper">
				<button class="g-form__button">Получить скидку</button>
			</div>
		</div>
	</form>

Немного поясню.

Это заголовок, в который будем выводить ответ формы. Успешно ли отправлена она или нет.

<h2 class="g-form__title g-form__title_respond"></h2>

Это прелоадер, которым скрасим время и убережём нервы пользователя во время ожидания отправки письма в случае, если будет небольшая задержка.

<div class="g-form__preloader"></div>

Следующий блок скрытый. Это небольшая приманка для спама. Она была и в оригинальной статье и мне понравилось название "мешочек/горшочек мёда". Решил оставить. Суть в том, что это поле должно оставаться пустым. Если спам-бот заполнить его, то письмо не будет отправлено. Обычный же пользователь его просто не видит.

<fieldset class="g-form__input-wrapper g-form__input-wrapper_hidden">
   <label for="honeypot">Помогает бороться со спамом. Должно быть пустым!</label>
   <input id="honeypot" type="text" name="honeypot" value="">
</fieldset>

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

Скрипт, отправляющий данные формы в Google Sheets

Давайте подключим скрип, который поможет отправить данные формы в Гугл таблицу и подключим jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/g-form/g-form.js"></script>

Не буду расписывать каждую строку. Остановимся ниже лишь на основных моментах скрипта.

$(function() {
	$(".g-form").submit(function (event) {
		event.preventDefault();

		// Ссылка, которую получили на этапе публикации приложения
		let appLink = "https://script.google.com/macros/s/AKfycbx3uFo3Z3UZcwAcJrAng4vvCzDmr2YHGCGWAUkI/exec";

		// Сообщение при успешной отправке данных
		let successRespond = 'Сообщение успешно отправлено. Посмотрите результат <a target="_blank" href="https://docs.google.com/spreadsheets/d/1XcTivCQL4EZJf1x2kB4UwGj5bAi0sfpx1PwtaKgOWHo/edit?usp=sharing">тут</a>';

		// Сообщение при ошибке в отправке данных
		let errorRespond = 'Не удалось отправить сообщение. Cвяжитесь с администратором сайта по адресу <a href="mailto:smart-landing@ya.ru">smart-landing@ya.ru</a>';

		// Id текущей формы
		let form = $('#' + $(this).attr('id'))[0];

		// h2 с ответом формы
		let formRespond = $(this).find('.g-form__title_respond');

		// h2 с заголовком формы
		let formTitle = $(this).find('.g-form__title_main');

		// Блок прелоадера
		let preloader = $(this).find('.g-form__preloader');

		// Кнопка отправки формы
		let submitButton = $(this).find('.g-form__button');


		// FormData
		let fd = new FormData(form);


		$.ajax({

			url: appLink,
			type: "POST",
			data: fd,
			processData: false,
			contentType: false,
			beforeSend: function(){

				if(fd.get('honeypot').length) {
					return false;
				} else {
					fd.delete('honeypot');
				}

  		// Показываем прелоадер
  		preloader.css('opacity', '1');

  		// Делаем неактивной кнопку отправки
  		submitButton.prop('disabled', true);

  		// валидация других полей.

  	},

  }).done(function(res, textStatus, jqXHR) {

  	if(jqXHR.readyState === 4 && jqXHR.status === 200) {

		// Прячем заголовок формы
		formTitle.css({
			'display': 'none'
		});

		// Прячем прелоадер
		preloader.css('opacity', '0');

		// Выводим ответ формы.
		formRespond.html(successRespond).css('color', '#37b599');
		
		// Возвращаем активность кнопке отправки
		submitButton.prop('disabled', false);

	  	// Очищаем поля формы
	  	form.reset();

	  } else {
	  	formTitle.css({
	  		'display': 'none'
	  	});
	  	formRespond.html(errorRespond).css('color', '#c64b4b');
	  	preloader.css('opacity', '0');
	  	setTimeout( () => {
	  		formRespond.css({
	  			'display': 'none'
	  		});
	  		formTitle.css({
	  			'display': 'block'
	  		});

	  		submitButton.prop('disabled', false);
	  	}, 5000);

	  	console.log('Гугл не ответил статусом 200');
	  }
	}).fail(function(res, textStatus, jqXHR) {
		formTitle.css({
			'display': 'none'
		});
		preloader.css('opacity', '0');
		formRespond.html('Не удалось отправить сообщение. Cвяжитесь с администратором сайта другим способом').css('color', '#c64b4b');
		setTimeout( () => {
			formRespond.css({
				'display': 'none'
			});
			formTitle.css({
				'display': 'block'
			});
			submitButton.prop('disabled', false); 
		}, 5000);

		console.log('Не удалось выполнить запрос по указанному в скрипте пути');
	}); 
});
}(jQuery));

Итак, appLink — это ссылка, которую мы получили выше. Помните, я просил вас сохранить ее в текстовый файл, когда мы публиковали скрипт как веб приложение в редакторе скриптов таблиц? Сейчас она нам пригодится. Именно ее передаем в качестве значение для переменной appLink.

let appLink = "https://script.google.com/macros/s/AKfycbx3uFo3Z3UZcwAcJrAng4vvCzDmr2YHGCGWAUkI/exec";

В остальном, вроде бы достаточно подробно прокомментировал код. Вот например:

// Сообщение при успешной отправке данных
let successRespond = 'Сообщение успешно отправлено. Посмотрите результат <a target="_blank" href="https://docs.google.com/spreadsheets/d/1XcTivCQL4EZJf1x2kB4UwGj5bAi0sfpx1PwtaKgOWHo/edit?usp=sharing">тут</a>';

// Сообщение при ошибке в отправке данных
let errorRespond = 'Не удалось отправить сообщение. Cвяжитесь с администратором сайта по адресу <a href="mailto:smart-landing@ya.ru">smart-landing@ya.ru</a>';

Не забудьте подставить туда свой текст. Если будут вопросы по остальной логике скрипта, спрашивайте в комментариях. Постараюсь объяснить.

Дополнительные моменты

Если у вас свой обработчик и вы не хотите получать письма на почту дважды, то закомментируйте эту строку:

var TO_ADDRESS = "test@ya.ru";

В редакторе скриптов Гугл таблиц.

Если нужно еще какие-то пояснения или, более глубокое объяснение, то пишите в комментариях, буем разбираться, и я дополню статью.

Скрипт отправки данных формы в Гугл таблицу

Размер: 0,009 мб

Похожие публикации

19 комментариев

  1. Дмитрий Давыдов

    Здравствуй, Дима. Спасибо за статью, действительно в русскоязычном интернете либо безбожно устарела информация и в консоли выводится ошибка, связанная с CORS, либо они не работают. Твое решение помогло.

    Знаю, что не в тему, но не мог бы ты сделать подобную интеграцию с Трелло и Слак? Заранее спасибо.

  2. Дмитрий Давыдов

    Чую я, что эта статья не просто так тут появилась. Видимо, в следующей версии корзины для лендинга мы получим возможность отправлять данные не только через phpmailer, но и в Google Sheets.

    Я прав? :)

  3. Дмитрий Давыдов

    Кстати, если появится интеграция с Google Sheets, то через IFTTT и Zapier можно будет интегрироваться и со Slack, Trello, Telegram и т.д.

    1. Дмитрий Давыдов

      Дмитрий, идеи внедрить связь с таблицами конечно же есть для всех скриптов, которые делаю. Корзина, колесо фортуны, smartlid и в новых, которые только в планах. Так что, да, вы правы)))

  4. Дмитрий Давыдов

    Отлично! Я поддерживаю эти идеи, потому что на просторах интернета мало скриптов корзины, которые работают только на фронте, без php и т.д. в любых проявлениях.

  5. Дмитрий Давыдов

    А как сделать чтобы поступали контакты, которые не отправили заявку, но заполнили поля формы??

    1. Дмитрий Давыдов

      Андрей, скорее всего надо писать скрипт на js, который активирует нажатие кнопки, после какого-то триггера (промежуток времени, прокручивание страницы и т.д.)

  6. Дмитрий Давыдов

    Дмитрий, здравствуйте! Вы можете реализовать ещё и дополнительно загрузку файлов на Google Drive?

  7. Дмитрий Давыдов

    Добрый день
    статья классная!
    но!
    когда сама создаю таблицу, все отлично работает
    когда заказчик по инструкции - выходит ошибка
    Access to XMLHttpRequest at 'https://script.google.com/a/macros/s/...' from origin 'https://site.kz' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    POST https://script.google.com/a/macros/s/... net::ERR_FAILED

  8. Дмитрий Давыдов

    Ирина, а клиент дал все разрешения на использования скриптов и т.д.?

    1. Дмитрий Давыдов

      А как и где он должен дать? Где то в настройках таблицы?

    2. Дмитрий Давыдов

      Ирина, проще тогда попросить доступ и настроить все, чем объяснять заказчику далёкие для него термины.

  9. Дмитрий Давыдов

    А можно передать в таблицу с формы картинку?

    1. Дмитрий Давыдов

      Владимир, Андрей, я же честно в статье признался, что код не мой и я не разобрался с АПИ и всеми его возможностями. Просто чуть адаптировал чужой труд под свои нужды и поделился этим в блоге. Наверняка можно и в Google диск или в таблицу передать и картинку, но как это сделать - я не вникал. В любом случае это не дело 2х строк, нужно садиться и разбираться в вопросе. Задал вопрос на qna, подписывайтесь, будем следить)

  10. Дмитрий Давыдов

    А как поменять время регистрации.
    Нужно например Московское, а туда записывается -3 часа от Москвы

    1. Дмитрий Давыдов

      В настройках таблицы можно менять

    2. Дмитрий Давыдов

      Ирина, совершенно верно.

  11. Дмитрий Давыдов

    Дмитрий, здравствуйте! У Вас сложилось понимание после совета Александра Иванова?

    1. Дмитрий Давыдов

      Пока только просмотрел, но не вникал. Времени нет сейчас.

Добавить комментарий

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности