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

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

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

Настройка  Captcha в дизайнере Chronoforms5

Рис. 1

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

Окно настроек элемента Captcha в дизайнере Chronoforms5

Рис. 2

Здесь расположено относительно немного настроек и для корректной работы инструмента «Captcha» обычно не требуется их донастройка.

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

Название Значение по умолчанию Описание
Основные настройки (General)
Метка (Label) Captcha Генерируется автоматически. Можно изменить ее или убрать (тогда метка капчи на форме отображаться не будет)
Позиция метки (Label position) left Позиция метки определяет будет ли метка отображаться слева или над полем ввода
Дополнительная метка (Sub Label)   Дополнительная метка. Может использоваться в качестве дополнительной подсказки для пользователя на сайте. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Текст в поле (Placeholder)   Текст в поле на сайте. Может служить дополнительной подсказкой для пользователя на сайте. Тип: строка. Исчезает при попытке изменения поля пользователем. Опция прописывается вручную. По умолчанию данное поле пустое
Количество символов (Max Length)   Максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод блокируется. Тип: целое число. Опция прописывается вручную. По умолчанию данное поле пустое
Размер поля (Size)   Ширина текстового поля, определяемая числом символов моноширинного шрифта. Тип: целое число. Опция прописывается вручную. По умолчанию данное поле пустое
Класс (Class)   Css класс поля. Тип: строка. Указывается без пробелов и спецсимволов. Опция прописывается вручную. По умолчанию данное поле пустое
Заголовок (Title)   По факту: текст всплывающей подсказки, отображаемой в случае неверного ответа на вопрос. Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Стили (Style)   Поля для указания стилей через точку с запятой (например: «border:1px solid red;»). Тип: строка. Опция прописывается вручную. По умолчанию данное поле пустое
Расширенные параметры (Extra params)   Многострочное текстовое поле для перечисления списка переменных и их значений, где для каждой пары «имя_переменной=значение» отводится одна строка. Опция прописывается вручную. По умолчанию данное поле пустое
Валидация (Validation)
Обязательно (Required) Нет Определяется обязательным к заполнению будет данное поле или нет. Опция устанавливается путем выбора нужного значения из списка.

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

Элемент «Load Captcha» представляет собой функцию-обработчик, который генерирует проверочный код в виде изображения. Располагается в списке элементов слева в группе «Anti Spam» вкладки «Установка» (Setup). Размещается, как обычно, путем перетаскивания мыши в область соответствующего события.

Рекомендуется размещать «Load Captcha» только в области события «On load» формы выше обработчика «HTML (Render Form)» (см. рис. 3).

Настройка элемента Load Captcha в области события On Load во вкладке Установка (Setup) конструктора Chronoforms5

Рис. 3

Настроек у элемента «Load Captcha» всего две:

  1. «Шрифты TrueType» (True Fonts) с переключателями «Да» (Yes) и «Нет» (No), где можно выбрать группу шрифтов. Качество отрисовки шрифтов TrueType лучше и пользователи без труда могут справиться с решением такой капчи.
  2. «Кнопка „обновить“» (Refresh button) — также с переключателями «Да» (Yes) и «Нет» (No). Эта настройка позволяет определить, будет ли отображаться кнопка обновления капчи на форме.

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

Настройка элемента Check Captcha в области события On Submit во вкладке Установка (Setup) конструктора Chronoforms5

Рис. 4

Для настройки элемента «Check Captcha» нужно нажать на его кнопку «Редактирование» (Edit), после чего откроется окно настроек (см. рис. 4). Оно имеет два, доступных для редактирования, поля:

  1. «Включить» (Enable) с переключателями «Да» (Yes) и «Нет» (No) . Установка этого переключателя включает проверку капчи или отключает ее.
  2. «Ошибка» (Error) — это поле для ввода текста сообщение об ошибке на случай, если пользователь предоставит неправильное решение капчи.

Если инструмент «Captcha» установлен и настроен правильно, то изображение капчи будет выведено на сайте и его код будет проверен при попытке отправки, а в случае отклонения варианта, введенного пользователем, форма отправляться на сервер не будет.

Хостинг SpaceWeb