Форма обратной связи на основе Google Forms

Почтовые формы

Подготовка

Перед созданием почтовой формы нужно знать:

Google Email, от какого будут отправляться письма (под этим пользователем нужно создавать форму).
Видимые поля, которые будет у всех форм сайта (при этом у некоторых форм их может быть меньше — например, у "Заказать обратный звонок" всего два поля - имя и телефон, а у других может быть еще имейл, текст сообщения и т.п.).
Скрытые поля — например, адрес страницы, положение формы на странице и текст Call To Action для маркетингового анализа, геоданные пользователя.

Нужно воспринимать форму, которую мы создаем в Google Forms, как простой набор ячеек, через которые мы принимаем информацию и сохраняем в Google таблице. Поэтому форму создаем в самом простом виде — обычные текстовые поля, с понятными нам названиями (по сути, это будут заголовки столбцов в таблице). В форме на сайте видимые названия полей можно будет изменить как угодно.

Создание и начальная настройка

Для примера сделаем простейшую форму "Заказать обратный звонок" из двух полей:

Ваше имя
Ваш номер телефона

Создание формы в Google Forms

Под аккаунтом Gmail, на который должны приходить заказы, создаем форму: https://docs.google.com/forms/

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

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

Включить встроенные уведомления (самый простой вариант, но не настраиваемый):
на вкладке Ответы → три точки возле иконки таблицы → Получать уведомления о новых ответах по электронной почте.
Уведомления будут приходить со стандартным текстом типа "Вашу форму заполнил один человек" и ссылкой "Просмотреть сводку".
Добавить к форме скрипт отправки уведомлений с настраиваемым шаблоном письма: см. ниже #Уведомление на email из Google Apps Script

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

Можно выбрать новую таблицу (будет создана) или существующую таблицу (в ней будет создан новый лист).

Проверяем форму: нажимаем иконку с глазом вверху, заполняем, отправляем. Проверяем почтовый ящик.

Вставка формы в страницу

Сразу после создания формы можно вставить форму на свою HTML страницу через <iframe> — по кнопке "Отправить" вверху.

Недостаток этого способа — стандартный вид формы, отсутствие адаптивности и наличие предупреждающего текста, который может отпугнуть пользователей.

Собственное оформление Google Form

Для форм старого формата можно использовать сервис: Google Forms HTML Exporter

Создадим в HTML собственную форму и свяжем ее с полями Google Forms.

У нашей формы будет собственное оформление, собственная проверка правильности заполнености полей и собственная страница подтверждения Thank You Page.

<form action="" method="post">

  <h3>Заказать обратный звонок</h3>

  <label for="name">Ваше имя</label>
  <input id="name" type="text" name="" />

  <label for="phone">Ваш номер телефона</label>
  <input id="phone" type="text" name="" />

  <button type="submit">Отправить</button>

</form>

Теперь нужно перенести из Google Forms значения атрибутов form action и input name.

Откройте исходную форму в Google Forms на просмотр и с помощью инспектора найдите в коде соответствующие значения:

Старый формат:

Внесите их в код вашей HTML формы (к значениям нового формата нужно добавлять префикс entry.):

<form action="https://docs.google.com/forms/.../formResponse" method="post">

  <h3>Заказать обратный звонок</h3>

  <label for="name">Ваше имя</label>
  <input id="name" type="text" name="entry.2043338319" />

  <label for="phone">Ваш номер телефона</label>
  <input id="phone" type="text" name="entry.1282723647" />

  <button type="submit">Отправить</button>

</form>

Протестируйте форму — она будет добавлять записи в таблицу.

Собственная Thank You Page

После отправки формы показывается стандартная страница Google Forms.

Добавим в форму перенаправление на нашу собственную страницу thankyou.html.

<script type="text/javascript">
  var submitted=false;
</script>
<iframe 
  name="thankyou"
  id="thankyou"
  style="display:none;"
  onload="if(submitted) { window.location='thankyou.html'; }"
></iframe>

<form 
  method="post" 
  action="https://docs.google.com/forms/.../formResponse" 
  target="thankyou" 
  onsubmit="submitted=true;"
>
  <!-- Ваша форма -->

Оформление стилями Bootstrap

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

