Последние редакции Chronoforms 6 включают в себя механизм отображения форм по событию загрузки страницы по умолчанию. Вместе с ней подгружается и весь, необходимый и достаточный для работы типового веб-приложения, функционал. В таких случаях не требуется отдельного подключения таких функций, как проверка полей безопасности, серверная валидация полей, стилизация, отладка и прочее. Все они настраиваются во вкладке «Настройки» (Settings) конструктора форм. Однако, в некоторых ситуациях этого недостаточно.

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

Также бывают ситуации, когда создается проект с типом приложения «Пользовательский» (Custom), где при загрузке страницы не требуется немедленное отображение содержимого формы или не нужен ее функционал. Например, на формах, отображаемых в модальных окнах, используется этот тип приложения.

Для таких случаев предусмотрен элемент-контейнер «Form area». В версиях CFv6.0.x его функционал принадлежал обработчикам «Display Section», а затем и «Display Form». Теперь он отнесен к инструментам визуализации и устанавливается на стороне «Представлений» (views).

Интерфейс управления элементом Form area в конструкторе форм Chronoforms 6

Интерфейс управления элементом Form area в конструкторе форм Chronoforms 6 представляет собой комбинацию из трех частей:

  1. Собственные настройки элемента, которые расположены в самом верху и открываются отдельно, по нажатию на лиловый значок метки.
  2. Настройки параметров формы. Эта часть располагается посередине. Открывается отдельно, по нажатию на голубой значок шестеренки.
  3. Область контейнера находится внизу и развернута по умолчанию. Предназначена для непосредственного размещения в ней полей формы. По нажатию на элемент «body» оранжевого цвета область контейнера можно свернуть.

Chronoforms 6 | Элемент-контейнер Form area

Рис. 1

  • Собственные настройки элемента:
    1. «Метка конструктора» (Designer label) — служебная метка, которая больше нигде не отображается, кроме как в окне редактирования.
    2. «Имя» (Name) — имя DOM элемента, используемое при его обработке скриптами. Должно быть уникальным, без пробельных или спецсимволов.
  • Настройки параметров формы:
    1. «Источник данных» (Data provider) — весь набор данных, с которыми работает приложение. Поле не является обязательным, т. к. по умолчанию форма обрабатывает весь массив, в том числе заполняемые пользователем поля, результаты выполнения функций и возвращаемые ими значения, параметры формы и т. д. Источником также может быть вся или часть сессии.
    2. «Событие отправки» (Submit Event) — событие, по которому осуществляется обработка и отправка формы на сервер. По умолчанию «submit».
    3. «URL-адрес обработчика и/или его параметры» (Action URL and/or parameters) — URL скрипта основного обработчика формы. Как правило, такой обработчик может потребоваться для приложений, имеющих тип «Пользовательский».
    4. «AJAX-отправка» (AJAX submit) — используется для отправки формы без перезагрузки страницы, на которой она расположена.
    5. «Скрытая форма» (Invisible form) — обеспечивает доступ к форме до события загрузки страницы, где она расположена.
    6. «Продолжение сессии» (KeepAlive) — параметр, отвечающий за продолжение текущей сессии пользователя на момент загрузки формы. Обычно применяется для настройки многостраничных приложений.
    7. «Сообщения валидации» (Validation messages) — поле для определения внешнего вида и позиции сообщений валидации на форме. Предлагается три варианта: «Всплывающие подсказки» (inline tooltips), «Сообщения рядом с полями» (inline error messages) и «Список ошибок ниже формы» (Errors list below form).
    8. «Анимация отправки» (Submit animation) — настройка, отвечающая за включение или отключение анимации при отправке формы. На формах с AJAX-отправкой анимация используется независимо от значения данного поля.
    9. «Размер» (Size) — поле, определяющее CSS-класс формы, который отвечает за размер ее DOM- элемента. Предлагаются следующие варианты значений: «По умолчанию» (Default), «Mini», «Tiny», «Small», «Large», «Big», «Huge» и «Massive».
    10. «Класс» (Class) — основной CSS-класс формы, который используется JS-скриптами для ее бработки, а также для ее стилизации. Удаление или изменение существующего класса может повлечь, например, прекращение поддержки формой JS-валидации. Для дополнительной стилизации можно добавлять свои классы к существующему через пробел.
    11. «ID формы» (Form ID) — уникальный идентификатор формы, указываемый пользователем для целей кастомизации. Поле не является обязательным и по умолчанию форма не имеет этого атрибута.
    12. «Атрибуты тега формы» — многострочное поле для указания списка дополнительных атрибутов для тега «form», где каждый атрибут вводится с новой строки.
  • Область контейнера:
    1. Тело контейнера предназначено для расположения визуальных элементов формы.

Применение Form area на формах обратной связи Chronoforms 6

Применение Form area на формах обратной связи Chronoforms 6 заключается в следующем:

  1. Нужно перейти во вкладку конструктора формы «Страницы» (Pages), переключить ее на вкладку «Представления» (views), выбрать визуальный элемент «Form area» из группы «Areas» (в репозитории слева) и перетащить его мышью в область нужной страницы (см. рис. 2).
  2. Настроить элемент, как описано выше (см. п. «Интерфейс управления элементом Form area в конструкторе форм Chronoforms 6»).
  3. Разместить в теле контейнера все необходимые элементы (см. рис. 2), а затем настроить их.

Применение Form area на формах обратной связи Chronoforms 6

Рис. 2