Дизайн

Общие настройки

Для оформления в QForm есть готовые решения. Они помогают настроить внешний вид и отдельные элементы.

Для этого необходимо открыть страницу «Конструктор» и перейти во вкладку «Дизайн»

В разделе «Общие настройки» выбирают тему оформления, настраивают размер и скругление полей.

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

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

Заголовки для полей

В этом разделе выберите расположение и отображение для заголовка и плейсхолдера. Для просмотра в готовом виде все изменения отображаются в секции «Пример»

Иконки

В этом разделе выберите, как установить иконку: внутри поля или снаружи, слева или справа

Выпадающий список

В этом разделе выберите, в каком виде будет выпадать список с вариантами: раздельно от поля или прикрепленный к нему. Также выберите вид иконки – с фоном или без фона

Настройки текста

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

Один из списка

В этом разделе выберите расположение радиокнопки для поля с одиночным выбором. По умолчанию пункты располагаются вертикально. Активируйте переключатель «Расположить пункты горизонтально», чтобы варианты выстроились в ряд

Несколько из списка

В этом разделе выберите расположение чекбокса для поля с множественным выбором: слева, справа, сверху или снизу

Загрузка файлов

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

Дата\Интервал и Время

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

Изображение

В этом разделе для поля «Изображение» можно выбрать выравнивание картинки, а также включить использование рамки – с отступом или без

Кнопка отправки

Оформите кнопку отправки под стиль формы или под общий дизайн сайта. Настройте размер шрифта, выберите анимацию при наведении, задайте цвет для фона и текста кнопки. Все изменения отображаются в секции «Пример». Также есть возможность использовать неактивное состояние при незаконченном заполнении. То есть, пока пользователь не заполнит форму до конца, кнопка не станет активной

Подсказки

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

На странице «Дизайн» в разделе «Подсказки» выберите расположение подсказки: внутри поля или снаружи, около заголовка или под полем

Успешная валидация и Ошибки

На странице «Дизайн» в разделах «Успешная валидация» и «Ошибки» выберите вариант отображения при правильном и ошибочном заполнении поля: в виде иконки внутри поля, снаружи или около заголовка, либо в виде подсветки