В этой статье мы поговорим о некоторых дополнительных возможностях Форм обратной связи.

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

Если Вы ещё не ознакомились с этим материалом - сделать это можно тут.

Так как мы уже знакомы с принципом работы этого тэга - начнём.

Переходим в редактирование Форм, кликнув на шестерёнку, на которую указывает красная стрелочка на изображении.

На фотокарточках справа мы можем просмотреть блоки, с которыми мы уже научились работать, а именно:

Button
Header
Text Field
Text Area

Познакомимся с остальными блоками, начнём с Checkbox Group, или просто Checkbox.

Checkbox представляет из себя место для отметок, в котором пользователь может выбрать несколько вариантов значений.

Давайте разместим блок внизу Формы, но перед кнопками.
На первом изображении справа можем просмотреть этот блок в дефолтном виде.

Перейдём в его редактирование, кликнув по второй, центральной, кнопке в правом верхнем углу, на который указывает синяя стрелочка на фото.

Заполним поле Label, другими словами, название блока.

Дальше заполним Help, чтобы просмотреть как отображается это поле на сайте. Как только мы приступаем к работе с Help - над графой Required (обязательный) появляется знак вопроса в чёрном круге. Это можно просмотреть на втором фото справа.

Внимание привлекают слова Toggle (переключатель) и Inline (поочерёдно), которые расположены чуть ниже, чем Help.
За что они отвечают?

Сохраним, и перейдём на сайт.

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

Теперь просмотрим как выглядит наш блок, без использования кнопок Toggle и Inline.

Значения для выбора расположены в столбик, так же обратим внимание на место для отметок. Оно представляет из себя квадратик, в который можно поставить синюю галочку.

Теперь, в админ-панели, поставим отметки возле Toggle и Inline.

Сохранив изменения и перейдя на сайт - можем наблюдать (показано на третьем изображении), что значения для выбора теперь расположены поочерёдно, в строку. Так же изменился внешний вид переключателя.

Перейдём обратно в панель администрирования и продолжим заполнение нашего блока.

Заполнять поле Name (название) нужно только латинскими буквами!

Когда Name задано - перейдём к полю Options.

На изображении справа показан дефолтный вид этого поля. Оно обведено красным прямоугольником на картинке справа.

Давайте рассмотрим все возможности этой графы более детально.

Синей и зелёной линией, на изображении справа, подчёркнуто название варианта выбора на сайте и название, которое придёт на почту соответственно.

Важно!

Для отображения на почте второе значение(которое подчёркнуто зелёным) - должно обязательно
быть прописано латинскими буквами!

Красная стрелочка показывает на квадраты, в которых можно поставить галочку. Графы, отмеченные галочкой - будут отмечены на сайте по дефолту.

Так же графы можно добавлять, кликнув по кнопке, которая обведена фиолетовым прямоугольником на фото, Add Option.

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

Для более точного понимания обилия информации - сохраним это, и перейдём на сайт.

Благодаря проделанным выше действиям - получаем такой блок, как на изображении справа.

Если сравним фото справа и картинку выше - замечаем, что есть 3 значения для выбора: Концептуальная, Туристическая и Пейзажная фотографии. Так же видим, что на обоих изображениях - последнее значение не выбрано по дефолту. 

Data Field является простым в использовании блоком, который нужен для указания пользователем даты.

На картинке справа можно увидеть дефолтный его вид.

Перейдём к редактированию, кликнув по центральной кнопке карандаша в правом верхнем углу.

Заполняем уже знакомое поле Label; Required (обязательный), Help (Помощь) и Placeholder (Заполнитель) - заполняем по желанию.

Поле Class не трогаем.

Name обязательно заполнять латинскими буквами.

Блок готов к использованию.

Сохраним и перейдём на сайт.

Этот блок максимально удобен в использовании.

Пользователь может прописать дату числами, либо кликнув по значку календаря в конце строки - открыть такой календарик, как на фото справа.
Здесь, кликнув на место, на которое указывает красная стрелочка - можно развернуть выбор лет, месяцев, и, потом уже чисел.

Дальше рассмотрим блок Hidden Input. 

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

Переходим в редактирование, кликнув по кнопке карандаша.

Поле Name заполняется латинскими буквами.
В поле Value (Значение) можно писать на любом удобном языке.

Если мы сохраним изменения, перейдём на сайт, заполним Форму и отправим её - на почту нам придёт уведомление.

