Этот режим редактирования форм обратной связи компонента Chronoforms отличается от предыдущего многим, но прежде всего тем, что он позволяет реализовать более сложные задачи, от автозаполнения полей до передачи информации из БД сайта.

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

Расширенный режим создания форм.  Основные настройки формы

Рис. 1

Вкладка «Основные настройки» (General), по сравнению с easy-режимом, содержит куда больше настроек конфигурации формы:

  1. «Заголовок» (Title) здесь можно указывать на любом языке, а так же использовать любые символы или пробелы, т. к. его значение не используется в качестве идентификатора формы.
  2. «Алиас» (Alias) используется в качестве идентификатора или URL-адреса формы при любых способах ее подключения и вывода на страницах сайта. Алиас автоматически генерируется при сохранении формы из содержимого поля «Заголовок» (п.1, см. рис. 1) без транслита на латиницу, но его также можно корректировать вручную. Поэтому необходимо следить, чтобы это поле заполнялось на латинице без использования специальных и пробельных символов.
  3. Опция «Опубликовано» (Published) позволяет управлять возможностью вывода формы на страницах сайта.
  4. Настройка «Доступ Public» (Public) обеспечивает управление доступом к форме на сайте (для любых групп пользователей). Действие этой опции аналогично действию публикации/снятия с публикации (п. 3, см. рис. 1), за исключением содержания отображаемого на сайте сообщения. Эту настройку рекомендуется оставить в положении «включено».
  5. Расширенный режим создания форм позволяет сделать резервную копию формы, не закрывая окна редактора с помощью кнопки «Резервная копия» (Backup).
  6. Если сайт поддерживает несколько языков, то редактор в данном режиме предоставляет возможность перевода элементов формы на все используемые языки. Для этого нужно использовать функционал вкладки «Локализация» (Locales).

Второй этап создания формы осуществляется также, во вкладке «Дизайнер» (Designer). Но advanced-режим имеет куда большие преимущества по сравнению с easy-режимом. Здесь следует отметить, что набор элементов для создания формы увеличился в несколько раз, а также появилась возможность их кастомизации путем создания блоков.

Расширенный режим создания форм.  Дизайнер форм

Рис. 2

  1. «Основное» (Core) — первая вкладка набора элементов для форм с группировкой по основным видам. Здесь, в отличие от easy-режима, для тех же элементов существуют дополнительные возможности настройки свойств и событий.
  2. «Еще…» (More) — дополнительная вкладка набора, где, как правило, размещаются готовые блоки, которые можно использовать повторно, вне зависимости от того, для какой формы они были созданы.
  3. При генерации новой формы в дизайнере, обычно, создается одна секция для размещения элементов. Но иногда может понадобиться еще секция или несколько. В данном режиме есть возможность создания неограниченного количества дополнительных секций. Для этого нужно ввести в текстовое поле под областью уже существующей секции имя новой и нажать на кнопку «Добавить секцию» (Add section).
  4. Если на форме присутствует несколько секций, в свою очередь, включающие в себя множество элементов, то более удобно оставить развернутой ту секцию, с которой непосредственно работает веб-мастер, а остальные свернуть. Для этого в правом верхнем углу каждой секции есть кнопка «Развернуть/свернуть» (п. 4, см. рис. 2).
  5. Так же доступна настройка режима генерации HTML-кода формы на вкладке «Шаблон» (Template). Здесь мы можем выбрать один из двух вариантов создания кода формы: автогенерация после сохранения каждой редакции формы, либо статичный код, не учитывающий текущее состояние проекта в дизайнере.

Добавим на форму несколько полей и предварительно настроим их так же, как при использовании easy-режима. В итоге на вкладке дизайнера должно получиться, примерно, следующее:

Расширенный режим создания форм.  Секция одностраничной формы в дизайнере

Рис. 3

Завершается работа над проектом формы тоже во вкладке «Установка» (Install):

Расширенный режим создания форм.  Вкладка установки обработчиков

Рис. 4

