Формы

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

Структура Формы

Форма структурно состоит из трех дочерних элементов:

• Состояние По умолчанию (Default State) – содержит все элементы формы

• Состояние Успешной отправки (Success State) – содержит сообщение, возвращаемое после успешной отправки формы

• Состояние Ошибки (Error State) – содержит сообщение, которое выводится в случае ошибки при отправке формы

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

Для управления Формой в состояниях Успешной отправки и Ошибки нужно переключить состояние Формы в Настройках. Подробнее — Состояния Формы и ее полей.

При создании Форма содержит следующие элементы:

• Заголовок формы (текстовый элемент)
• Поле ввода имени
• Поле ввода электронной почты
• Кнопку Отправить

Элементы Формы

В панели Элементов (Elements) кроме самого виджета Формы находятся отдельные ее элементы, которые можно добавить в Форму.

Строка ввода (Input)

Используется для сбора однострочных данных.

Строка ввода может использоваться для ввода данных нескольких типов:

• Обычный текст (Plain)
• Электронная почта (E-mail)
• Телефон (Phone)
• Число (Number)
• Дата (Date)

Выбрать нужный тип данных можно в Настройках на правой панели в поле Тип (Type).

Для типа данных Телефон существует дополнительная настройка — Маска поля (Field mask), которая позволяет выбрать шаблон ввода номера телефона для разных стран.

После выбора страны в поле появляется соответствующий шаблон.

Установка типа данных для Строки ввода позволяет пользователям вводить данные только выбранного типа. При вводе некорректных данных выведется ошибка.

Текстовая область (Textarea)

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

Чекбокс (Checkbox)

Элемент для ответа на вопрос по типу “да” или “нет”. Его лучше всего использовать для данных, когда пользователь может согласиться или нет с какими-то условиями.

Чекбокс позволяет сделать выбор для одного варианта (вопроса) или же добавить несколько вариантов для множественного выбора. Добавить варианты можно в Настройках, нажав на кнопку + в разделе Элементы списка (List Items).

Вы можете также удалить вариант, нажав на кнопку – , или поменять варианты местами, перетащив за иконку слева от названия.

Для изменения названия варианта кликните на нужное название и введите новое.

Радио-кнопки (Radio)

Позволяют пользователю выбрать один вариант из нескольких.

Так же, как для Чекбоксов, для Радио-кнопок можно добавить варианты в Настройках.

Поле выбора (Select)

Раскрывающийся список с возможностью выбора одного или нескольких элементов списка.

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

По умолчанию для пользователя возможен выбор только одного элемента из списка. Чтобы сделать возможным выбор одновременно нескольких элементов, нужно включить опцию — Разрешить множественный выбор. В этом случае пользователь сможет выбрать несколько вариантов из списка с помощью клавиш Shift или Ctrl.

Кнопка Отправить (Submit Button)

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

Кнопка Отправить есть у каждой созданной формы по умолчанию.

Добавление элементов в Форму

Вы можете добавить в Форму любой элемент Формы, например Поле ввода (Input) или Чекбокс (Checkbox), чтобы настроить нужный функционал.

Также в Форму при необходимости можно добавить обычные элементы или виджеты, например, Текст с описанием или Div-блок для группировки элементов Формы.

Для добавления элемента в Форму:

• перетащите в Форму нужный элемент из панели Элементов (Elements)
• или выберите Форму (блок Default State) на Холсте или вкладке Слоев и кликните на название нужного элемента в панели Элементов (Elements)

Структура элементов Формы

Каждый элемент формы (кроме кнопки Отправить) представляет собой группу элементов, имеющих следующую структуру:

• Метка поля (Field Label) - текстовый элемент с названием поля, которое отображается на странице. Текст Метки поля можно отредактировать, можно также удалить Метку со страницы.
• Поле (название в зависимости от элемента) — непосредственно элемент Формы, с которым взаимодействует пользователь.
• Сообщение об ошибке (Error Message) - сообщение, которое выводится при ошибке в поле (например, если обязательное поле не заполнено). Редактировать Сообщение об ошибке можно только переключив состояние Формы. Подробнее — Состояние полей Формы.

Например, структура группы Строки ввода (Input Group) выглядит следующим образом:

Настройки элементов Формы

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

