Помимо таких инструментов защиты форм Chronoforms5 и предотвращения спама, как Captcha, Recaptcha, Honeypot и Submit Limit для этих целей может использваться также и инструмент «Security Question». Механизм его действия заключается в следующем: при загрузке формы генерируется проверочный вопрос; пользователь заполняет все необходимые поля на форме и вводит ответ на вопрос; система проверяет ответ пользователя на совпадение с имеющимся в списке правильным вариантом и, если они совпадают, продолжает дальнейшую обработку, либо, если ответ неправильный, прерывает ее и выводит сообщение о об этом пользователю.

Реализация этого механизма на форме включает два основных этапа.

Первый — размещение на форме визуального элемента «Security Question», которое осуществляется в процессе работы над проектом во вкладке «Дизайнер» (Designer). В основном меню слева «Макет» (Layout) нужно открыть список группы «Advanced», выбрать элемент в «Security Question» и мышью перетащить его в соответствующее место в теле секции формы (см. рис. 1). Обычно подобные элементы расположены выше кнопки отправки.

Расположение элемента «Security Question» на формах Chronoforms 5

Рис. 1

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

Окно редактирования настроек элемента «Security Question» на формах Chronoforms 5

Рис. 2

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

Настройки элемента

Название Значение по умолчанию Описание
Основные настройки (General)
Имя поля (Field Name) chrono_security_answer Имя элемента. Генерируется автоматически. При редактировании вручную пробельные и спецсимволы не допускаются
ID поля (Field ID) chrono_security_answer[числовое значение идентификатора] Идентификатор элемента. Генерируется автоматически.
Значение (Field Value)   Значение поля по умолчанию. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Метка (Label) {chrono_security_question} Генерируется автоматически. Изменять вручную не рекомендуется
Позиция метки (Label position) Top Позиция метки определяет будет текстовая метка с вопросом отображаться над полем ввода либо слева
Дополнительная метка (Sub Label)   Дополнительная метка. Может использоваться в качестве дополнительной подсказки для пользователя на сайте. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Текст в поле (Placeholder)   Текст в поле на сайте. Может служить дополнительной подсказкой для пользователя на сайте. Тип: строка. Исчезает при попытке изменения поля пользователем. Опция прописывается вручную. По умолчанию данное поле пустое
Количество символов (Max Length)   Максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод блокируется. Тип: целое число. Опция прописывается вручную. По умолчанию данное поле пустое
Размер поля (Size)   Ширина текстового поля, определяемая числом символов моноширинного шрифта. Тип: целое число. Опция прописывается вручную. По умолчанию данное поле пустое
Класс (Class)   Css класс поля. Тип: строка. Указывается без пробелов и спецсимволов. Опция прописывается вручную. По умолчанию данное поле пустое
Заголовок (Title)   По факту: текст всплывающей подсказки, отображаемой в случае неверного ответа на вопрос. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Стили (Style)   Поля для указания стилей через точку с запятой (например: «border:1px solid red;»). Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Маска (Mask)   Список предлагаемых макетов, согласно которым пользователь сможет вводить ответ на вопрос. Опция прописывается вручную путем выбора значения маски из списка. По умолчанию данное поле пустое
Расширенные параметры (Extra params)   Многострочное текстовое поле для перечисления списка переменных и их значений, где для каждой пары «имя_переменной=значение» отводится одна строка. Опция прописывается вручную. По умолчанию данное поле пустое
Состояние при загрузке (Load state)   Состояние поля на сайте в момент загрузки страницы с формой. Опция устанавливается путем выбора необходимого значения из списка.  По умолчанию данное поле пустое
Информационная подсказка (Tooltip)   Всплывающая подсказка, используемая для дополнительного описания, отображаемая на сайте при наведении мышью на значок восклицательного знака (слева от метки). Тип: текст. Опция прописывается вручную. По умолчанию данное поле пустое. Фактически на данный момент не реализовано
Валидация (Validation)
Обязательно (Required) Нет Определяется обязательным к заполнению будет данное поле или нет. Опция устанавливается путем выбора нужного значения из списка.
Алфавитный (Alpha) Нет При заполнении поля пользователем используются только буквенные символы.
Алфавитно-цифровой (Alpha numeric) Нет При заполнении поля пользователем используются только буквенные и цифровые символы.
Цифровой (Digits) Нет При заполнении поля пользователем используются только цифровые символы.
Нецифровой (No Digits) Нет При заполнении поля пользователем используются нецифровые символы.
Без пробела (No Spaces) Нет При заполнении поля пользователем пробелы не допускаются.
Число (Number) Нет При заполнении поля пользователем используются только целые числа.
E-mail (Email) Нет При заполнении данного поля допускается только ввод e-mail адреса.
Номер телефона (Phone) Нет При заполнении данного поля допускается только ввод символов, принятых для указания телефонного номера.
Формат международных телефонных номеров (Int. phone) Нет При заполнении данного поля допускается только ввод символов, принятых для указания телефонного номера  только по определенным правилам, с указанием формата международных телефонных номеров.
Ссылка Url (Url) Нет При заполнении данного поля допускается только ввод URL-ссылки.
Подтверждение (Confirm)   В данное поле вводится ID другого поля, с которым требуется сравнение. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое.
Функция подтверждения (Custom function)   Имя пользовательской JS-функции, используемой для проверки. Функция д.б. определена как глобальная (т.е.: тело функции содержится НЕ внутри, например, функции обработки события ready или onload страницы). Она может принимать 1 параметр и является свойством глобального объекта. Функция возвращает одно из значений - true или false. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое.

