- Read Time: 2 mins
Представляем полное руководство по новому компоненту ChronoForms 5, которое поможет вам быстро начать работу и понять большинство доступных функций.
После установки последней версии ChronoForms 5, пожалуйста, войдите в менеджер форм, используя опцию "Chronoforms5" выпадающего меню "Компоненты".
ChronoForms является бесплатным расширением Joomla, выпущенным под лицензией GPL, проверка не является обязательной, бесплатная версия имеет все возможности, но проверка поможет вам удалить ссылки под вашими формами и очистит уведомление о проверке в админке.
ChronoForms 5 имеет 2 режима настройки - нормальную (расширенную) настройку с полным набором функций и опций и простую настройку для начинающих. Можно создать новую форму в любом режиме, нажав на кнопки "Новая" (New) или "Новая простая" (New simple). Если вы новый пользователь ChronoForms, мы предлагаем вам начать с помощью режима "Новая простая" (New simple). Вы можете переключить вид режима настройки позже, когда привыкните к интерфейсу ChronoForms. 
Кнопка "Создать таблицу" (Create table) поможет вам создать таблицу базы данных для формы, этот шаг необходим, если вы планируете использовать действие "Сохранить БД" (DB save) для сохранения данных формы.
Кнопки “Резервное копирование” (Backup) и “Восстановление” (Restore) должны помочь вам безопасно передать ваши формы от сайта и на сайт.
Кнопка “Установить Действие” (Install action) поможет вам установить дополнительные действия для ваших форм.
Кнопка “Демонстрация” (Demos) загрузит группу демо-форм, которые помогут вам понять некоторые из различных особенностей ChronoForms.
Кнопка “Настройки” (Settings) предназначена для продвинутых пользователей.
Для имеющегося списка форм вы можете выполнить различные задачи:- Кликните на имени формы, чтобы ее открыть и редактировать.
- Кликните на ссылке “Просмотр формы” (View form), чтобы посмотреть/запустить форму.
- Кликните на зеленой метке для переключения статуса опубликования вашей формы, если форма не опубликована, то она не будет доступна на сайте.
Первое, что вам нужно сделать после нажатия на кнопку "Новая" (New) - это написать имя формы. Имя формы не должно иметь пробелов или специальных символов, но может содержать только "-" или "_" или любой алфавитно-цифровой символ.
В разделе "Оформление" (Designer), где вы создаете свою форму и можете добавлять, сортировать и редактировать поля формы и другие элементы, имеются 3 области, отмеченные на иллюстрации:- Это Основной (Basic) список элементов, здесь вы найдете наиболее часто используемые поля формы, вы можете перетащить любой элемент на правую синюю область.
- Это Расширенный (Advanced) перечень элементов, вы можете нажать на слово "Расширенный", чтобы раскрыть этот раздел.
- Это область Конструктора (Designer body), где вы можете управлять полями формы.
Некоторые замечания о полях, которые вы перетаскиваете в область конструктора (Designer body):
Имя поля представлено на темно-синем фоне в верхней части слева, убедитесь, что оно уникально и не имеет пробелов, и, если возможно, измените его на нечто значимое, вместо использования "text1" для поля "Имя", используйте "first_name", это будет очень полезно позже.
- Для полей с несколькими выборами, таких как группа чек-боксов, имя поля должно заканчиваться двумя квадратными скобками []. Распространенной ошибкой будет удаление двух скобок, тогда поле не будет иметь несколько значений, когда отправляется форма.
- Вы можете нажать на значок “Редактировать” (Edit), чтобы открыть “подробности” поля и сделать необходимые изменения.
- Вы можете перетащить поля для их сортировки с помощью значка “Перетаскивания” (Drag).
Раздел "Редактирования" (Edit) элемента/поля имеет много вариантов для изменения, вот некоторые из наиболее часто используемых настроек:
- Имя поля (Field Name) не должно быть пустым и должно содержать уникальную строку без пробелов.
- Поле ID (Field ID) может быть оставлено без изменений, он может быть использован в некоторой дополнительной настройке, как CSS стиля или ссылки на JavaScript.
- Поле Этикетка (Label), где вы должны написать название поля, это то, что пользователи будут видеть рядом с вашим полем.
- Дополнительная этикетка (Sub Label) - это еще один ярлык, который отображается в небольшом тексте под полем, это полезно для обеспечения некоторой подсказки о поле.
На вкладке "Проверка" (Validation) вы можете включить различные правила проверки для вашего поля.
В зависимости от типа поля, в панели редактирования элементов может быть больше разделов. Раздел “Динамических данных” (Dynamic Data) поможет вам загрузить множество полей значений/опций с данными из различных источников.
Вы можете найти вкладку “События” (Events) в настройках некоторых элементов. Она поможет вам назначить определенные события для поля, основываясь на выбранных значениях:
- Значение, при выборе которого сработает событие
- Действие, происходящее при срабатывании события, например, это может быть действие “показать поле” или “спрятать поле”. Доступно множество действий.
- Идентификатор целевого поля, на которое будет действовать это событие
Обратите внимание, если тип установлен в "Пользовательский код" (Custom Code), то любые изменения, которые вы сделаете на вкладке «Оформление» (Designer), не повлияют на выходную форму.
Раздел “Настройка” (Setup) с одержит наиболее мощные функции, доступные пользователям ChronoForms, мы постараемся объяснить здесь, как это работает:
- Это событие «При загрузке» (On Load). Это событие наступает при отображении формы. Вы также можете назвать событие «страницей», поскольку событие загрузки – это страница формы, отображаемая, когда загружается форма. Обратите внимание, что каждое событие/страница имеет различный url, вначале совпадающий с url формы, но оканчивающийся на &event=EVENT_NAME. Однако событие «загрузки» загружается по умолчанию, если параметр «событие» не указан.
- Это событие «При отправке» (On Submit), которое наступает/обрабатывается, когда форма отправлена. Это поведение по умолчанию, но вы можете изменить целевое событие отправки, изменяя HTML настройки действия, что не рекомендуется, если только у вас не мультистраничная форма или вы знаете что делаете.
- Кнопка «Добавить новое событие» (Add new event) поможет вам добавлять новые события (страницы) к вашей форме. Доступ к новым событиям осуществляется с использованием url формы + "&event=THE_EVENT_NAME".
- Основные Действия (Basic) – это функциональные блоки вашей формы, без которых форме нечего будет делать. Они разбиты на категории по их главным функциям. На момент написания этого пособия 5-я версия содержала около 50 действий, а 4-я – около 75.
На этом изображении показано, как выглядит созданное событие/страница. Например, на данное событие указывает ссылка: index.php?option=com_chronoforms5&chronoform=FORM_NAME&event=new
1.Действие HTML (HTML Render) используется наиболее часто. Предназначено для вывода кода формы на страницу. Независимо от того, создан ли код с использованием вкладки "Оформление" (Designer) или пользовательского кода (Custom Code), действие просто отобразит его. Поэтому оно обычно помещается в событии «при загрузке» (On Load), чтобы показать форму, когда она загружена.
2.Действие Email – второе по частоте использования. Большинство пользователей хотят получать email-сообщения из своих форм, и это именно то, что делает данное действие. Однако, чтобы получать сообщения, вначале следует настроить действие.
Настройки, показанные здесь, являются обязательными, чтобы действие email работало как следует.
- Опция «Включено» (Enabled). Чтобы действие работало, оно должно быть включено.
- Поле «Кому» (To) должно содержать не менее одного электронного адреса. Адреса разделяются запятой.
- Поле Тема (Subject) содержит тему сообщения.
- В поле Имя отправителя (From Name) указывается имя отправителя сообщения. Должно содержать корректную строку.
- Поле Email отправителя (From Email) не может быть пустым. В большинстве случаев следует указать некоторый адрес на вашем домене, иначе сообщение может быть заблокировано или помечено как спам.
Динамические поля позволяют использовать данные формы в качестве настроек электронной почты Например, в поле «Динамическое кому» будет занесено содержимое поля формы с электронным адресом, который будет использоваться как целевой.
Вложенные События - «Успех» (On success), «Неудача» (On Fail)
1. Некоторые действия являются более сложными и содержат вложенные события. Возьмем для примера действие «Загрузка файлов» (Files Upload). Событие «Успех» (On success) наступает, когда файл успешно загружен, тогда как событие «Неудача» (On Fail) наступает при возникновении какой-либо проблемы с загрузкой.
Обратите внимание, что вложенные события не повлияют на основной процесс выполнения. Это значит, что независимо от результата загрузки событие «отправки» продолжит выполняться, если только ему не будет указано делать что-то иное.
2. Так как мы хотим известить пользователя, что имеется проблема с загруженным файлом, нам следует добавить «Цикл события» (Event Loop) во вложенное событие «неудачи». Этот цикл приостанавливает выполнение и запускает событие «загрузки». Это значит, что после «загрузки файлов» не происходит обработка никаких действий, а форма будет отображена вновь.
3. Действие Отладки (Debugger) является очень важным для поиска проблем с вашей формой. Большинство действий записывают сообщения отладки, которые могут быть отображены этим действием (поэтому это последнее действие для отображения отчётов всех предыдущих действий).
Вкладка «Антиспам» (Anti Spam)
1. Раздел действий «Антиспам» (Anti Spam) часто используется. Chronoforms располагает многими инструментами для борьбы со спамом, включая Captcha (по умолчанию), ReCaptcha, контрольный вопрос (Security Question) и проверка ловушки для хакера (Honeypot).
Самым простым для настройки является ловушка для хакера (Honeypot). Все, что нужно сделать, - это добавить два действия, одно из которых загружает ловушку, а другое – проверяет её.
2. Действие загрузки логически размещается при загрузке формы. Оно должно быть перед отображением формы (выше действия HTML), чтобы возыметь эффект перед её выводом.
3. Действие проверки должно быть помещено после отправки формы (в событии отправки). Оно должно быть запущено первым делом в событии «отправки», чтобы заблокировать любые попытки спама прежде, чем будут предприняты другие действия.
Во вкладке «Локализация» (Locales) можно добавить многоязычную поддержку в вашу форму.
- Нажмите кнопку «Добавить новую локализацию» (Add new locales) для создания нового словаря для формы.
- Введите тег языка (Language tag) в соответствующем формате, например, en_gb для английского языка и de_de для немецкого, и т.д. Код языка должен совпадать с кодом в менеджере языков.
- В поле «Строки языка» (Language strings) введите строки формы для перевода вместе с самим значением перевода. Например, если метка одного из полей - MY_LABEL, то здесь может быть указано следующее: MY_LABEL=Моя метка.
В любое время можно сохранить вашу форму в правом верхнем углу - «Сохранить» (Save). Также можно быстро ее протестировать - «Тест формы»(Test form). Тест не сработает, если вы не сохранили форму или не добавили действие «HTML» в событие «Загрузки» (On Load) (если хотите видеть вывод полей формы по умолчанию).
Перевод – trinityDream (Lastfm.ru)
Cтраница разработчика компонента Chronoform v5 и оригинала Руководства для начинающих - www.chronoengine.com