>Zina: /* Собственная Thank You Page */

2022-10-30T20:52:06Z

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

Нова сторінка

* [[Почтовые формы]]

== Подготовка ==

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

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

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

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

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

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

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

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

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

[[Файл:GoogleForms-1.png|500px|мини|без]]

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

# Включить встроенные уведомления (самый простой вариант, но не настраиваемый):<br>на вкладке '''Ответы''' → три точки возле иконки таблицы → '''Получать уведомления о новых ответах по электронной почте'''. <br>Уведомления будут приходить со стандартным текстом типа "Вашу форму заполнил один человек" и ссылкой "Просмотреть сводку".
# Добавить к форме скрипт отправки уведомлений с настраиваемым шаблоном письма: см. ниже [[#Уведомление на email из Google Apps Script]]<br><br>
[[Файл:GoogleForms-2.png|500px|мини|без]]

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

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

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

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

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

[[Файл:GoogleForms-3.png|500px|мини|без]]

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

[[Файл:GoogleForms-4.png|500px|мини|без]]

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

* Для форм старого формата можно использовать сервис: [https://stefano.brilli.me/google-forms-html-exporter/ Google Forms HTML Exporter]

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

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

<source lang="html">
<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>
</source>

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

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

[[Файл:GoogleForms-5.png|772px|мини|без]]

[[Файл:GoogleForms-6-2021.png|обрамить|без]]

<div class="note">
Старый формат:

[[Файл:GoogleForms-6.png|обрамить|без]]
</div>

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

<source lang="html">
<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>
</source>

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

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

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

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

<source lang="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;"
>

</source>

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

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

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

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

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

[[Файл:FormBootstrap-default.png|обрамить|right]]
<source lang="html">
<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>
</source>

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

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

[[Файл:FormBootstrap-horizontal.png|обрамить|right]]
<source lang="html">
<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>
</source>

=== Floating Label ===

[[Файл:FormBootstrap-floating-label.png|обрамить|right]]
<source lang="html">
<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>
</source>

См. также:

* [[Сниппеты Bootstrap#Floating Label]]
* Пример хорошего юзабилити полей: [https://codepen.io/ericwbailey/pen/ea10dcdde2520c561bd588a2e1f50ce8 codepen] — иллюстрация к статье Smashing Magazine [https://www.smashingmagazine.com/2018/06/placeholder-attribute/ Don’t Use The Placeholder Attribute]

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

[[Файл:HTML5-validation-langs.png|мини|справа|Недостатки стандартной браузерной валидации HTML5]]Подробнее смотри developer.mozilla.org — [https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B Проверка данных формы].

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

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

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

<source lang="html">
<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>
</source>

<source lang="javascript">
<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></source>

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

<source lang="bash">
^[a-zA-Zа-яА-Я]{2,}[a-zA-Zа-яА-Я -]*
</source>

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

<source lang="bash">
^(?=\+{0,1}[\d \-\\\/]{10,18}$).*
</source>

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

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

См. также: [https://stackoverflow.com/questions/42684380/java-count-of-digits-in-string-using-regex count of digits in String using regex]

=== Валидация email ===

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

<source lang="bash">
\S+@\S+\.\S+
</source>

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

<source lang="bash">
\S+@\S+\.(?:[a-zA-Z]{2}|com|org|net|gov|biz|info|name)\b
</source>

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

См. также:

* [https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript regex - How to validate an email address in JavaScript - Stack Overflow]
* [https://emailregex.com/index.html Email Address Regular Expression That 99.99% Works.]

=== Валидация URL ===

<source lang="bash">
^(?:(http|https):\/\/)?(?:[\w-]+\.)+[a-z]{2,6}$
</source>

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

=== См. также ===

* [https://jqueryvalidation.org/files/demo/bootstrap/index.html JQuery-validation demo | Bootstrap]

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

Используем [https://developers.google.com/recaptcha/docs/verify?hl=ru Google reCAPTCHA v3].

* [https://artisansweb.net/validate-google-recaptcha-using-javascript/ Validate Google reCAPTCHA using JavaScript - Artisans Web]
* [https://gist.github.com/jiankaiwang/dc5690318bd035232a8ac9294bc2af29 the example to use recaptcha in javascript · GitHub]
* [http://useful-notes.ru/8-ustanovka-nastrojka-google-recaptcha-3 Установка и настройка Google reCAPTCHA 3]
* [http://cccp-blog.com/koding/google-recaptcha-v3 Google reCAPTCHA v3: обзор возможностей и установка на PHP сайт]

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

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

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

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

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

[[Файл:GoogleForms-AppsScript-1.png|500px|мини|без]]

Откройте пример «[https://script.google.com/d/MRqKqCTOZN_znsIYYr6p-xdJ7ZTkmZeIJ/edit?uiv=2&mid=ACjPJvHHzfErAt1UlwUNMoigXNO1HBs5-1Fb3NvrQWZeTqTMgKilLfA5lDuGy5UHrMnkYk4lovM2IX_IMIBcqJiUYwDUbR_z5Zu53OLlx7FXvnjr3OPvSrxmdh5cFEa3onDWTBiEgRNDoAk Google Forms Email Sender Demo]» и скопируйте код скрипта <code>Код.gs</code> (1).

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

[[Файл:GoogleForms-AppsScript-2.png|обрамить|без]]

К скрипту подключите библиотеку [https://script.google.com/d/1DJ9hRkrBXGExJBtyx1bka1YmeZrUdGp_YZibT7J2u0DBWJJAH4oeiZ09/edit?usp=drive_web Google Forms Email Sender Library 1.1] (3):

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

1DJ9hRkrBXGExJBtyx1bka1YmeZrUdGp_YZibT7J2u0DBWJJAH4oeiZ09

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

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

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

[[Файл:GoogleForms-AppsScript-3.png|обрамить|без]]

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

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

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

==== Файл <code>Код.gs</code> ====

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

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

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

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

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

<div class="note"><p>При этом учитывайте, что каждый дополнительный email адрес — это дополнительное письмо. А в бесплатных аккаунтах Gmail есть [https://developers.google.com/apps-script/guides/services/quotas квота на отправку email] — до 100 писем в день (в платных — 1500 писем в день).</p>
<p>Размер оставшейся суточной квоты отображается в тексте письма владельцу формы — см. <code><?= remainingDailyQuota ?></code> в шаблоне <code>Template.html</code>.</p></div>

==== Файл <code>Template.html</code> ====

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

<source lang="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>
</source>

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

=== См. также ===

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

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

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

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

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

* [https://www.youtube.com/watch?time_continue=148&v=H7WFkt6J4rs&feature=emb_title Google Forms - Email Notification Script - Send Confirmation Emails to Users] - YouTube
* [https://medium.com/@max.brawer/learn-to-magically-send-emails-from-your-google-form-responses-8bbdfd3a4d02 Learn to Magically Send Emails from your Google Form Responses]
* [https://blog.roomanna.com/12-09-2018/google-form-emails Sending nice emails from Google Forms]
** [https://gist.github.com/kurrik/30719823b9e28e952b2e3b7835803cfd GitHub]
* [https://blog.gsmart.in/google-apps-script-send-html-email/ How to send HTML email in Google Apps Script] | blog.gsmart.in
* [https://stackoverflow.com/questions/29221567/script-to-send-an-email-with-google-form-responses javascript - Script to Send an Email with Google Form Responses?] - Stack Overflow
* [https://webapps.stackexchange.com/questions/129662/send-a-google-form-result-to-an-email Send a google form result to an email] - Web Applications Stack Exchange
* [https://netpeak.net/ru/blog/otpravka-email-s-pomoshch-yu-google-apps-script/ Отправка email с помощью Google Apps Script] — Netpeak Blog

== Ссылки ==
* [https://stefano.brilli.me/google-forms-html-exporter/ Google Forms HTML Exporter] — работает со старыми формами
* [https://blog.webjeda.com/google-form-customize/ Google Form Customization for Static Websites]
* [https://medium.com/@weldebob/google-forms-is-brilliant-7b04765f1b8c Google Forms is brilliant! - Bob Visser - Medium]
* [https://codepen.io/learningcode/post/customize-a-google-form-for-your-website Customize a Google Form for your website by Ladies Learning Code on CodePen]
* [http://googleformrestyler.apixml.net/ 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.
* [http://sneakysheep.com/google-docs-form-tool-version-2/ Google Forms Tool Version 2 | SNEAKYSHEEP]
* http://jsfiddle.net/Ashuu/738GD/
* https://stackoverflow.com/questions/6077054/old-google-form-redirect-after-submission/8558731#8558731
* [https://netology.ru/blog/google-formy Все возможности Google Forms]

'''[https://habr.com/ru/post/148332/ Создаем форму обратной связи с помощью Google Forms / Хабр]'''

Форма обратной связи на основе Google Forms - Історія редагувань

>Zina: /* Собственная Thank You Page */