>Zina: /* Структура форм на Hugo Zina */

2022-06-03T04:24:09Z

Структура форм на Hugo Zina

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

←[[Hugo Zina]]

== Google Form ==

В качестве «бэкенда» для сохранения заявок и отправки на email используем Google Form в Google Workspace Essentials для домена <code>zina.design</code> от имени пользователя <code>hello@zina.design</code>.

Управление DNS <code>zina.design</code> — на Cloudflare.

Почтовый ящик <code>@zina.design</code> — на Zoho Mail.

=== Почтовые ящики на Zoho Mail ===

Обслуживание почты выполняет Zoho Mail (можно [https://www.zoho.com/mail/zohomail-pricing.html Free]).

Для управления почтой созданы два аккаунта (сначала на Zoho Mail, затем на Google Workspace Essentials):

* '''admin@zina.design''' — администратор
* '''hello@zina.design''' — технический адрес, от которого отправляется почта из Google Form

Также в Zoho Mail создана группа «Public Contacts»:

* '''mail@zina.design''' — с алиасами <code>info@zina.design</code>, <code>support@zina.design</code> и участником <code>admin@zina.design</code>

Дальше можно создавать пользователей в Zoho Mail (до 5 пользователей в бесплатном тарифе), добавлять их в группу <code>mail@zina.design</code> и они все будут получать почту от основных контактных имейлов.

Чтобы пользователи могли отвечать от имени имейлов группы, нужно поставить галочку (см. [[Zoho]]):

<code>Admin Console</code> — <code>Groups</code> — <code>Advanced Settings</code> — <code>Email Delivery</code> — 🗹 Allow group members to send emails using the group email address as From address

=== Почтовые адреса в скрипте Google Form ===

В [https://script.google.com/u/0/home/projects/1zUml3VQHeO6fLAE7Cdue3JcLg8a7wA-kppm0MoJdtt70J2fSHBsVoQLc/edit скрипте] (редактировать под владельцем '''hello@zina.design''') указаны адреса:

to: 'mail@zina.design',
replyTo: 'Студія «Зіна дизайн» <mail@zina.design>',

Письмо приходит от обратного адреса:

From: Студія «Зіна дизайн» <hello@zina.design>

{| class="wikitable"
|-
!
! hello@zina.design — Заявки zina.design (19 мая 2022)
! hello@zina.dev
! mail@zina.com.ua - Замовлення з сайту zina.design (13 дек. 2021)
! mail@zina.com.ua - Заявки с сайта zina.design (test) (22 апр. 2020 г.)
|-
| Редактирование формы
|| https://docs.google.com/forms/d/1kKc6-78DdAWIDU4nUf86jTkswok05dhq9SXkqkKFU8o/edit
|| https://docs.google.com/forms/d/10ExIzlM83Vi5dWKBzC7JPBp25KuduP9mZJ6R8x5Xmng/edit
|| https://docs.google.com/forms/d/1JniYpUfLCK2j_beV96xcdGuNiCIjSjEcWrYb5Zin3OU/edit
|| https://docs.google.com/forms/d/1sOi1xlCtFMX3IvWYc9IiJfX4_XrYrrr_ts2lOyM_bXw/edit
|-
| Просмотр формы
|| https://docs.google.com/forms/d/e/1FAIpQLSfkTL-D-I09BfQkm7he8dmuDoulOHCGMNWLYGgO1N2Eitcu4Q/viewform
|| https://docs.google.com/forms/d/e/1FAIpQLSea1lFfrcgGv92pviD_ziUjKsWZkT13wmll2E27mC9ZkHnmBQ/viewform
|| https://docs.google.com/forms/d/e/1FAIpQLScuI13YizSgFb6xttFWZmNbR5mUvi2UMiz64fBkCYCNwjkDlw/viewform
|| https://docs.google.com/forms/d/e/1FAIpQLSfhu4xiiQI9doRGm_jW9IE3rYnN01raexX_65Iv_bvUypF3Qg/viewform
|-
| Таблица с заявками
|| https://docs.google.com/spreadsheets/d/1lOxuscswunLPMQ2FKW5jBAqumg7DFts1SKtSHcHK2IM/edit
|| https://docs.google.com/spreadsheets/d/1vwgUMpNo6mmom9CPHkDQkkjnIZAA0lkc2IlF-00uVI0/edit
|| https://docs.google.com/spreadsheets/d/1TAqKo8sM8Iclq8YN4Ow81pMOxlVpjSecPWt8hclcyNc/edit
|| https://docs.google.com/spreadsheets/d/1-6_Tk6HSGV3mP36S8cW3oyBtJXQeE7QXGf7G1nkvcGU/edit
|-
| form action
|| https://docs.google.com/forms/u/0/d/e/1FAIpQLSfkTL-D-I09BfQkm7he8dmuDoulOHCGMNWLYGgO1N2Eitcu4Q/formResponse
|| https://docs.google.com/forms/u/0/d/e/1FAIpQLSea1lFfrcgGv92pviD_ziUjKsWZkT13wmll2E27mC9ZkHnmBQ/formResponse
|| https://docs.google.com/forms/u/0/d/e/1FAIpQLScuI13YizSgFb6xttFWZmNbR5mUvi2UMiz64fBkCYCNwjkDlw/formResponse
|| https://docs.google.com/forms/u/0/d/e/1FAIpQLSfhu4xiiQI9doRGm_jW9IE3rYnN01raexX_65Iv_bvUypF3Qg/formResponse
|-
| Скрипт Google Apps
|| https://script.google.com/u/0/home/projects/1zUml3VQHeO6fLAE7Cdue3JcLg8a7wA-kppm0MoJdtt70J2fSHBsVoQLc/edit
|| https://script.google.com/home/projects/1Q9bs7cqTADH8q_AFnEMY9i7O0rWYxbHMcBH3ph8F6zxboeTUi648wmbF/edit
|| https://script.google.com/home/projects/1ItkQ2VfcZLNzPjvP0UwsTRioAh3HwnAMTkut9rWPRW2OvP899ssnY6x6/edit
|| https://script.google.com/home/projects/17AYQTELoOCkaDZiMCLos0O7eZVkYxju7dGTcHGOAiseOHrrwGL5hlAal/edit
|}

=== Чтобы скопировать форму для другой почты или другого домена ===

# Расшарить форму новому пользователю
# Принять ее у нового пользователя
# Внутри формы выполнить копирование - при этом будет показано сообщение "Файл і функції Apps Script також буде скопійовано".
# Внутри формы перейти на вкладку "Відповіді" и нажать на иконку Excel — будет создана таблица для приема заявок.
# Внутри формы нажать меню (три точки справа вверху) и выбрать "Редактор сценаріїв".
## Отредактировать контактные email.
## Запустить '''installTriggers''', как указано в инструкции https://github.com/zinadesign/google-forms-email-sender
# Внутри формы перейти к просмотру формы (иконка с глазом), в режиме инспектора найти <code><form action="..."</code>, скопировать ссылку и использовать ее в новой форме на сайте.

Инструкция: [[Форма обратной связи на основе Google Forms]]

== Структура форм на Hugo Zina ==

Шаблон формы:

layouts/partials/form.html

Ссылка на Google Form для <code><nowiki><form action="..."</nowiki></code> берется из <code>config.toml</code>:

formAction = "https://docs.google.com/forms/u/0/d/e/1FAIpQLSfkTL-D-I09BfQkm7he8dmuDoulOHCGMNWLYGgO1N2Eitcu4Q/formResponse"

Сама форма вставляется так:

<source lang="go">
{{- .Scratch.Set "form-id" "form-navbar" -}}
{{- .Scratch.Set "form-description" "Модальная форма в навбаре «Заказать сайт»" -}}
{{- partial "form.html" . -}}
</source>

=== Исправить ===

Функция отправки формы <code>submitForm</code> повторяется в двух скриптах:

* assets/js/morph.js
* assets/js/navbar.js

Связано это с тем, что она работает внутри Vue, он инициализируется отдельно для навбара и для кнопок морфинга.

Переделать, чтобы был только один.

Самый простой способ - отказаться от морфинга и использовать одно модальное окно в навбаре.

Но тогда непонятно, как обрабатывать формы внутри страниц.
<div class="note">
'''Устарело'''

* <code>layouts/partials/forms/modal.html</code> — шаблон-враппер для всех модальных окон с формами. Подключен в конце <code>baseof.html</code>
* <code>static/forms/</code> — здесь лежат наборы полей форм, которые подгружаются javascript'ом внутрь враппера
* <code>layouts/shortcodes/forms/</code> — здесь шорткоды для вставки partials форм внутрь контента страниц

Скрипты и стили:
* <code>assets/js/forms.js</code>
* <code>assets/sass/layout/_forms.scss</code>

У всех форм одинаковый открывающий тэг <code><form ...></code>, он находится здесь:

* <code>layouts/partials/forms/header.html</code>

Можно просмотреть варианты форм на технической странице:

* http://localhost:1313/test/modal-buttons/
</div>

== Модальные окна ==

В шаблоне-враппере <code>modal.html</code> находится основной костяк формы:

<source lang="html">
<div class="modal-main" ...> 
<form class="form-main" ...> 
<div class="modal-main__body"> 
Загрузка... 
</div>
</form>
</div>
</source>

Для форм в модальных окнах нужно редактировать общий шаблон <code>modal.html</code> + отдельные наборы полей в папке <code>static/forms/</code>, а вызывать окна кнопкой, из которой в форму передаются:

{| cellpadding="10" border="1" style="border-collapse:collapse"
|-
| <code>data-title</code> || заголовок формы
|-
| <code>'''data-filename'''</code> || имя файла формы, в котором находятся основные поля формы,<br>без пути и расширения: <code>static/forms/'''price-calculation'''.html</code><br>(единственный обязательный элемент)
|-
| <code>data-submitbuttontext</code> || текст на кнопке сабмита
|-
| <code>data-description</code> || скрытое поле — описание формы (например, ее положение на странице), для маркетингового анализа эффективности
|-
| <code>data-cta</code> || скрытое поле — тип призыва к действию на кнопке, для маркетингового анализа
|}

Пример:

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

== Видимые формы ==

Структура похожа на формы в модальных окнах, но еще проще:

<source lang="html">
<form class="form-main" ...> 

</form>
</source>

Видимые формы хранятся в файлах <code>partials</code> типа <code>layouts/partials/forms/contacts.html</code>

Вставка формы в шаблон:

<source lang="go">
{{ partial "forms/contacts" . }}
</source>

Чтобы вставить форму в текст страниц, создаем файл шорткода типа такого <code>layouts/shortcodes/forms/contacts.html</code> и вставляем в текст страницы так:

<source lang="go">
{{< forms/contacts >}}
</source>

== JavaScript и скрытые поля ==

JavaScript <code>assets/js/forms.js</code> подгружает в шаблон модальной формы статичную часть и во все типы форм формы добавляет геоданные пользователя.

Подключается к страницам сайта в конце основного шаблона <code>layouts/_default/baseof.html</code>.

В JavaScript при первом вызове модального окна на странице один раз срабатывает функция <code>getGeoData</code> — вызов [[Ip | сервиса, который определяет IP]] пользователя и его дополнительные данные:

* страна
* город
* устройство
* операционная система
* браузер

Эти данные комбинируются:

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

и добавляются к форме в виде скрытых полей:

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

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

* [[Почтовые формы]]
* [[Форма обратной связи на основе Google Forms]]
* Старые формы: [[api.zina.com.ua]]/send_form
* [[Zoho]]
* [[Ip]]

[[Категория:Hugo]]

Hugo Zina - Почтовые формы - Історія редагувань

>Zina: /* Структура форм на Hugo Zina */