Форма и поля

Форма — это поля на экране попапа и кнопка, которая их отправляет. Посетитель заполняет поля, нажимает кнопку, и его данные становятся заявкой: она появляется в разделе Заявки и уходит в подключённые интеграции.

Форму можно поставить на любой экран: в модальное окно, в попап у края страницы, на любой шаг попапа из нескольких экранов. У квиза контакты собирает его собственный вопрос «Контакты», подробнее — в статье Квизы. Игра тоже может отправить форму сама, после выигрыша, подробнее — в статье Игры.

1. Откройте попап в редакторе. В панели «Блоки» найдите группу «Формы» и перетащите нужные поля на экран.
2. Выберите поле на холсте и настройте его в панели справа (раздел «Настройки поля» ниже).
3. Добавьте блок «Кнопка» и в её настройках выберите «Действие» → «Отправить форму».
4. Добавьте экран успеха, например «Спасибо! Мы скоро позвоним». Экран добавляет кнопка «+» на плашке экранов внизу холста.
5. На вкладке «Сбор данных» подключите интеграции — туда будут уходить заявки.
6. Проверьте форму в «Просмотре попапа» (значок глаза в шапке редактора).

Оценку звёздами или смайликами собирает блок «Рейтинг» из группы «Интерактив». Оценка тоже уходит в заявку. В настройке «После выбора оценки» можно выбрать «Сразу отправить» — тогда заявка уходит без кнопки, как только посетитель поставил оценку.

Настройки поля собраны в панели справа по разделам: «Поле», «Размер», «Оформление» и «Дополнительно».

В разделе «Поле» у большинства полей есть:

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

Свои настройки есть у отдельных полей:

• Многострочный текст — «Количество строк»: высота поля.
• Число — «Минимум», «Максимум» и «Шаг». Число меньше минимума или больше максимума форма не примет. «Шаг» задаёт, какие числа подходят: при шаге 1 — только целые, при шаге 0.5 — ещё и половинки.
• Выбор варианта — «Варианты»: у каждого варианта есть «Название», которое видит посетитель, и «Значение», которое приходит в заявку. «Расположение» ставит варианты столбиком или в строку.
• Галочка — «Подпись» и «Ссылки в подписи», раздел «Галочка согласия» ниже.
• Email и Телефон — «Свой шаблон проверки», раздел «Свой шаблон проверки» ниже.

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

Новое поле сразу получает имя вида phone_a1b2c3d4. Под этим именем ответ посетителя приходит в интеграции: в Webhook, в Битрикс24, в таблицы и в CRM.

Если ваша CRM ждёт поля с определёнными именами, впишите их в «Имя поля (для отправки формы)» до того, как подключите интеграцию. Если поменять имя у попапа, который уже собирает заявки, интеграция перестанет узнавать это поле. Тогда поправьте имя и в настройках интеграции.

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

Правильность ответа форма проверяет у каждого заполненного поля, даже у необязательного:

• Email — адрес почты написан правильно;
• Телефон — номер набран полностью, раздел «Поле «Телефон»» ниже;
• Число — число не меньше «Минимума», не больше «Максимума» и подходит под «Шаг».

Если что-то не так, посетитель видит это сразу после нажатия кнопки:

• все неправильно заполненные поля на две секунды подсвечиваются красным;
• курсор переходит к первому такому полю;
• если это поле ввода — текстовое поле, Email, Телефон, Число или Дата, — рядом с ним появляется подсказка с причиной. Текст подсказки показывает браузер посетителя на своём языке.

Поля проверяются так же, когда кнопка с действием «Перейти по правилам» ведёт посетителя дальше, и перед игрой, если игра отправляет форму сама. Какие поля игра проверяет перед стартом, задаёт её настройка «Какие поля проверять перед игрой», подробнее — в статье Игры.

У полей «Email» и «Телефон» есть настройка «Свой шаблон проверки (необязательно)». Обычно её оставляют пустой: Email и Телефон и так проверяют ответ.

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

У поля «Телефон» шаблон выключает оформление номера: номер приходит в заявку так, как его ввёл посетитель.

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

Российский номер. Посетитель набирает цифры как привык: с 8, с +7 или сразу с кода оператора. Поле расставляет скобки, пробелы и дефисы:

