Пользовательский код и дополнительная стилизация в Chronoforms достаточно часто используются для кастомизации форм обратной связи. Для этого разработчики Chronoforms создали инструменты, позволяющие веб-мастеру без труда интегрировать собственный PHP, JS, HTML и CSS код, практически в любом месте формы.

Работа с инструментами интеграции пользовательского кода возможна только в расширенном режиме создания форм вне зависимости от версии компонента.

Основные правила интеграции собственного кода вне зависимости от версии компонента

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

  1. Php — <?php // ваш код…; ?>
  2. JavaScript — <script>// ваш код…</script>
  3. HTML — <html-тег>//ваш текст…</html-тег>
  4. Css — <style>ваша таблица стилей…</style>

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

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

Кроме того, в отношении всей формы действуют общие правила расположения скриптов и стилей.

При соблюдении формата стилей, они могут быть размещены где угодно на форме и будут действовать одинаково, вне зависимости от места расположения. То же правило действует и в отношении HTML-кода или неформатированного текста.

Исполнение кода, в том числе и с соблюдением всех правил формата, зависит от его местоположения на форме. То есть, целевые элементы, которые им обрабатываются, должны располагаться прежде самого кода в теле формы, либо в функции должно быть прописано событие окончания загрузки страницы.

Интеграция пользовательского кода и добавление стилей на этапе конструирования

На этапе конструирования формы в Chronoforms 5 для кастомизации можно использовать элемент «Custom». Он представляет собой контейнер, где может быть размещен пользовательский PHP, JS, HTML или CSS код.

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

Приведем несколько примеров работы с данным инструментом на формах Chronoforms 5:

  1. Пример № 1. Элемент «Custom». Html-, php- и css-код с результатами работы.
  2. Пример № 2. Элемент «Custom». Php- и javascript-код с результатами работы.

В Chronoforms 6 для интеграции собственного кода на этапе создания интерфейса формы используются инструменты со вкладки «Конструктор» (Design). Все они находятся в группе «Custom». Это элементы «CSS», «HTML» и «JavasScript». В содержимое «HTML» может так же включаться php-код внутри соответствующих тегов.

При размещении соответствующего им кода, в теле элементов «CSS» и «JavaScript» открывающие и закрывающие css- и script-теги не нужны. Инструмент «JavaScript» также предусматривает исполнение кода по событию «onload» путем установки галочки «Добавить в событие загрузки формы» (Add inside domready event) в окне основных настроек.

В составе содержимого элемента «HTML» теги любого кода, кроме неформатированного теста, должны обязательно использоваться.

Примеры для данных элементов с формой Chronoforms 6:

  1. Пример № 1. Элемент «CSS». Дополнительная стилизация с описанием общего порядка действий.
  2. Пример № 2. Элемент «HTML». Код html и php.
  3. Пример № 3. Элемент «HTML». Код php, расположенный после целевого элемента.
  4. Пример № 4. Элемент «JavasScript». Код js и результаты его выполнения.

Пользовательский код и дополнительная стилизация на этапе обработки событий

В Chronoforms 5 для интеграции пользовательского кода на этапе обработки событий используются элементы «Load CSS», «Custom Code» и «Load JavaScript» из группы «Basic», которая находится во вкладке «Установка» (Install).

Для элементов «Load CSS» и «Load JavaScript» предусмотрены также мультистрочные поля, в которых можно приводить пути к файлам с кодом соответствующего формата. Кроме того, в тело кода любого из этих элементов может быть включен php-код с обязательным использованием тегов php.

В теле элемента «Custom Code» может быть приведен любой html-, php-, js- или css-код, обязательно заключенный в соответствующие теги.

Приведем примеры для некоторых элементов в Chronoforms 5:

  1. Пример № 1. Элемент «Load CSS». Пользовательская таблица стилей.
  2. Пример № 2. Элемент «Custom Code». Html -, php- и js-код с результатами работы.

Этап обработки событий Chronoforms 6 для добавления собственного кода или дополнительной стилизации формы предусматривает использование элементов «Custom code» (группа Basic) и «PHP» (группа Logic), расположенных на вкладке «Настройка» (Setup).

В содержимое «Custom code» можно включать любой html-, php-, js- или css-код с обязательным использованием соответствующих тегов, а в «PHP» — соответствующий ему интегрируется без таковых.

В «PHP» любой код, кроме собственно php, обязательно оборачивается в соответствующие теги.

Приведем примеры для данных элементов в Chronoforms 6:

  1. Пример № 1. Элемент «Custom code». Html-, php-, js- и css-код с результатами выполнения.
  2. Пример № 2. Элемент «PHP». Php-код и результат его срабатывания.

Хостинг SpaceWeb