Список блоков
Текущий блок выделен красной точкой.
Палитра
Набор цветов, используемый в дизайне формы. Выбрав новую палитру, вы измените цвета всей формы. Если цвет отсутствует в палитре, вы не сможете установить его для надписей или фона.
Параметры текущего блока
Набор параметров для редактирования текущего блока. Для разных блоков параметры могут существенно отличаться.
Предпросмотр
Все ваши изменения в режиме реального времени отображаются в правой части редактора.
Ярлык формы
Вы можете посмотреть, как будет выглядеть ярлык, если вы используете форму по ярлычку.

Блоки формы

Каждая форма состоит из блоков, которым можно задать дизайн. Давайте их рассмотрим.

Обертки

Общая
Блок, в который завернута вся форма. В этом блоке вы можете задать главный цвет, шрифт и размеры.
Шапка
Блок, в который завернута «шапка» формы. Обратите внимание: если «шапка стоит в верхней части сайта (а в 99.9% это будет именно так), она выходит за рамки «тела» формы.
Тело
Блок формы, в который завернуты все поля для заполнения и кнопка для отправки.
Заголовок
Как правило, крупная надпись. Находится внутри «шапки» формы.
Подзаголовок
Как правило, более крупная надпись, чем основной текст, но меньше заголовка. Находится внутри «шапки» формы, под заголовком.
Вокруг поля
Блок, в котором находится название поля, само поле и его описание. Скорее всего, редактирование этого блока вам не понадобится, однако такая возможность есть.

Обертки всплывающей

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

Наследуются:

Все настройки из раздела «поля»
Все настройки из раздела «надписи»

Не наследуются:

Настройки шапки (включая заголовок и подзаголовок)
Настройки тела формы

Блоки типа «Обертки всплывающей формы» повторяют блоки типа «Обертки»:

Всплывающая
Шапка
Тело
Заголовок
Подзаголовок
Вокруг поля

К оберткам всплывающей формы добавляется новая:

Оверлей
Настройки блока, который накрывает сайт при появлении формы. Вы можете изменить цвет фона или фоновую картинку.

Надписи

Раздел содержит в себе все надписи, связанные с полями.

Название
Блок, который оборачивает все названия полей.
Подпись
Блок, который оборачивает подписи у полей.
Ошибка
Блок, который отвечает за отображение ошибок. Располагается рядом с полями.

Поля

Здесь находятся все настройки, связанные с полями в теле формы (за исключением ярлыка).

Строка

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

Блок имеет три состояния:

Обычное
Сфокусированное (:focus) — когда пользователь выделил поле
:placeholder — текст-подсказка или указатель места заполнения текстового поля

Текст

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

Блок имеет три состояния:

Обычное
Сфокусированное (:focus) — когда пользователь выделил данное поле
:placeholder — текст-подсказка или указатель места заполнения текстового поля

Чекбокс

Параметры чекбокса. В формах Formy не используется стандартный чекбокс, поэтому набор параметров может слегка удивить.
Параметры делятся на 4 группы:

Обычный
Чекбокс в своем обычном состоянии: не отмеченный, без фокусировки.
Сфокусированный
То есть выделенный. Данное состояние появляется, если пользователь перебирает поля при помощи клавиши Tab.
Отмеченный
Чекбокс в отмеченном состоянии — с видимой галочкой.
Галочка
Галочка внутри чекбокса в состоянии «Отмеченный». Вы можете изменить ее цвет, как на скриншоте ниже.

Радио

Параметры радиокнопки. Для радиокнопки в формах Formy используется нестандартный набор параметров.

Параметры делятся на 4 группы:

Обычный
Чекбокс в своем обычном состоянии: не отмеченный, без фокусировки.
Отмеченный
Радиокнопка в отмеченном состоянии — с видимой точкой.
Сфокусированный
То есть выделенный. Данное состояние появляется, если пользователь перебирает поля при помощи клавиши Tab.
Точка
Точка внутри чекбокса. В отличии от чекбокса устанавливается при помощи блока, заключенного внутри радиокнопки.

Ошибка

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

Кнопка

Параметры кнопки внутри тела формы.

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

Вы можете использовать нижний слой, чтобы задать кнопке более сложный дизайн. Например, рамку в виде градиента, как на скриншоте ниже.

Каждый слой имеет 4 состояния:

Обычное
Наведена мышка (:hover)
Кнопка нажата (:active)
Идет загрузка (.btnLoading)

Если вы хотите отображать надпись на кнопке в верхнем регистре во всех состояниях, включите этот регистр в каждом состоянии.

Ярлык

Используется только в формах с ярлычком. Имеет аналогичные кнопке параметры. Обратите внимание: позиция ярлыка устанавливается его настройках параметров в конструкторе.

Прочее

Звездочка

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

Обертка чекбокса

Параметры обертки чекбокса. Задайте стиль для данного блока, если хотите визуально выделить строку с чекбоксом. Имеет два блока:

Базовый — обертка всего поляа, включая название и чекбокс.
Название — обертка названия.

Обертка радио

Параметры обертки радиокнопок. Задайте стиль для данного блока, если хотите визуально выделить строки с радио. Имеет два блока:

Базовый — обертка всего поляа, включая название и радиокнопку.
Название — обертка названия.

Ссылка

Параметры отображения ссылок в форме. Имеет 4 состояния:

Базовый
:hover — мышка наведена на ссылку
:visited — пользователь уже переходил по данной ссылке
:active — при клике мышкой на ссылку

Всплывающий текст

Параметры дополнительно всплывающих над формой окон с текстом. Например, открытой политики конфиденциальности.

Обертка

Блок, в который завернут все всплывающее окно. В этом блоке вы можете задать главный цвет, шрифт и размеры.

Заголовок

Параметры заголовка всплывающего текста.

Подзаголовок

Параметры подзаголовка всплывающего текста.

Параграф

Параметры основного всплывающего текста.

Крестик

Параметры крестика, с помощью которого закрывается окно.