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

В самом же конструкторе присутствует ряд инструментов, специально предназначенных для дополнительной стилизации элементов форм. Одним из таких инструментов является элемент-контейнер «Multi field area». Его единственной задачей является позиционирование на странице формы вложенных в него элементов в виде строки.

Этот инструмент относится к настройкам клиентской части формы и находится в группе «Areas» вкладки «Представления» (Views) в разделе «Страницы» (Pages) редактора формы.

Как и большинство контейнеров из группы «Аreas», визуально он разделен на три части:

  1. Собственные настройки.
  2. Настройки позиционирования элементов внутри контейнера
  3. Контейнер для элементов

Настройка параметров «Multi field area» на формах Chronoforms 6

Настройка параметров «Multi field area» на формах Chronoforms 6 осуществляется в его редакторе:

Chronoforms 6 | Элемент-контейнер «Multi field area»

Рис. 1

  • Собственные настройки:
    1. «Метка конструктора» (Designer label) — служебная метка, отображаемая только в конструкторе формы. Заполняется вручную и может содержать краткое описание.
    2. «Имя» (Name) — уникальное имя соответствующего DOM элемента. Используется при его обработке скриптами, поэтому не должно содержать пробельные или спецсимволы.
  • Настройки позиционирования элементов внутри контейнера:
    1. «ID поля» (ID) — идентификатор контейнера на сайте, также используемый скриптами. Также должен быть уникальным и не содержать пробельных или спецсимволов.
    2. «Количество полей» (Number of fields) — параметр, определяющий, на какое количество равных частей следует разделить контейнер-строку со включенными в него элементами. Поддерживает разделение от 2 до 6 частей, а также значение «Авто» (Auto). При последнем управление шириной вложенных элементов будет отключено, а их размещение в строке будет определяться их содержимым либо их собственными настройками стилизации.
    3. «Inline» — переключатель, отвечающий за позиционирование меток label у вложенных элементов. Если установить в положение «Да» (Yes), то метки будут отображаться слева. Иначе — сверху.
  • Контейнер для элементов:
    1. Тело контейнера предназначено для расположения других элементов (полей ввода) формы.

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

«Multi field area» на форме Chronoforms 6

Рис. 2

На рисунке 2 показаны два варианта отображения формы согласно настройкам, описанным на рисунке 1.