Защита форм и предотвращение спама — одна из наиболее важных и сложных задач при создании своих проектов для сайтов. Компонент Chronoforms 5 для Joomla 3 предлагает целый ряд инструментов для обеспечения безопасности: «Security Question»«Recaptcha», «Honeypot» и т.д..  Также в эту группу элементов входит инструмент «Captcha».

Механизм его действия заключается в следующем:

  • при загрузке формы генерируется изображение;
  • пользователь заполняет поля формы и вводит проверочный код в специальное поле;
  • система проверяет ответ пользователя и, если код введен правильно, продолжает дальнейшую обработку либо, если код введен неправильно, прерывает ее и выводит  сообщение на странице сайта.

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

Настройка поля ввода Captcha на формах Chronoforms 5

На формах обратной связи Chronoforms 5 настройка настройка поля ввода «Captcha» осуществляется на стадии проектирования клиентской части проекта. 

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

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

Рис. 1

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

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

Рис. 2

При геренации нового элемента здесь уже присутствуют основные настройки по умолчанию. Обычно их  достаточно для корректной работы «Captcha».

Основные настройки визуальной части «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 на формах Chronoforms 5

Для компонента Chronoforms 5 характерно разделение функционала инструментов обеспечения безопасности на 2 части: первая отвечает за генерацию проверочного кода при загрузке формы, а вторая — за проверку, в момент отправки данных формы на сервер, ответа пользователя на соответствие с этим кодом. Следовательно, нам нужно перейти во вкладку редактора формы  «Установка» (Setup)  и разместить, а затем настроить на форме два элемента:

  • первый — «Load Captcha», в области события  «On load» формы над обработчиком «HTML (Render Form)» (см. рис. 3);
  • второй —  «Check Captcha», в области события «On submit»  первым сверху (см. рис. 4). 

Визуальные представления обеих функций располагаются в списке элементов слева в группе «Anti Spam» вкладки «Установка» (Setup)

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

Рис. 3

Настройка «Load Captcha»

Нужно нажать на кнопку «Редактирование» (Edit), после чего откроется окно настроек. У «Load Captcha» их  всего две:

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

Настройка «Check Captcha»

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

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

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

Рис. 4

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

Чаще всего, донастройка элемента «Event Loop» не требуется.

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