Защита форм и предотвращение спама в компоненте Chronoforms 6 представлены целым рядом элементов.  К числу основных, помимо  Google reCaptcha и Honeypot, относится также инструмент «Security image». На форме он представляет собой набор элементов input с типом radio, где в качестве привязанных к ним меток label используются изображения. Количество таких input-тов определяется и корректируется в настройках «Security image», а сами input-ты, соответствующие определенным изображениям, выбираются системой рандомно из базового набора при загрузке страницы с формой.

Установка и настройка Security image на форме Chronoforms 6

Установка и настройка Security image на форме Chronoforms 6 включает два этапа.

Первый — размещение на форме визуального элемента «Security image» во вкладке редактора формы «Дизайнер» (Designer). Второй этап заключается в установке и настройке функции-обработчика «Check Security image» в событии отправки формы (submit).

Для того, чтобы добавить на форму визуальный элемент «Security image», нужно открыть раздел редактора «Дизайнер» (Designer) и в группе «Security» выбрать его и перетащить мышью в тело секции формы (над кнопкой отправки, например). 

Для настройки элемента нужно нажать на значок шестеренки «Редактировать» (Edit), после чего откроется окно управления элементом.

Элемент «Security image» на формах Chronoforms 6. Вкладка основных настроек

Рис. 1

Во вкладке «Основные настройки» (General) расположены следующие поля:

  1. «Метка» (Label) — общая метка для элемента.
  2. «Имя» (Name) — имя элемента.
  3. «ID поля»  — уникальный идентификатор элемента.
  4. «Расположение» (Layout) — переключатель расположения элементов набора изображений относительно друг друга. Может принимать два значения — «Горизонтальное» (Horizontal), когда элементы расположены вряд, и «Вертикальное» (Vertical) — когда элементы набора с изображениями расположены сверху вниз, один под другим.
  5. «Список элементов» (Options) — весь набор переменных, представляемых в виде изображений на форме.
  6. «Количество элементов» (Number of options) — по умолчанию значение этого поля равно 5, но вы можете выбрать любое количество элементов в пределах 13-ти.

Элемент «Security image» на формах Chronoforms 6. Вкладка Валидация

Рис. 2

Вкладка «Валидация» (Validation) включает следующие поля:

  1. «Обязательное поле» (Requared?) — переключатель, с помощью которого можно определить, будет данное поле обязательным или нет.
  2. «Сообщение об ошибке» (Error message) —  текст сообщения об ошибке на случай отрицательного результата проверки ключа.
  3. «Правила валидации» (Validation rules) — многострочное поле для списка правил проверки содержимого при отправке формы. По умолчанию данное поле настроек пусто.

Элемент «Security image» на формах Chronoforms 6. Вкладка дополнительных настроек

Рис. 3

Во вкладке «Дополнительно» (Advanced) расположены такие настройки:

  1. «Включить ghost» (Enable ghost). По умолчанию данная опция находится в положении «Включено» и корректировать ее не следует. 
  2. Значение «ghost» по умолчанию. Если проект формы не предполагает иного, то по умолчанию в массив данных формы передается пустое значение этой переменной.
  3. «Дополнительные атрибуты тега» (Extra attributes) — многострочное поле для указания атрибутов элемента «Security image», где каждая пара «атрибут=значение» указывается с новой строки.
  4. «Описание» (Description) — многострочное поле для текста описания, который выводится на форме в качестве дополнительной метки снизу под элементом.
  5. «Css класс контейнера» (Container class) — класс тега-контейнера элемента, используемый для его стилизации.

После размещения и настройки инструмента «Security image» во вкладке «Дизайнер» (Designer), нужно переключить редактор на вкладку «Установка» (Install), а затем выбрать и перетащить мышью  функцию «Check Security image» из подгруппы  «Security» (в меню набора элементов слева) в область тела события «submit». Эта функция всегда должна располагаться выше всех остальных обработчиков. 

Для настройки этого обработчика нужно кликнуть по значку шестеренки.

Элемент «Check Security image» на формах Chronoforms 6. Вкладка Установка (Install)

Рис. 4

В окне редактирования элемента настроек всего две:

  1. «Имя поля» (Field name) — обязательное поле, в котором нужно указать имя связанного визуального элемента «Security image» (нужно взять его значение из соответствующих настроек во вкладке «Дизайнер»).
  2. «Сообщение об ошибке» (Error message) — текст сообщения об ошибке  на случай отрицательного результата проверки изображения. Поле не является обязательным к заполнению.

Для предотвращения отправки формы для случаев, когда изображение было выбрано неправильно или не выбиралось пользователем вообще, нужно в тело собственного события «fail» элемента «Check Security image» добавить обработчик «Event Loader» (см. рис. 4, п. 3). Донастраивать этот обработчик не нужно. Подробнее, для чего он нужен, можно прочесть здесь.