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

Как и в случае с «Security Question»  в CF5, установка и использование инструмента «Security image» на форме Chronoforms 6 включает два этапа.

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

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

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

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

Рис. 1

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

1. «Метка» (Label) — общая метка для элемента.

2. «Имя» (Name) — имя элемента, значение которого помещается в соответствующее поле элемента обработчика.

3. «ID поля» идентификатор элемента, который может использоваться для обращения к нему с помощью javascript.

4. «Расположение» (Layout) — переключатель расположения элементов набора изображений относительно друг друга. Может принимать два значения — «Горизонтальное» (Horizontal), когда элементы расположены вряд, и «Вертикальное» (Vertical), когда элементы набора с изображениями расположены сверху вниз, один под другим. Изображения, заключенные в теги label в обоих случаях располагаются справа от переключателей radio.

5. «Список элементов» (Options) — весь набор переменных, представляемых изображениями на форме, состоящий из 13-ти элементов.

6. «Количество элементов» (Number of options) — по умолчанию значение этого поля равно 5, но вы можете выбрать любое количество элементов в пределах 13-ти.

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

Рис. 2

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

1. «Обязательное поле» (Requared?) — переключатель, с помощью которого можно определить будет данное поле обязательным или нет. По умолчанию для данного элемента переключатель установлен в положение «Нет».

2. «Сообщение об ошибке» (Error message). В это поле помещается текст сообщения об ошибке в случае, если действие пользователя в отношении поля является обязательным.

3. «Правила валидации» (Validation rules) — многострочное поле для списка правил проверки содержимого «Security image» при отправке формы, где каждый элемент располагается с новой строки. По умолчанию данное поле настроек пусто.

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

Рис. 3

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

1. «Включить ghost» (Enable ghost) — эта опция отвечает за присутствие элемента в массиве данных отправляемой формы. В данном случае ее включение предотвращает появление ошибки формы до ее проверки скриптом. По умолчанию данная опция находится в положении «Включено».

2. Значение «ghost» по умолчанию. Если проект формы не предполагает иного, по умолчанию в массив данных передается пустое значение этой переменной.

3. «Дополнительные атрибуты тега» (Extra attributes) — многострочное поле для указания атрибутов элемента «Security image», где каждая пара «атрибут=значение» указывается с новой строки.

4. «Описание» (Description) — многострочное поле для текста описания, который выводится на форме в качестве дополнительной метки снизу под элементом.

5. «Css класс контейнера» (Container class) — класс тега-обертки элемента, используемого для его стилизации. По умолчанию в данном поле установлено значение «field».

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

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

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

Рис. 4

Здесь всего две настройки:

1. «Имя поля» (Field name) — обязательное поле, в котором нужно указать имя связанного элемента «Security image»

2. «Сообщение об ошибке» (Error message) — текст сообщения об ошибке в случае, если пользователь выбрал неверное изображение. Поле не является обязательным к заполнению.

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

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

Хостинг SpaceWeb