На вкладке Настройки правой панели можно посмотреть параметры для каждого элемента Формы. Эти параметры будут различаться в зависимости от типа элемента. Например, для Поля ввода существует параметр Тип, а для Чекбокса, Радио-кнопок и Поля выбора - Элементы списка.

У всех полей Формы (кроме кнопки Отправить) обязательно есть два параметра:

• Название поля (Field name) - заголовок, передающийся в данные с результатами отправки формы.

• Обязательное поле (Required field) - если параметр установлен, пользователь не сможет отправить форму, не заполнив это поле.

  

Фоновый текст (Placeholder)

Элементы Строка ввода и Текстовая область дополнительно имеют настройку Фоновый текст (Placeholder). В этой настройке хранится текст, который отображается в поле до ввода в него текста и пропадает в тот момент, когда пользователь начинает вводить текст в поле. Это может быть название поля или образец текста.

Фоновый текст можно настроить на вкладке Настройки в разделе UI состояние.

Состояния Формы и ее полей

В Настройках Формы вы можете переключать Состояния Формы в разделе UI состояние (UI state):

Состояния Формы

Переключая Состояния Формы в Настройках, можно увидеть на Холсте, как выглядит Форма в этом состоянии:

• По умолчанию (Default State) - состояние по умолчанию до того, как пользователь начнет взаимодействие с Формой.

• Успешная отправка (Success State) - состояние Формы после ее успешной отправки. В этом состоянии пользователю выдается сообщение об успешной отправке, которое можно изменить и настроить по своему усмотрению.

• Ошибка (Error State) - состояние Формы при возникновении проблем с ее отправкой. В этом состоянии пользователю выдается сообщение об ошибке, которое можно изменить и настроить по своему усмотрению.

  

Редактирование сообщений об успешной отправке и ошибке

Для редактирования сообщения об успешной отправке Формы:

• выберите Форму (на Холсте или на вкладке Слоев)

• в Настройках в параметре UI состояние выберите Успешно (Success)

• отредактируйте текст сообщения об успешной отправке на Холсте

Для редактирования сообщения об ошибке:

• выберите Форму (на Холсте или на вкладке Слоев)

• в Настройках в параметре UI состояние выберите Ошибка (Error)

• отредактируйте текст сообщения об ошибке на Холсте

  

Состояния полей Формы

У поля Формы может быть два состояния:

• По умолчанию (Default) — состояние поля по умолчанию до того, как пользователь начнет взаимодействие с Формой.
• Ошибка (Error) — состояние поля при возникновении в нем ошибок при отправке Формы. В этом состоянии пользователю выдается сообщение об ошибке.

Стилизация Формы

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

Например, можно расположить поля формы горизонтально. Для этого:

• Поместите поля Формы в новый Div-блок.

• Установите в стилях режим Flex и горизонтальное направление, а также параметры выравнивания

Стилизация элементов Формы

Вы можете также стилизовать отдельно все элементы Формы. Можно установить стили для всей группы элемента, например, задав ему отступы. Также можно стилизовать отдельно метку и само поле элемента.

Например, вы можете изменить шрифт заголовка Формы и меток полей, размер и фон полей ввода, цвет и размер кнопки и т.п.

Стилизация строки ввода

У Строки ввода можно заменить Метку поля на Фоновый текст внутри поля. Для этого:

• Метки полей нужно скрыть (в настройках элемента метки в разделе Display) или удалить элемент метки с Холста.

• Добавить Фоновый текст в Настройках строки ввода (для элемента Input).

Стилизация поля Select

Чтобы стилизовать текст в списке выбора, вам нужно задать стили для слоя Select.

Для этого выберите слой Select на холсте или в левой панели и настройте стили на правой панели Дизайн в разделе Текст. Вы можете настроить шрифт, начертание, размер, цвет, выравнивание текста в поле, строчные/прописные буквы.

Вы можете задать фон для поля Select на панели Дизайн в разделе Внешний вид:

1. Настроить фон для выбранной опции в поле Select — с помощью свойства Фон (Fill).

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

2. Настроить фон для выпадающего списка — с помощью свойства Цвет фона (Background color).

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

Стили выпадающего списка можно увидеть только в режиме предварительного просмотра или после публикации проекта.