Компонент Chronoforms предоставляет возможность создавать формы обратной связи в двух основных режимах — «простом» (easy) и «расширенном» (extended). Эти два режима существенно отличаются друг от друга. Расширенный режим предлагает больше возможностей по настройке элементов формы, что дает возможность получить в результате, практически любую форму, которая может оперировать с таблицами базы данных сайта или осуществлять сложные расчеты, но и его использование — процесс довольно сложный. С другой стороны, для создания типовой формы обратной связи не требуется такого большого количества настроек и функций, и будет вполне достаточно использоватьeasy-режим.

Для того чтобы создать форму обратной связи этом режиме, нужно в менеджере форм панели управления компонентом нажать кнопку «Создать» (New), затем выбрать в списке пункт «Простая форма» (Easy form), после чего открывается редактор.

Режим создания простой формы в Chronoforms6. Основные настройки формы

Рис. 1

Редактор форм в данном режиме включает всего 3 вкладки:

  1. «Основные настройки» (General) — глобальные настройки формы
  2. «Дизайнер» (Designer) — вкладка, где осуществляется разметка формы (добаление полей, изменение их свойств)
  3. «Установка» (Setup) — секция обработчиков событий формы.

Основные установки для данного режима заключаются в следующем:

  1. Ввод имени формы в поле «Заголовок» (Title). Данное поле используется для создания алиаса, который в последствие будет служить идентификатором формы, необходимым для ее вывода на страницах сайта. Поэтому в данном случае это поле нужно заполнить на латинице без использования пробельных или спецсимволов.
  2. «Описание» (Description) — необязательное поле для текстового описания. Здесь можно делать любые пометки на любом языке.
  3. «Режим дизайнера» (Designer mode) — в данном случае, по умолчанию, будет установлен в положении «Простой» (Easy mode).

Далее идут кнопки управления редактором (доступны при использовании любого режима):

  1. «Сохринить» (Save) — сохранение текущего состояние формы и закрытие редактора
  2. «Применить» (Apply) — применение текущих изменений без закрытия редактора (результаты изменений уже доступны в режиме предпросмотра или на сайте, если форма подключена)
  3. «Закрыть» (Cansel) — закрытие редактора без сохранения изменений
  4. «Предпросмотр» (Preview) — режим просмотра и тестирования формы (в т. ч. без ее подключения на сайте). Данная кнопка становится активной только в том случае, если заполнены все обязательные поля вкладки основных настроек редактора (п. 1, см. рис. 1).

После заполнения всех обязательных полей во вкладке основных настроек нужно перейти на следующую, вкладку «Дизайнер» (Designer):

Chronoforms6. Вкладка дизайнера формы

Рис. 2

Здесь расположены всего четыре элемента:

  1. Набор элементов для создания форм, которые можно добавлять в текущий проект (п.1, см. рис. 2). Каждый из элементов имеет свои свойства визуализации, события и функции. Так же имеются элементы-контейнеры, называемые «Областями» (Areas), которые могут включать в себя сразу несколько полей любого другого типа, которые располагаются в таком контейнере в одну строку горизонтально, насколько хватает ширины контейнера. Примером таких контейнеров для группировки элементов для easy-режима является элемент «Multi field area».
  2. Название секции. По умолчанию в данном режиме генерируется только одна секция. Имена секций присваиваются автоматически и не подлежат правке.
  3. Тело секции. Светло-зеленая область справа (п. 3, см. рис. 2), куда с помощью мыши перемещаются элементы из набора (п.2, см. рис. 2).
  4. Вкладка предпросмотра текущего проекта формы. Здесь можно посмотреть, как выглядит форма в текущем состоянии. Для предпросмотра сохранение проекта или отдельных блоков не обязательно.

Добавим в область секции «one» такие элементы:

  1. одно текстовое поле Text field для имени отправителя сообщения
  2. одно текстовое поле Text field для e-mail
  3. одно многострочное текстовое поле Textarea для сообщения
  4. один контейнер Multi field area для кнопок
  5. две кнопки Button для отправки и очистки формы

Добавим их в нашу секцию:

Chronoforms6. Расположение элементов управления. Формирование визуальной части формы

Рис. 3

Для каждого элемента формы есть своя панель управления со следующими кнопками:

  1. «Редактировать» (Edit). По нажатию на эту кнопку открывается окно редактора настроек выбранного элемента.
  2. «Переместить» (Sort) — кнопка для перемещения элемента по области секции. Для перемещения необходимо нажать на кнопку ЛКМ и, удерживая ее, перетащить элемент в нужное место.
  3. «Удалить» (Delete) — кнопка удаления элемента.
  4. «Копировать» (Copy) — кнопка для создания копии элемента.

Теперь подробнее рассмотрим свойства и основные параметры элементов формы различных типов, начиная с вкладки «Основные настройки» (General):

Настройка текстовых полей в Chronoforms6