На практике лучше подставлять параметры Google формы в готовый код формы с прописанными стилями Bootstrap.

Просто выберите подходящий стиль компоновки формы ниже.

Стандартные стили форм Bootstrap

<div class="container">
  <script type="text/javascript">var submitted=false;</script>
  <iframe name="thankyou" id="thankyou" style="display:none;" onload="if(submitted) {window.location='/thankyou/';}"></iframe>
  <form method="post" action="https://docs.google.com/forms/.../formResponse" target="thankyou" onsubmit="submitted=true;" class="row justify-content-center">
    <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
      <div class="form-group">
        <label for="name" class="col-form-label">Ваше имя</label>
        <input id="name" type="text" name="entry.2043338319" class="form-control" />
      </div>
      <div class="form-group">
        <label for="phone" class="col-form-label">Ваш номер телефона</label>
        <input id="phone" type="text" name="entry.1282723647" class="form-control" />
      </div>
      <button type="submit" class="btn btn-primary">Отправить</button>
    </div>
  </form>
</div>

Горизонтальная группировка полей с помощью flexbox

В Bootstrap есть специальный стиль .form-inline, но не получается легко управлять шириной label.

      <div class="form-group d-sm-flex">
        <label for="name" class="col-form-label" style="min-width: 120px;">Ваше имя</label>
        <input id="name" type="text" name="entry.2043338319" class="form-control" />
      </div>
      <div class="form-group d-sm-flex">
        <label for="phone" class="col-form-label" style="min-width: 120px;">Ваш телефон</label>
        <input id="phone" type="text" name="entry.1282723647" class="form-control" />
      </div>
      <button type="submit" class="btn btn-primary" style="margin-left: 120px;">Отправить</button>

Floating Label

    <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5 text-center">
      <div class="form-group floating-label">
        <input id="name" type="text" name="entry.2043338319" class="form-control form-control-lg" placeholder=" " />
        <label for="name" class="col-form-label">Ваше имя</label>
      </div>
      <div class="form-group floating-label">
        <input id="phone" type="text" name="entry.1282723647" class="form-control form-control-lg" placeholder=" " />
        <label for="phone" class="col-form-label">Ваш номер телефона</label>
      </div>
      <button type="submit" class="btn btn-primary btn-lg mx-auto">Отправить</button>
    </div>

См. также:

Сниппеты Bootstrap#Floating Label
Пример хорошего юзабилити полей: codepen — иллюстрация к статье Smashing Magazine Don’t Use The Placeholder Attribute

Валидация формы

Недостатки стандартной браузерной валидации HTML5

Подробнее смотри developer.mozilla.org — Проверка данных формы.

Встроенную браузерную валидацию HTML 5 не используем по причинам (скриншот справа):

Нет стандартного способа изменить внешний вид используя CSS.
Они зависят от языка браузера, что означает, что у вас может быть страница на одном языке, но сообщение об ошибке отображаться на другом языке.

Используем JavaScript в сочетании с API проверки валидности HTML5.

    <form class="needs-validation" novalidate>

      <div class="form-group">
        <label for="name" class="col-form-label">Ваше имя</label>
        <input id="name" type="text" name="entry.2043338319" class="form-control" required 
          pattern="^[a-zA-Zа-яА-Я]{2,}[a-zA-Zа-яА-Я -]*"/>
        <div class="invalid-feedback">Пожалуйста, введите ваше имя.</div>
      </div>

      <div class="form-group">
        <label for="phone" class="col-form-label">Ваш номер телефона</label>
        <input id="phone" type="text" name="entry.1282723647" class="form-control" required 
          pattern="^(?=\+{0,1}[\d \(\)\-\\\/]{10,18}$)(?=\+{0,1}\d{1,12}).*" />
        <div class="invalid-feedback">Пожалуйста, введите ваш номер телефона.</div>
      </div>

      <div class="form-group">
        <label for="email" class="col-form-label">Ваш e-mail</label>
        <input id="email" type="text" name="entry.1282723647" class="form-control" required 
          pattern="^\S+@\S+\.(?:[a-zA-Z]{2}|com|org|net|gov|biz|info|name)\b" />
        <div class="invalid-feedback">Пожалуйста, введите корректный e-mail.</div>
      </div>

      <div class="form-group">
        <label for="url" class="col-form-label">Адрес вашего сайта</label>
        <input id="url" type="text" name="entry.1282723647" class="form-control" required 
          pattern="^(?:https{0,1}:\/\/)?(?:[\w-]+\.)+[a-z]{2,6}$" />
        <div class="invalid-feedback">Пожалуйста, введите корректный URL вашего сайта.</div>
      </div>

    </form>

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Валидация имени