Второй этап установки проверочного вопроса осуществляется во вкладке «Установка» (Install) редактора форм путем размещения элементов «Load Security Question» и «Check Security Question» в областях соответствующих событий формы.

Элемент «Load Security Question» представляет собой функцию-обработчик, который генерирует пару «вопрос — ответ» из созданного в ходе его настройки списка. Располагается в списке элементов слева в группе «Anti Spam» вкладки «Установка» (Install). Размещается, как обычно, путем перетаскивания мыши в область соответствующего события. Рекомендуется размещать «Load Security Question» только в области события «On load» формы (см. рис. 3).

Установка элементов «Load Security Question» и «Check Security Question» в качестве обработчиков событий форм Chronoforms 5

Рис. 3

Для того, чтобы создать список пар «вопрос=ответ», из которого рандомно система будет генерировать пару для текущей сессии, нужно нажать на кнопку «Редактирование» (Edit) элемента «Load Security Question» и заполнить многострочное, единственное поле настроек «Вопросы=Ответы» (Questions=Answers), как показано на рисунке 4.

Редактирование настроек обработчика «Load Security Question» на формах Chronoforms 5

Рис. 4

Для того, чтобы организовать проверку вводимого пользователем на сайте ответа на вопрос, нужно поместить элемент «Check Security Question», находящийся в том же списке в группе «Anti Spam», в область события «On Submit» так, чтобы он располагался выше всех других, имеющихся обработчиков (если они есть). В случае отрицательного результата проверки введенного вопроса, дальнейшую обработку формы следует прервать и предотвратить ее отправку на сервер. Для этого нужно выбрать в группе «Основные» (Basic) списка элементов элемент «Event Loop» и поместить его в область собственного события «On fail» элемента «Check Security Question», как показано на рисунке 3. Чаще всего, донастройка элемента «Event Loop» не требуется.

Для настройки элемента «Check Security Question» нужно нажать на относящуюся к нему кнопку «Редактирование» (Edit), после чего откроется окно настроек. Оно имеет единственное, доступное для редактирования, поле «Ошибка» (Error), куда вводится текст сообщения об ошибке, которое будет отображено в области системных сообщений на сайте, если пользователь ответит на вопрос неправильно.

Редактирование настроек обработчика «Check Security Question» на формах Chronoforms 5

Рис. 5

Здесь важно отметить, что без предварительных правок кода соответствующих файлов компонента, где описываются функции-обработчики, соответствующие элементам редактора «Load Security Question» и «Check Security Question», кириллица в парах «вопрос-ответ» не поддерживается.

Если все три описанных выше элемента («Security Question» , «Load Security Question» и «Check Security Question») расположены на форме и настроены правильно, то, в большинстве случаев, инструмент «Security Question» отображается при загрузке формы и корректно работает. При возникновении проблем с его корректным отображением и функционированием нужно, прежде всего, проверить все, описанные выше моменты. Если проблема осталась, то следует проверить кэширование страницы, где выводится форма. Вне зависимости от способа вывода на сайте при использовании данного элемента в качестве анти-спама, форма не должна кэшироваться.

Хостинг SpaceWeb