Настройка обработки формы в данном режиме полностью отличается от easy-режима:

  1. «Основное» (Core). Здесь доступен довольно широкий набор функций-обработчиков, которые так же, как элементы форм в дизайнере, классифицируются и разбиваются на несколько групп.
  2. «Еще…" (More) включает те же самые, но кастомизированные функции обработчики, которые создаются в процессе создания форм.

В расширенном режиме основные события формы так же генерируются автоматически и в них уже присутствуют необходимые для непосредственного функционирования формы обработчики. Все они уже имеют корректную предварительную настройку и достаточны для отображения на сайте и отправки данных на сервер. Но, в отличие от easy-режима, все, что нужно в текущем проекте сверх того, что предлагается в результате автоматической генерации событий и обработчиков, нужно добавлять и/или донастраивать самостоятельно. Например, отправку почты с сайта «Email» и отображение сообщения «Message» нужно добавлять в соответствующие события дополнительно и проследить за корректной установкой соответствующих опций.

  1. «Load» — первое основное событие формы — ее загрузка и отображение.
  2. В числе обработчиков события «Load» обязательно должна присутствовать функция показа формы или ее основных элементов. Если убрать или отключить этот обработчик или отключить его, то форма не будет отображаться на сайте, не смотря на статусы публикации или доступа (данный момент касается обеих версий: и CF6, и CF5) — это одна из причин, по которым форма Chronoforms на сайте не отображается. В шестой версии это обработчик «Display Section».
  3. Область события формы представляет собой тело функции, являющейся основным обработчиком события, который может включать другие, вложенные, функции, вызываемые при наступлении этого события.
  4. Второе основное событие, практически, любой формы — это событие «Submit» — отправка результата работы формы на сервер. Оно инициализируется при клике по кнопке с типом submit. Именно здесь, в области этого события, целесообразно размещать такие элементы, как «Email», «Message» или подобные, т. е. те функции, которые для своей работы используют содержимое формы и/или выводят какие-либо конкретные результаты ее работы.
  5. «Validate Fields» функция-обработчик, обеспечивающая проверку полей формы, заполняемых пользователем на сайте. В обоих режимах создания форм этот обработчик генерируется автоматически, но advanced-режим дает возможность перенастроить ее так, чтобы для проверки использовались уже свои, дополнительно созданные в редакторе, правила и функции.
  6. «Event Loader» так же генерируется автоматически и обеспечивает прерывание дальнейшей обработки формы в случае отрицательного результата работы валидатора полей (Validate Fields).
  7. Кроме того, здесь так же, как в дизайнере формы добавляются секции, можно добавлять собственные события кликом по кнопке «Добавить событие» (Add event).

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

Очередность выполнения функций-обработчиков в Chronoforms

Рис. 5

Следовательно, если расположить, например, обработчики «Email» и «Message» в области события «submit» до «Validate Fields», то мы получим и оба e-mail сообщения на почту, и уведомление на странице сайта, вне зависимости от того, правильно ли заполнены поля пользователем (и заполнены ли вообще).

В easy-режиме все эти элементы уже сгенерированы и расположены в правильной очередности, их остается только задействовать, если они нужны  и/или донастроить (в рамках некоторых ограничений), если нужно. Но в расширенном режиме управление всеми элементами редактора осуществляется веб-мастером, который работает над проектом формы, поэтому нужно внимательно следить за тем, чтобы все элементы здесь располагались правильно, в определенной последовательности.

В случае с нашим проектом вкладка установки, после того, как мы разместили в ней все необходимые элементы, выглядит следующим образом:

Расширенный режим создания форм. Порядок расположения дополнительных обработчиков в области события Chronoforms

Рис. 6

Дополнительные элементы (два «Email» и один «Message») можно настроить так же, как в easy-режиме.

Теперь форму можно подключить на сайте любым доступным способом и протестировать. Если все сделано правильно, то форма отправит два сообщения e-mail: одно — для администратора, второе — для пользователя, чей адрес указан в поле «E-mail» на форме. Также, после отправки формы на сервер, пользователь, отправивший это сообщение, увидит соответствующее уведомление на странице сайта.

Хостинг SpaceWeb