К сожалению, в CF5 инструменты для настройки отображения форм обратной связи в модальном окне не предусмотрены и решить эту задачу штатными средствами не получится — только с помощью сторонних или собственных расширений Joomla. Но для форм CF6 такой инструмент есть.

Элемент-контейнер «Modal area» в компоненте Chronoforms 6 относится к инструментам, отвечающим за представление полей формы обратной связи на сайте, и размещается во вкладках «Представления» (views) настроек каждой из страниц создаваемого приложения.

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

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

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

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

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

Рис. 1

  • Собственные настройки элемента:
    1. «Метка конструктора» (Designer label) — служебная метка, которая больше нигде не отображается, кроме как в окне редактирования.
    2. «Имя» (Name) — имя DOM элемента, используемое при его обработке скриптами. Должно быть уникальным, без пробельных или спецсимволов.
  • Редактор настроек для popup окна:
    1. «Заголовок модального окна» (Popup header) — заголовок, отображаемый при показе всплывающего окна с формой на сайте.
    2. «Показывать при загрузке страницы» (Show on page load) — переключатель, представляющий собой один из вариантов отображения popup окна. Если установлен в положение «Да» (Yes) — то форма будет показана немедленно по событию load той страницы, где она расположена.
    3. «Показать через X милисекунд» (Display after x miliseconds) — поле настроек с типом «строка», также являющееся одним из вариантов показа формы. Значение должно быть представлено в формате целого числа (integer) без указания единицы измерения. Если в этом поле есть некоторое значение, то форма будет отображена через указанное количество миллисекунд после загрузки страницы сайта, где она расположена.
    4. «Показать по клику…» (Display on click of) — один из вариантов показа, в случае использования которого форма будет отображена по клику на элемент-триггер, селектор которого указан в поле. Триггером может быть любой элемент DOM, присутствующий на странице с формой, не обязательно входящий в состав ее содержимого. Селектор класса или идентификатора должен иметь соответствующие символы — точку (если указывается класс) или решетку (если — идентификатор).
    5. «Показать после скроллинга на X пикселей» (Display after scroll space) — поле настроек с типом «строка». Также один из вариантов отображения формы. Значение должно быть представлено в формате целого числа (integer) без указания единицы измерения. Если в этом поле есть некоторое значение, то форма будет отображена после скроллинга вниз на указанное количество пикселей той страницы сайта, где она расположена.
    6. «Размер модального окна» (Modal size) — переключатель размера окна, имеющий три варианта: «Full screen», «Small», «Smaller» и «Smallest».
    7. «Базовый шаблон» (Basic layout) — переключатель шаблонов, предлагающий два варианта — «Да» (Yes) и «Нет» (No). Если установлен в положение «Нет», то всплывающее окно отображаться не будет, т. к. данный шаблон не имеет фрейма для отображения модальных окон.
    8. «Светлый фон» (Light background) — переключатель, также предлагающий два варианта. Определяет цвет «подложки» под модальным окном. Если установить в положение «Да» — фон будет светлым, иначе будет использоваться темный фон.
    9. «Вне тела документа» (Detachable) — переключатель, определяющий расположение контейнера модального окна в структуре DOM. Если установлен в положение «Да», то фрейм будет расположен перед закрывающим тегом body.
    10. «Скроллинг контента» (Scrollable content) — настройка, позволяющая устанавливать возможность скроллинга содержимого формы в тех случаях, когда оно превышает высоту экрана. Если переключатель установлен в положение «Нет», то высота формы, а следовательно и высота модального окна, будет увеличена автоматически в соответствии с высотой контента.
    11. «Возможность закрыть окно» (Scrollable content) — эта настройка отвечает за возможность для пользователя закрывать окно с формой по клику на любую область вне ее (фон фрейма, расположенного слоем ниже).
    12. «Иконка „Закрыть“» (Close icon) — переключатель отображения иконки «Закрыть» (представляет собой крестик в правом верхнем углу формы). Если его значение — «Нет», то иконка отображаться не будет.
  • Область контейнера:
    1. Область контейнера, предназначенная для расположения элементов, которые предполагается отображать во всплывающем окне.

Настройки, описанные в пунктах списка 4–7 не сочетаются между собой и не могут применяться одновременно, за исключением поля «Показывать при загрузке страницы» со значением «Нет», которое может применяться совместно с каким-либо одним из остальных вариантов.

Настройка модального окна на формах Chronoforms 6

Настройка модального окна на формах Chronoforms 6, рекомендуемая разработчиками, состоит в следующем:

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

Настройка  модального окна на формах  Chronoforms 6

Рис. 2

  1. Чтобы разместить «Modal area» на странице проекта, нужно выбрать соответствующий визуальный элемент в группе «Areas» и перетащить его мышью в нужную область. Затем произвести все, необходимые для отображения самого pupup окна, настройки (см. выше «Интерфейс управления элементом Modal area в конструкторе Chronoforms 6»).
  2. Поместить в область контейнера «Modal area» другой элемент-контейнер — «Form area», и настроить его (см. рис. 3). Это сделать необходимо, т.к при изменении типа приложения на «Пользовательский» становятся недоступными стилизация и прочие функции формы на этапе загрузки страницы по умолчанию. А в случае присутствия такого элемента, с ним «возвращается» и весь его функционал.
  3. В тело контейнера «Form area» перемещается все содержимое формы, для отображения которого требовалось создание модального окна. В остальном настройка этого содержимого ничем не отличается (см. рис. 3).
  4. На той же странице проекта, выше «Modal area», нужно расположить элемент-триггер (см. рис. 3), по нажатию на который произойдет вызов всплывающего окна с формой. Если ваша форма открывается при загрузке страницы, через определенное время после загрузки или после скроллинга страницы вниз на указанное количество пикселей, элемент-триггер не нужен.

Содержимое страницы формы Chronoforms 6 для отображения в модальном окне

Рис. 3

В данной статье раздела «Документация» настройка модальных окон представлена для версий Chronoforms 6.1.x и режима конструтора «New v6.1 mode». Но информация из раздела «Статьи», относящаяся к более ранним билдам компонента, является актуальной.