^[a-zA-Zа-яА-Я]{2,}[a-zA-Zа-яА-Я -]*

Валидация номера телефона

^(?=\+{0,1}[\d \(\)\-\\\/]{10,18}$).*

— не идеально, но по крайней мере при вводе минимального варианта — типа 0503481711 — ограничивает минимальное количество цифр.

Тестирование: https://regex101.com/r/Z3PtlN/2

См. также: count of digits in String using regex

Валидация email

Самый простой вариант:

\S+@\S+\.\S+

Вриант с проверкой окончания email, чтобы он был похож на доменное имя:

\S+@\S+\.(?:[a-zA-Z]{2}|com|org|net|gov|biz|info|name)\b

Тестирование: https://regex101.com/r/7MqqGF/1

См. также:

Валидация URL

^(?:(http|https):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}$

Тестирование: https://regex101.com/r/NNGSdU/2

См. также

JQuery-validation demo | Bootstrap

Защита от спама

Используем Google reCAPTCHA v3.

Уведомление на email из Google Apps Script

Основная версия: https://github.com/zinadesign/google-forms-email-sender

Настроим автоматическую отправку сообщений на email средствами этой же формы.

Создание скрипта

В форме нажмите меню → Редактор скриптов.

Откройте пример «Google Forms Email Sender Demo» и скопируйте код скрипта Код.gs (1).

Создайте HTML файл (File → Create) и вставьте в него шаблон письма Template.html (2).

К скрипту подключите библиотеку Google Forms Email Sender Library 1.1 (3):

Ресурсы → Библиотеки... — в поле Add a library вставить идентификатор библиотеки:

1DJ9hRkrBXGExJBtyx1bka1YmeZrUdGp_YZibT7J2u0DBWJJAH4oeiZ09

Установка триггера

Чтобы скрипт выполнялся автоматически при отправке формы, нужно установить триггер.

Для этого один раз, при первоначальной настройке скрипта, выполните функцию installTrigger.

Редактировать триггеры можно на странице https://script.google.com/home/triggers или через меню Редагувати → Тригери поточного проекту.

Настройки скрипта

Дальше настраиваем параметры скрипта и текст шаблона письма.

Файл `Код.gs`

Здесь правятся основные параметры скрипта:

// Рассылка уведомлений после сабмита формы
function onFormSubmit() {
  var params = {
    to: '', // Основной (видимый) адрес получателя. Можно несколько, через запятую. Если пусто, то будет email, из которого создана форма.
    cc: '', // Видимые копии.
    bcc: '', // Скрытые копии.
    replyTo: '', // Если пусто, то ответ будет на email, из которого создана форма.
    name: '', // Название компании или сайта.
    subject: '{{formTitle}} — Запрос № {{date}}{{quotaNumber}}', // Тема письма. Если пусто, то будет заголовок формы.
    mailTemplate: 'Template.html', // Файл шаблона письма. Если пусто, будет использован стандартный шаблон
    GMT: 'GMT+3', // Часовой пояс.
    dateFormat: 'Md', // Формат даты для {{date}}
  };

В принципе, можно все поля оставить пустыми — письмо с уведомлением все равно придет на email владельца формы и на email пользователя, если он его указал при заполнении формы.

Адреса email для полей to, cc, bcc, replyTo можно писать в двух видах:

'user@domain.com'
'Имя Пользователя «Название Компании» <user@domain.com>'

При этом учитывайте, что каждый дополнительный email адрес — это дополнительное письмо. А в бесплатных аккаунтах Gmail есть квота на отправку email — до 100 писем в день (в платных — 1500 писем в день).

Размер оставшейся суточной квоты отображается в тексте письма владельцу формы — см. <?= remainingDailyQuota ?> в шаблоне Template.html.

Файл `Template.html`

Здесь правится текст письма:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table { background-color: WhiteSmoke; padding: 7px 12px; border: 2px solid Gainsboro; }
      td { padding: 3px; }
    </style>
  </head>
  <body>
    
    <p>Ваш запрос принят.<br>Спасибо за обращение!</p>

    <!-- Данные пользователя -->
    <?!= responsesTable ?>
    
    <p>--
      <br>Студия «Зина дизайн»
      <br>+38 (050) 348-17-11
      <br><a href="https://www.zina.design/">www.zina.design</a>
    </p>
    <p>
      <a href="https://www.zina.design/" title="Студия «Зина дизайн»">
        <img alt="Студия «Зина дизайн»" src="https://www.zina.design/img/zina_logo-plashka-ua.png" width="150" />
      </a>
    </p>

    <!-- Техническая информация -->
    <? if (mailType != 'submitter') { ?>
    <p>
      <em>Форма: <a href="<?= formURL ?>"><?= formTitle ?></a>
      <br>Квота: <?= remainingDailyQuota ?> писем.</em>
    </p>
    <? } ?>

  </body>
</html>

Для тестирования скрипта выполняем функцию onFormSubmit или заполняем и отправляем форму.

См. также

Папка со скриптом (формой) и библиотекой:

https://drive.google.com/drive/folders/1ziQ9i9rjNCV2YZjfwE19DW0ZZXCfgKgX

Другие тестовые скрипты:

https://script.google.com/d/1Nr-y69RF72zN6UXlXk-DuvSjs-MVrowrGURyh-CnYJBwOC8KPDXYcZBM/edit

Статьи и примеры:

Google Forms - Email Notification Script - Send Confirmation Emails to Users - YouTube
Learn to Magically Send Emails from your Google Form Responses
Sending nice emails from Google Forms
- GitHub
How to send HTML email in Google Apps Script | blog.gsmart.in
javascript - Script to Send an Email with Google Form Responses? - Stack Overflow
Send a google form result to an email - Web Applications Stack Exchange
Отправка email с помощью Google Apps Script — Netpeak Blog

Ссылки

Google Forms HTML Exporter — работает со старыми формами
Google Form Customization for Static Websites
Google Forms is brilliant! - Bob Visser - Medium
Customize a Google Form for your website by Ladies Learning Code on CodePen
Google Form Restyler @ googleformrestyler.apixml.net — you can use this script to inject the HTML of the Google Form into your page, rather than using an iframe. Once the HTML is on the page, you can play with the CSS and Javascript as much as you want.
Google Forms Tool Version 2 | SNEAKYSHEEP
http://jsfiddle.net/Ashuu/738GD/
https://stackoverflow.com/questions/6077054/old-google-form-redirect-after-submission/8558731#8558731
Все возможности Google Forms

Создаем форму обратной связи с помощью Google Forms / Хабр

Форма обратной связи на основе Google Forms

Зміст

Подготовка

Создание и начальная настройка

Создание формы в Google Forms

Вставка формы в страницу

Собственное оформление Google Form

Собственная Thank You Page

Оформление стилями Bootstrap

Стандартные стили форм Bootstrap

Горизонтальная группировка полей с помощью flexbox

Floating Label

Валидация формы

Валидация имени

Валидация номера телефона

Валидация email

Валидация URL

См. также

Защита от спама

Уведомление на email из Google Apps Script

Создание скрипта

Установка триггера

Настройки скрипта

Файл `Код.gs`

Файл `Template.html`

См. также

Ссылки

Навігаційне меню

Форма обратной связи на основе Google Forms

Подготовка

Создание и начальная настройка

Создание формы в Google Forms

Вставка формы в страницу

Собственное оформление Google Form

Собственная Thank You Page

Оформление стилями Bootstrap

Стандартные стили форм Bootstrap

Горизонтальная группировка полей с помощью flexbox

Floating Label

Валидация формы

Валидация имени

Валидация номера телефона

Валидация email

Валидация URL

См. также

Защита от спама

Уведомление на email из Google Apps Script

Создание скрипта

Установка триггера

Настройки скрипта

Файл Код.gs

Файл Template.html

См. также

Ссылки

Навігаційне меню

Пошук

Файл `Код.gs`

Файл `Template.html`