Hugo Zina - Почтовые формы
В качестве «бэкенда» для сохранения заявок и отправки на email используем Google Form в Google Workspace Essentials для домена zina.design от имени пользователя hello@zina.design.
Управление DNS zina.design — на Cloudflare.
Почтовый ящик @zina.design — на Zoho Mail.
Обслуживание почты выполняет Zoho Mail (можно Free).
Для управления почтой созданы два аккаунта (сначала на Zoho Mail, затем на Google Workspace Essentials):
- admin@zina.design — администратор
- hello@zina.design — технический адрес, от которого отправляется почта из Google Form
Также в Zoho Mail создана группа «Public Contacts»:
- mail@zina.design — с алиасами
info@zina.design,support@zina.designи участникомadmin@zina.design
Дальше можно создавать пользователей в Zoho Mail (до 5 пользователей в бесплатном тарифе), добавлять их в группу mail@zina.design и они все будут получать почту от основных контактных имейлов.
Чтобы пользователи могли отвечать от имени имейлов группы, нужно поставить галочку (см. Zoho):
Admin Console — Groups — Advanced Settings — Email Delivery — 🗹 Allow group members to send emails using the group email address as From address
В скрипте (редактировать под владельцем hello@zina.design) указаны адреса:
to: 'mail@zina.design', replyTo: 'Студія «Зіна дизайн» <mail@zina.design>',
Письмо приходит от обратного адреса:
From: Студія «Зіна дизайн» <hello@zina.design>
- Расшарить форму новому пользователю
- Принять ее у нового пользователя
- Внутри формы выполнить копирование - при этом будет показано сообщение "Файл і функції Apps Script також буде скопійовано".
- Внутри формы перейти на вкладку "Відповіді" и нажать на иконку Excel — будет создана таблица для приема заявок.
- Внутри формы нажать меню (три точки справа вверху) и выбрать "Редактор сценаріїв".
- Отредактировать контактные email.
- Запустить installTriggers, как указано в инструкции https://github.com/zinadesign/google-forms-email-sender
- Внутри формы перейти к просмотру формы (иконка с глазом), в режиме инспектора найти
<form action="...", скопировать ссылку и использовать ее в новой форме на сайте.
Инструкция: Форма обратной связи на основе Google Forms
Шаблон формы:
layouts/partials/form.html
Ссылка на Google Form для <form action="..." берется из config.toml:
formAction = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSfkTL-D-I09BfQkm7he8dmuDoulOHCGMNWLYGgO1N2Eitcu4Q/formResponse"
Сама форма вставляется так:
{{- .Scratch.Set "form-id" "form-navbar" -}}
{{- .Scratch.Set "form-description" "Модальная форма в навбаре «Заказать сайт»" -}}
{{- partial "form.html" . -}}
Функция отправки формы submitForm повторяется в двух скриптах:
- assets/js/morph.js
- assets/js/navbar.js
Связано это с тем, что она работает внутри Vue, он инициализируется отдельно для навбара и для кнопок морфинга.
Переделать, чтобы был только один.
Самый простой способ - отказаться от морфинга и использовать одно модальное окно в навбаре.
Но тогда непонятно, как обрабатывать формы внутри страниц.
Устарело
layouts/partials/forms/modal.html— шаблон-враппер для всех модальных окон с формами. Подключен в концеbaseof.htmlstatic/forms/— здесь лежат наборы полей форм, которые подгружаются javascript'ом внутрь враппераlayouts/shortcodes/forms/— здесь шорткоды для вставки partials форм внутрь контента страниц
Скрипты и стили:
assets/js/forms.jsassets/sass/layout/_forms.scss
У всех форм одинаковый открывающий тэг <form ...>, он находится здесь:
layouts/partials/forms/header.html
Можно просмотреть варианты форм на технической странице:
В шаблоне-враппере modal.html находится основной костяк формы:
<div class="modal-main" ...> <!-- класс 'modal-main' необходим для модальных окон -->
<form class="form-main" ...> <!-- к форме с классом 'form-main' добавляются геоданные -->
<div class="modal-main__body"> <!-- обязательный элемент для модальных окон — -->
Загрузка... <!-- сюда вставляются наборы полей из статичных файлов в папке static/forms/ -->
</div>
</form>
</div>
Для форм в модальных окнах нужно редактировать общий шаблон modal.html + отдельные наборы полей в папке static/forms/, а вызывать окна кнопкой, из которой в форму передаются:
data-title |
заголовок формы |
data-filename |
имя файла формы, в котором находятся основные поля формы, без пути и расширения: static/forms/price-calculation.html(единственный обязательный элемент) |
data-submitbuttontext |
текст на кнопке сабмита |
data-description |
скрытое поле — описание формы (например, ее положение на странице), для маркетингового анализа эффективности |
data-cta |
скрытое поле — тип призыва к действию на кнопке, для маркетингового анализа |
Пример:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mainModal"
data-title="Расчет цены создания сайта"
data-filename="price-calculation"
data-submitbuttontext="ОТПРАВИТЬ ЗАЯВКУ"
data-description="Первый экран главной страницы"
data-cta="Расчет цены">
Расчет цены
</button>
Структура похожа на формы в модальных окнах, но еще проще:
<form class="form-main" ...> <!-- к форме с классом 'form-main' добавляются геоданные -->
<!-- произвольная форма -->
</form>
Видимые формы хранятся в файлах partials типа layouts/partials/forms/contacts.html
Вставка формы в шаблон:
{{ partial "forms/contacts" . }}
Чтобы вставить форму в текст страниц, создаем файл шорткода типа такого layouts/shortcodes/forms/contacts.html и вставляем в текст страницы так:
{{< forms/contacts >}}
JavaScript assets/js/forms.js подгружает в шаблон модальной формы статичную часть и во все типы форм формы добавляет геоданные пользователя.
Подключается к страницам сайта в конце основного шаблона layouts/_default/baseof.html.
В JavaScript при первом вызове модального окна на странице один раз срабатывает функция getGeoData — вызов сервиса, который определяет IP пользователя и его дополнительные данные:
- страна
- город
- устройство
- операционная система
- браузер
Эти данные комбинируются:
const userIP = geodata.ip;
const userCity = geodata.location.city + ', ' + geodata.location.country.name + ' ' + geodata.location.country.flag.emoji;
const userBrowser = geodata.user_agent.name + ' ' + geodata.user_agent.version_major + ', ' + geodata.user_agent.os.name + ' ' + geodata.user_agent.os.version;
const userDevice = geodata.user_agent.device.type + ' — ' + geodata.user_agent.device.name;
и добавляются к форме в виде скрытых полей:
<input type="hidden" name="entry.241855206" class="modal-main__user-ip" value="`+userIP+`">
<input type="hidden" name="entry.309959980" class="modal-main__user-city" value="`+userCity+`">
<input type="hidden" name="entry.2071361263" class="modal-main__user-browser" value="`+userBrowser+`">
<input type="hidden" name="entry.1886797722" class="modal-main__user-device" value="`+userDevice+`">
- Почтовые формы
- Форма обратной связи на основе Google Forms
- Старые формы: api.zina.com.ua/send_form
- Zoho
- Ip