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

Мазиков Валентин Формы заявок

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


Как вариант можно самостоятельно разбираться в API Google Sheets и черным ящиком, делать готовое решение, но для тех у кого совсем нет времени, можете воспользоваться моим решением этого вопроса.

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



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

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

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

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

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





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

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



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



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



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

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

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

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

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

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

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

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

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

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>

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

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

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

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

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

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

1
2
3
4
<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.

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

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



001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
$(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.




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

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

1
2
3
4
5
// Сообщение при успешной отправке данных
let successRespond = 'Сообщение успешно отправлено. Посмотрите результат <a target="_blank" href="href="https://docs.google.com/spreadsheets/d/1lcM0jAJMi3pr3N_X-tEN40OQGN8q2RiCLAQeK3hUfww/edit?usp=sharing">тут</a>';
 
// Сообщение при ошибке в отправке данных
let errorRespond = 'Не удалось отправить сообщение. Cвяжитесь с администратором сайта по адресу <a href="mailto:mos.reklama@bk.ru">mos.reklama@bk.ru</a>';

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



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

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

1
var TO_ADDRESS = "test@ya.ru";

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

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

Я дарю тебе бесплатно скрипты, ты меня благодаришь за это

посмотри, может реклама тебе подходит