Формы обратной связи. Базовое заполнение

Back

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

 

 

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

Давайте рассмотрим их применение на странице Свяжитесь с нами, в табе навигации Контент страницы.
Для неё используется модуль Универсальный редактор.

Здесь мы добавляем секцию с контентом, вид контента тэг. Тэг - Формы.

 

 

 

Чтобы понять принцип работы с Формами - необходимо абстрагироваться
от работы в панели администрирования и сконцентрироваться на нашей таблице.

 

 

 

Перед нами открывается окно, как на изображении справа.

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

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

Так, на картинке справа, показано синей стрелочкой один из этих блоков в движении.


 

 

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

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


 

 

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

Видим четыре поля.
В первом нужно указать личный (корпоративный) Email, на который будут поступать письма. Можно указывать несколько адресов почты через запятую. 

Редирект, второе поле, заполняется по желанию. Сюда можно вставить ссылку, на которую пользователь будет переходить при удачном отправлении письма. Например, URL Главной страницы.

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

Начнём знакомство с блока Header.

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

Над названием есть три кнопки: первая - удалит этот блок из центральной области таблицы; третья - создаст идентичный блок, точно под этим.

Основная работа с Формами - работа в редактировании каждого блока. Для перехода в него - нужно нажать на вторую, центральную кнопку.


 

 

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

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

Поле Type (Тип) - отображает размер шрифта, где h1 - является самым большим.
Поле Class (Класс) - трогать не нужно, оно уже автоматически настроено.

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

На втором изображении справа - можем увидеть отображение этого текста на странице сайта.

Text Field

Вверху, в центральной области, видим часть нашего первого блока Header.

Перетащим под него следующий, Text Field.

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

Это поле рассчитано на введение короткого текста. Например, ФИО, номер телефона и т.д.

Кликаем по второй кнопке в правом верхнем углу (со значком карандаша), и переходим в редактирование.

 

 

 

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

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

Во втором поле, Help (Помощь), - можно вводить подсказки для пользователя.

Третье - Placeholder (Заполнитель), отображает подсказку, прописанную в самом поле, на сайте. Она полупрозрачная и пропадает, когда пользователь начинает заполнять поле, её не нужно стирать.
В нашем примере Label = Placeholder.

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

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

Отойдём немного от блока Text Field и поговорим о ключевых словах и этом поле.

Ключевые слова

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

По приходу письма на почту - в нём есть несколько ключевых слов, для ввода в поле Name. 
Выглядит это так:

Данные: 
Имя 'name' :
Почта 'email' :
Тема 'subject' :
Сообщение 'message' :

Другое:

Слова, выделенные выше жирным курсивом являются ключевыми.
При введении одного из них, name, к примеру, в поле Имя - информация отобразится 

Данные: 
Имя 'name' : Вот тут .

Если посмотрим на изображение справа - ниже увидим слово "Другое:" . Под ним будут находиться все не ключевые названия. На данном фото это дефолтные подписи поля Name (text-1622742131754).

Вернёмся к блоку Text Field, продолжим его заполнение.

 

 

 

Поле Value (Значение) очень похоже на поле Placeholder.
Оно так же нужно для подсказки. Отличие состоит только в том, что текст, прописанный в поле, не пропадёт, его пользователю придется стирать самостоятельно.

В поле Type есть несколько значений:
Text Field (Текстовое поле) - позволит прописать не большое количество символов (его мы сейчас и выбираем);
Password (Пароль) - каждый введённый символ отображается звёздочкой (использовать можно для промо-кодов на скидку, к примеру);
Email - используется для идентификации еmail;
Tel (Телефон) - используется для запроса на введение номера телефона.

В поле Max - можно ввести ограничение на количество введённых символов.

 

 

 

Аналогичным образом создаём ещё три поля.

В блоке email мы использовали:
Name: email
Type: email

В блоке Тема мы использовали:
Name: subject
Type: Text Field

В блоке Номер телефона мы использовали:
Name: phone number (не ключевое словосочетание)
Type: Tel

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

Text Area

Дальше нам нужно место для самого отзыва/вопроса/предложения. Площадь, где пользователь может полноценно выразить свою мысль.

В этом нам поможет блок Text Area. Перетаскиваем его в центр, и переходим к редактированию.

Вводим текст, в уже знакомое поле Label, делаем поле обязательным для ввода.

В поле Name вводим ключевое слово message.
Тип должен быть выбран Text Area.

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

 

 

 

 

Блоки так же можно сортировать внутри центральной зоны, зажав их левой кнопкой мыши и просто переместив.

На изображении справа, показан блок Номер телефона в процессе перемещения.

Button

 

Дальше создадим кнопки. Их у нас будет две:

Отправить и Очистить всё.

Перетаскиваем Button в центр. Кликаем по значку редактирования.

 

 

 

 

Первая кнопка будет Отправить.
В поле Label вводим обозначающее слово, которое будет прописано на самой кнопке.

В поле Type есть 3 варианта действий кнопок:
Button - используется для сложных решений с помощью вставок кода;
Submit - отправляет заполненную форму на указанную почту;
Reset - очищает все заполненные поля.

Для отправки - используем второй вариант, Submit.

Ниже можно выбрать цвет для кнопок типа Button и Reset.
Для кнопки типа Submit используется цвет темы.

Поле Name заполняем понятным для себя текстом. Остальные поля заполняем по желанию, кроме Class.

 

 

 

 

Вторую кнопку добавляем абсолютно аналогичным образом.

В поле Type - указываем Reset, выбираем красный, к примеру, цвет кнопки.

Не забываем о заполнении поля Name.

Кликаем по кнопке ОК в самом низу формы, и сохраняем изменения на странице.

 

 

 

Перейдём на сайт и просмотрим, как выглядит Форма обратной связи.

Вверху видим наше поле Header, прописанный текст.

Дальше идут наши поля для заполнения.

Внизу находятся две кнопки: Отправить (дефолтного цвета), и Очистить всё (красная).

Давайте заполним Форму, и просмотрим, в каком виде информация придёт на почту.

 

 

 

 

После клика по кнопке Отправить - видим сообщение успеха, в самом низу, обведено красным прямоугольником на изображении справа.

 

 

 

Перейдя на почту и открыв сообщение - можем прочесть всё, что нам нужно.

В красном прямоугольнике, на изображении справа видим наши ключевые слова с корректно расположенными данными: Имя, Почта, Тема.

В синем прямоугольнике наблюдаем полное сообщение.

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

 

 

Поздравляем с освоением базового заполнения Форм обратной связи.

О других возможностях этого тэга можно узнать тут.

-->