Здесь, внизу, в "Другое:" нам пришло Name - Forms и Value - Магазин картин; свяжитесь с нами.

Этот блок удобно использовать для аналитики. Расположив Формы на разных страницах - можно отслеживать на какой из них пользователям удобнее использовать Формы.

Так же, если администратор использует несколько сайтов - эту функцию так же можно применить для их идентификации.

Блок Number используется при надобности получить именно числовые значения в ответе пользователя.

Расположим наш блок и приступим к его редактированию, кликнув по значку карандаша в правом верхнем углу, на который указывает синяя стрелочка на первом изображении справа.

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

Поле Class не трогаем.

Name заполняем латинскими буквами.

Поскролив ниже - видим, поля: Value, Min, Max, Step.

Первое из них подчёркнуто красным на изображении. Оно отображает дефолтную оценку, которая будет находиться в этом поле.

Во втором - мы указываем минимальное значение, которое может выбрать пользователь.

В третьем - указываем максимальное.

В поле Step (Шаг) мы решаем с каким шагом можно указывать значения.

Например: 
1. При шаге 1 - пользователь сможет указать любой целый показатель: 1, 2, 3, ... .
2. При шаге 0,5 - он сможет указать значения 1, 1.5, 2, 2.5, ... .
3. При шаге 10 - это будет 10, 20, 30, ... .

Дальше рассмотрим блок Radio Group.

По своему заполнению он очень сильно похож на Checkbox.

Отличие между ними лишь в том, что в Radio Group пользователь может выбрать лишь один вариант значения.

Если Вы поняли принцип работы Checkbox - разобраться с этим блоком - не составит труда.

Перейдём в редактирование.

Здесь мы попросим пользователя указать его возраст, к примеру.

Блок для заполнения будет не обязательным, так как галочка в поле Required не поставлена.

В Label прописываем наш текст. 
Help прописываем по желанию.
Class не трогаем.
Name, значение, которое придёт нам на почту - указываем латинскими буквами.

Остановимся на поле Inline.

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

Теперь давайте поставим галочку в поле Inline.

После подтверждения выбора (ОК внизу окна Формы) и сохранения изменений на странице - переходим на сайт.

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

Вид показа мы настроили. 

Приступим к настройке значений.

Как мы помним из инструкции по блоку Checkbox - графа, подчёркнутая синим - отобразится на сайте, а та, что зелёным - придёт на почту.

Вторую, отмеченную зелёным (<18), нужно заполнять латинскими буквами.

Кнопка, благодаря которой можно добавить новые графы - выделена фиолетовым прямоугольником, а на значок, который удалит графу, указывает жёлтая стрелочка.

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

Блок Select практически идентичен блоку Radio Group, отличаются они лишь отображением на сайте. Теперь вариант ответа мы будем выбирать в выпадающем списке.

Заполняется блок точно так же. 
Перейдём в редактирование, кликнув по кнопке, на которую указывает стрелочка на первом фото справа.

Сделаем блок обязательным для заполнения, поставив галочку возле Required, показано на втором изображении.
Можем наблюдать что возле названия блока, в самом верху второй картинки, появилась красная звёздочка. Это своеобразная идентификация обязательных для заполнения полей.

Заполняем поле Label.

Help и Placeholder заполняем по желанию.

Поле Class не трогаем.

Name обязательно заполнять латинскими буквами.

Пролистнув вниз, видим поле Options.

Графа, подчёркнутая синим (Не выбрано) - отобразится на сайте, значение, показанное зелёным (-) - придёт на почту.

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

Кнопка, благодаря которой можно добавить новые графы - выделена фиолетовым прямоугольником, а на значок, который удалит графу, указывает жёлтая стрелочка.

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

Справа мы видим 4 изображения: на первых двух показана чистая форма, которую будет видеть посетитель; на следующих - заполненная произвольными данными форма.

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

Если их не заполнить - система не отправит форму, и выдаст сообщение ошибки.

Помимо почты, сообщение так же придёт в раздел CRM / Аналитика > Обратная связь, но только в том случае, если аккаунт зарегистрирован на ту же почту, которая указывалась в Форме.

Здесь, красной линией показано имя пользователя;
Синей - его email;
Желтой и зелёной - тема и содержимое сообщения, соответственно.
Фиолетовым прямоугольном показана другая информация, для которой не использовались ключевые слова. 

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

Важно!

В этой инструкции описаны все используемые поля.

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