Форма: дизайн

Форма – это виджет. Её можно выбрать в верхней части редактора и переместить внутрь любой секции или использовать шаблон секции, где уже размещены стандартные формы.

Секция "Форма"

Если нам подходит одна из стандартных секций, то выбираем одну из них: здесь есть вертикальные и горизонтальные варианты форм, а также формы, открывающиеся по клику. Заголовок, описание, стиль и цвет формы можно настроить.

Виджет "Форма"

Если ни одна их стандартных секций не подходит или форму нужно разместить в уже созданную секцию, используем виджет. Есть несколько виджетов:

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

Форму также можно разместить в окне, открывающемся по клику. Для этого используем виджет "Форма с кнопкой"

Дизайн формы

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

Стиль формы

Во вкладке "Вид" в настройках формы можно настроить её стиль.

Цвет формы

Там же во вкладке "Вид" настраиваем цвет: его можно задать кодом rgb, выбрать из палитры или из глобальных цветов. Если для страницы выбраны глобальные цвета, то для формы также можно задать один из них. Глобальные цвета задаются в настройках страницы.

Размер формы

Ширину формы можно поменять, потянув за левый или правый край.

А также настроить высоту строк и отступ:

Скругление формы

В настройках можно задать скругление обводки. И скругление полей внутри формы.

Положение текста

Заголовок формы можно оставить или скрыть. А также настроить положение текста внутри формы: слева от поля, над ним или внутри.

Дополнительные настройки формы доступны в отдельной вкладке& Здесь можно настроить фон, границы, тень, отступы и анимацию, а также задать дополнительные параметры.

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

Какие бывают формы, сколько их должно быть на лендинге, как добавить форму и где её разместить – в предыдущем материале.

ЧТО ЕЩЁ ПОЧИТАТЬ