Если посетитель исправляет цифру в середине номера, курсор остаётся на месте и не прыгает в конец.

Номер другой страны. Номер начинают с «+» и кода страны, например +375 29 123-45-67. Такой номер остаётся в том виде, в котором его ввели: с пробелами, дефисами и скобками. В номере может быть до 20 цифр.

Какие номера не принимаются. Форма не отправится, если:

• российский номер набран не полностью, например +7 (999) 123-45;
• номер набран без кода города, например 1234567.

Номер другой страны без «+» поле примет за российский и превратит в номер вида +7 (…). Если среди посетителей есть жители других стран, напишите об этом в «Подсказке» поля, например: «Номер другой страны — с + и кодом страны».

Что видно в заявке. Российский номер приходит в заявку и в интеграции всегда в одном виде — +7 (999) 123-45-67, как бы его ни ввёл посетитель. Номер другой страны приходит так, как его ввели. Битрикс24, Email, Telegram и MAX принимают оба вида. Если заявки уходят в вашу систему через Webhook и система сама разбирает номер, проверьте, что она понимает вид +7 (999) 123-45-67.

Галочка подходит для согласия с политикой конфиденциальности или с условиями акции.

1. Добавьте на экран поле «Галочка».
2. В «Подписи» напишите текст, например «Я принимаю политику конфиденциальности».
3. В «Ссылках в подписи» добавьте ссылку. В «Слова из подписи» впишите слова, которые станут ссылкой, например «политику конфиденциальности», а в «Адрес» — адрес страницы, например /privacy.
4. Если без согласия отправлять форму нельзя, выберите «Обязательное» — «Да».

В заявку приходит, отметил ли посетитель галочку.

Скрытое поле посетитель не видит: на экране его нет. Значение поле берёт само и отправляет в заявку вместе с остальными полями. Так в заявку попадает, например, рекламная кампания, из которой пришёл посетитель, или название акции.

1. Перетащите на экран поле «Скрытое поле» из группы «Формы».
2. В «Имени поля в заявке» нажмите одну из кнопок: «Источник», «Канал», «Кампания», «Ключевое слово» или «Объявление». Можно вписать и своё имя, например yclid.
3. В «Откуда брать значение» выберите источник значения.

Кнопка «Добавить все UTM-метки» добавляет на экран скрытые поля сразу для всех пяти UTM-меток, которых на экране ещё нет.

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

UTM-метки и идентификаторы клика рекламных систем (yclid, gclid и другие) — это метки посетителя. Попап помнит их, пока открыта вкладка браузера: если посетитель пришёл по рекламной ссылке, а форму заполнил через несколько страниц, метки всё равно попадут в заявку. Если посетитель снова пришёл по ссылке с другими метками, в заявку попадут новые метки. Остальные параметры поле берёт из адреса той страницы, на которой открыт попап.

Как сайт передаёт данные в попап, описано в статье Данные сайта.

Если значения нет — посетитель пришёл без метки или сайт не передал данные, — скрытое поле уходит в заявку пустым. Скрытое поле никогда не мешает отправить форму.

Метки посетителя можно передать в интеграции и без скрытых полей, подробнее — в статье Интеграции. Скрытое поле нужно, чтобы метка была видна в самой заявке как обычное поле формы.

Форму отправляет кнопка с действием «Отправить форму». После нажатия:

1. Форма проверяет поля (раздел «Обязательные поля и ошибки»).
2. Заявка уходит в раздел «Заявки» и в интеграции попапа.
3. Попап переходит дальше: по правилам переходов, если они есть, иначе на экран успеха. Если экрана успеха нет, попап закрывается.

Если заявку не удалось отправить, попап открывает экран ошибки. Без экрана ошибки попап остаётся на месте и показывает сообщение «Не получилось отправить». Введённые данные не пропадают, и посетитель может отправить форму ещё раз.

Если поля стоят на нескольких экранах, ответы со всех экранов уходят в одну заявку. Экраны успеха и ошибки, а также правила переходов описаны в статье Попап из нескольких экранов.

Совет. В «Просмотре попапа» заявка не отправляется: просмотр только показывает, на какой экран перейдёт попап. Чтобы проверить заявку целиком, отправьте форму с сайта и найдите заявку в разделе «Заявки».