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

В панели Элементов (Elements) кроме самого виджета Формы находятся отдельные ее элементы, которые можно добавить в Форму — Input, Textarea, Checkbox, Radio, Select, Upload File.

Как добавить элементы в Форму

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чекбокс (Checkbox)

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

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

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

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

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

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

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

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

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

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

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

Загрузка файлов (Upload File)

Виджет Upload File дает пользователям возможность загружать файлы в форму.

Для виджета можно настроить:

• отображение на сайте в разных состояниях: По умолчанию / Ошибка / Успешно
• доступные для загрузки типы файлов
• количество файлов, которые можно добавить в форму

Настройки виджета Upload File

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

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

• Тип файлов — выберите, какие типы файлов будут разрешены для загрузки: документы, изображения, видео, аудио или пользовательский тип (можно указать нужные расширения файлов).

• UI состояние — переключая состояния «По умолчанию», «Ошибка» и «Успешно», можно редактировать контент и стили виджета.

• Поле обязательно для заполнения — если чекбокс включен, пользователь не сможет отправить форму, не загрузив файл. По умолчанию чекбокс неактивен.

• Разрешить добавлять несколько файлов — можно разрешить пользователю загружать несколько файлов. По умолчанию чекбокс неактивен.

Состояния виджета Upload File

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

• В состоянии «По умолчанию» виджет содержит Метку поля (Field Label) и Кнопку загрузки (File button), состоящую из иконки и текста.

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

• В состоянии «Ошибка» у виджета дополнительно отображается Сообщение об ошибке (Error message).

Вы можете изменить текст сообщения об ошибке в настройках в поле Текст.

• В состоянии «Успешно» Кнопка загрузки скрыта. Вместо нее отображается Список загруженных файлов (File List) — название, размер и иконка удаления файла.

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

Как просмотреть или скачать отправленные файлы

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

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

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

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

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

Структура полей Формы

Каждое поле Формы, которое используется для ввода или выбора (Input, Textarea, Checkbox, Radio, Select), представляет собой группу элементов, имеющих следующую структуру:

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

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

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

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

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

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

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

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

  

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

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

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