Рис. 4

  1. «Метка» (Label) — метка располагается над полем (или слева, если используется элемент «Multi field area» с соответствующими настройками) .
  2. «Имя поля» (Name) — обязательный параметр поля ввода, которому соответствует имя переменной, передаваемой полем в процессе отправки формы. Генерируется автоматически при добавлении элемента на форму, но может быть исправлен вручную.
  3. «ID поля» (ID) — обязательный параметр поля, который используется javascript для доступа к элементу. Так же генерируется автоматически, но может быть исправлен вручную.
  4. «Текст в поле по умолчанию» (Placeholder) — содержимое поля при загрузке формы. Исчезает по событию Change.
  5. «Значение» (Value) — значение поля по умолчанию при загрузке формы (по умолчанию пустое).
  6. «Настройки данных» (Data settings) — эти опции отвечают: первое — за передачу значений полей в e-mail сообщение; второе — за сохранение самих элементов формы со всеми их настройками в таблицы базы данных самого компонента.
  7. «Валидация» (Validation) — настройки проверки полей формы. Их установка не является обязательной, но существует для того, чтобы помочь пользователю сайта корректно заполнить форму.
  8. «Инфо» (Info) — вкладка настроек дополнительной информации, отображаемой на форме. Здесь можно настроить отображение дополнительных пояснений и правил заполнения каждого поля формы.
  9. «События» (Events) — эта вкладка используется для настройки свойств и значений одного поля в зависимости от действий пользователя в отношении другого поля.
  10. Тип элемента. Соответствует названию элемента в наборе слева.
  11. Идентификатор/имя блока. При сохранении формы автоматически сохраняются все блоки, присутствующие на форме, которые в последствие могут использоваться при создании других форм. При создании формы в easy-режиме блоки не генерируются.
  12. Метка поля, отображаемая в дизайнере (соответствует значению Label из вкладки основных настроек элемента).
  13. Имя поля (соответствует значению Name из вкладки основных настроек элемента).

Содержимое вкладок основных настроек для разных типов элементов может отличаться. Например, у элемента «textarea» вкладка «Основные настройки» выглядит следующим образом:

Настройка свойств поля textarea в Chronoforms6

Рис. 5

Настройки кнопок выглядят так:

Настройка свойств кнопок (button) в Chronoforms6

Рис. 6

Здесь всего три, интересующих нас опции:

  1. «Тип кнопки» (Type). Всего три типа: «Button» (обычная кнопка, может использоваться для отправки данных формы на сервер или для ее очистки), «Submit» (используется для отправки данных на сервер) и «Reset» (используется для очистки, сброса значений формы).
  2. «Значение» (Content) — текст, отображаемый на кнопке.
  3. «Цвет» (Color) — установка желаемого цвета для кнопки.

Подробнее о вкладке настроек «Валидация» (Validation):

Настройка валидации полей в Chronoforms6

Рис. 7

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

Для нашего проекта, точнее, для трех полей ввода, будет целесообразно обратить внимание на следующие три настройки:

  1. Обязательность заполнения полей: чтобы не получить «безымянное», пустое сообщение, следует отметить здесь ограничение, что поле обязательное.
  2. Кроме того, нужно проследить, что проверка поля не отключена.
  3. Проверка должна быть произведена в любом случае, даже если поле пустое — тогда и осуществляется проверка на наличие заполнения.

Последние две настройки установлены так, как нам нужно по умолчанию.

Для поля «E-mail» целесообразно установить переключатель проверки типа значения «Email» в положение «Включено», чтобы оно было не только непустым, но и содержало именно e-mail отправителя.

Еще одна вкладка дизайнера, которую мы рассмотрим — вкладка дополнительной информации, «Инфо» (Info). Ее содержимое никак не влияет на функциональность формы, но может существенно облегчить пользователю заполнение формы.

Chronoforms6. Настройка дополнительной информации для отображения на форме

Рис. 8

Здесь всего два настраиваемых элемента:

  1. «Описание» (Description) — дополнительная, вторая метка, которая может служить подсказкой к заполнению. Как правило, располагается ниже самого поля ввода.
  2. «Текст всплывающей подсказки» (Tooltip text) — текст всплывающей информационной подсказки. Отображается при наведении мыши на специальный значок, расположенной рядом с основной меткой поля.

После окончания настройки визуальной части формы в дизайнере можно воспользоваться функцией предпросмотра. Текущий проект имеет вот такой внешний вид:

Chronoforms6. Предпросмотр формы обратной связи

Рис. 9

Последний, третий этап создания формы — настройка функций обработки основных событий формы и ее отправки. Для этого нужно перейти на вкладку редактора «Установка» (Install):

Chronoforms6. Вкладка установки (Install) в режиме создания простой формы

Рис. 10

Здесь все необходимые обработчики событий уже присутствуют и настроены по умолчанию. На примере текущего проекта формы остается добавить только e-mail адреса получателей и/или указать поля, откуда эти значения будут взяты.

  1. Набор обработчиков (actions) которые будут срабатывать по событию «onSubmit».
  2. Первый из двух одинаковых элементов «Email» на нашей форме будет отвечать за отправку сообщения пользователя администратору сайта.
  3. Второй «Email» будет отправлен пользователю как уведомление о том, что его сообщение получено.
  4. «Message» — сообщение, которое будет отображено на странице сайта после отправки формы на сервер.

Теперь произведем несколько настроек обработчиков:

  1. Для отправки сообщений верхние переключатели обоих элементов «Email» нужно установить в положение «Включено» (Enabled).
  2. В поле «Список получателей» (Recipients list) первого элемента нужно указать email-адрес сайта и/или администратора. Если адресов несколько, то они должны быть указаны через запятую, без пробелов (например: info@yourdomain.com,your@email.com). Для второго элемента указывается значение поля формы «E-mail» (имя соответствующего поля текущего проекта — text22). Таким образом, адрес в это поле добавляется так: {data:text22}.
  3. Далее заполняем обязательное поле «Тема» (Subject).
  4. И последняя опция — формирование текста сообщения. Здесь может быть, как специально созданный с помощью редактора, шаблон сообщения, так и текст, сгенерированный автоматически и включающий содержимое отправленной на сервер формы (текст меток и содержимое полей).

Для элемента «Message» настройки могут быть такими:

Chronoforms6. Настройка  сообщения на сайте после отправки формы

Рис. 11

После окончания настройки формы можно подключить ее на сайте и протестировать. Если все сделано правильно, то Вы получите два e-mail сообщения: одно — для администратора, другое — для пользователя, а также, после отправки формы на сервер, увидите уведомление об отправке формы на странице сайта.

Хостинг SpaceWeb