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

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

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

• Как настроить таргетинг формы
• Какие есть действия после заполнения формы

Как открыть конструкторКак открыть конструктор

1. Создайте попап или встроенный блок — см. статьи «Как создать попап» и «Как создать встроенный блок».

2. Выберите пустой шаблон или любой шаблон с пометкой «Гибкий конструктор».

   

3. На странице кампании в блоке формы нажмите «Изменить».

Настройки формыНастройки формы

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

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

У формы нет общего фона. Фон, обводку и скругления задайте в настройках блока каждого экрана.

РазмерыРазмеры

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

Если ширина задана по ширине экрана, а высота — по высоте экрана, форма займет весь экран. В этом случае тень, затемнение экрана и расположение формы настроить нельзя.

Крестик закрытияКрестик закрытия

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

ТеньТень

Тень выделяет форму на фоне страницы. По умолчанию тень выключена.

Затемнение экранаЗатемнение экрана

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

Расположение формыРасположение формы

Расположение можно задать двумя способами:

• Относительно окна браузера — в одной из девяти позиций: по углам, по центру сторон или в центре экрана. Дополнительно можно задать отступы от краев экрана в пикселях.

  

• Относительно элемента страницы — попап показывается рядом с выбранным элементом сайта. Элемент укажите CSS-селектором: .someClass — для элемента с классом someClass, #someId — для элемента с идентификатором someId. Как найти селектор, читайте в статье «Как настроить таргетинг формы».

  

ЭкраныЭкраны

Экран — то, что клиент видит в форме в конкретный момент: например, экран с полями ввода, экран «Спасибо» или экран с промокодом. Форма может состоять из одного или нескольких экранов. Между экранами клиент переходит по кнопкам.

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

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

Как добавить и изменить экранКак добавить и изменить экран

• Добавить — нажмите «+» в панели экранов. Новый экран добавляется пустым, с общими настройками формы.
• Дублировать — создается полная копия экрана с дизайном и элементами. Поля ввода на копии получают тот же тип, что на исходном экране. В форме не может быть двух полей с типом «Email» или «Телефон», поэтому поменяйте тип поля и системное имя.
• Переименовать — название экрана видно в конструкторе и в текстах ошибок.
• Переместить — перетащите экран в панели. Вместе с порядковым номером экрана изменится и порядок переходов.
• Удалить — можно удалить любой экран, кроме последнего: в форме всегда есть хотя бы один экран.

Как связать экраныКак связать экраны

Переходы между экранами настраиваются в кнопках, в поле «Действие по клику»:

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

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

Ограничения переходов:

• Кнопки «Назад» и возврата на первый экран нет: переход возможен только на следующий по порядку экран.
• Переход между экранами не записывается в карточку клиента как клик. Клик фиксируется только по кнопкам «Переход по ссылке» и отправки формы.

Десктопная и мобильная версииДесктопная и мобильная версии

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

Можно ли сделать разный фон на экранах

Да, фон задается в настройках блока каждого экрана.

Как посмотреть все экраны на сайте

Откройте форму по тестовой ссылке и пройдите все экраны по кнопкам — подробнее в разделе «Как проверить форму на сайте».

БлокБлок

Блок — содержимое одного экрана формы. В настройках блока задаются фон экрана, обводка, скругления и то, как контент размещается внутри.

• Ссылка перехода по клику — адрес, который откроется, если клиент нажмет на любое место блока. Используйте, когда весь экран формы — это баннер. Кнопки и ссылки на картинках и в тексте при этом продолжат работать. Тип ссылки можно выбрать: ссылка на сайт, email или телефон. Для email откроется почтовый клиент, для телефона — приложение для звонков.

  

• Фон — цвет или картинка на фоне экрана. Картинку можно обрезать, растянуть или заполнить ею весь блок.

  

  

  

• Обводка и скругления — рамка вокруг блока и радиус скругления углов. Скругления блока — это скругления углов всей формы на этом экране.

  

• Расположение контента внутри блока — выравнивание строк по вертикали относительно высоты блока.

  

• Внутренние отступы — расстояние от краев блока до контента сверху, справа, снизу и слева, в пикселях.

  

СтрокиСтроки

Строка — горизонтальный ряд внутри блока. Строки располагаются в блоке друг под другом. Строку можно разделить на колонки, а в колонки добавить элементы.

Например, чтобы поставить картинку слева от текста, добавьте строку из двух колонок: в первую перетащите картинку, во вторую — текст. Чтобы на мобильных картинка оказалась над текстом, включите перестройку колонок на мобильном.

Как добавить строкуКак добавить строку

1. Нажмите «Строки».
2. Перетащите строку с нужным количеством колонок в блок.

Строку также можно скопировать. Порядок строк меняется перетаскиванием.

Чтобы открыть настройки строки, нажмите на нее на холсте или выберите «Строка» в навигационной цепочке.

КолонкиКолонки

Ширина колонок задается соотношением: сумма значений ширины всех колонок в строке всегда равна 12. Например, одна колонка со значением 12 занимает всю ширину строки.

Если добавить вторую колонку, ширина первой станет 11, а второй — 1. Всего в строке может быть до 12 колонок.

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

Элементы в одной колонке располагаются друг под другом. Чтобы поставить элементы рядом, используйте группу элементов.

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

• Высота строки — по контенту, когда строка подстраивается под высоту элементов, или фиксированная в пикселях.

  

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

  

• Отступы и выравнивание:

  • вертикальное выравнивание — как элементы внутри колонки выравниваются по высоте;

  • внутренние отступы — расстояние от краев строки до колонок сверху, справа, снизу и слева, в пикселях;

  • отступ между колонками — расстояние между соседними колонками строки.

    

На каких устройствах показывать строкуНа каких устройствах показывать строку

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

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

ЭлементыЭлементы

Элементы — содержимое формы: текст, картинки, кнопки, поля ввода и другой контент. Набор элементов зависит от формата формы: в попапе, встроенном блоке и in-app он может отличаться.

Как добавить элементКак добавить элемент

1. Перетащите элемент с панели слева от холста в колонку строки. Если в форме еще нет строк, сначала добавьте строку.

   

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

   

Общие настройки элементовОбщие настройки элементов

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

• «Дизайн» — содержимое и внешний вид элемента.
• «Отображение» — на каких устройствах показывать элемент.

Настройки ниже есть у всех элементов.

• Обводка — рамка вокруг элемента: тип линии, цвет и толщина.

  

• Скругления — радиус скругления углов в пикселях: одно значение для всех углов или отдельное для каждого угла.

  

• Отступы и выравнивание — выравнивание по левому краю, по центру или по правому краю колонки и внутренние отступы от содержимого до границ элемента в пикселях.

  

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

ТекстТекст

Элемент «Текст» — заголовки, описания, условия промоакции и другая текстовая информация. Введите текст в поле «Текст» и при необходимости отформатируйте его.

Шрифт, стиль, размер, интервалы и цвет текста настраиваются так же, как в текстовом редакторе. Обратите внимание на настройки:

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

КартинкаКартинка

Элемент «Картинка» — фото продукта, логотип, иллюстрация или другое изображение.

В поле «Картинка» загрузите файл или укажите ссылку на него.

Видимую область картинки также можно настроить в поле «Положение в колонке». Эта настройка доступна, если ширина картинки задана в пикселях, а высота — в пикселях или во всю высоту.

Чтобы на мобильных показывалась другая картинка, добавьте два элемента «Картинка» и на вкладке «Отображение» выберите для одного «На десктопе», для другого — «На мобильном».

Размер:

• Ширина: во всю ширину контейнера, 100% от ширины контейнера или фиксированная в пикселях.
• Высота: во всю высоту контейнера, 100% от высоты контейнера или фиксированная в пикселях.

Выравнивание и отступы:

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

Ссылка по клику:

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

КнопкаКнопка

Элемент «Кнопка» выполняет действие по клику: закрывает форму, ведет на страницу, копирует промокод, открывает другую форму или отправляет данные.

Действие по клику:

• Закрыть форму — форма закрывается без отправки данных.
• Переход по ссылке — открывается страница по ссылке. Поддерживаются относительные ссылки и диплинки.
• Копировать промокод — указанный промокод копируется в буфер обмена клиента, а текст кнопки меняется на заданный.
• Открыть другую форму — открывается форма с указанным ID.
• Отправить и закрыть форму — данные из формы отправляются в Mindbox, и форма закрывается.
• Перейти к следующему экрану — открывается следующий экран формы. Подробнее — в разделе «Как связать экраны».

Текст кнопки — шрифт, стиль, размер и цвет настраиваются так же, как в элементе «Текст». Дополнительно можно задать цвет текста при наведении.

Фон и размеры:

• Тип заливки — цвет или картинка.
• Цвет и Цвет при наведении — для заливки цветом.
• Фон кнопки и Фон кнопки при наведении — для заливки картинкой.
• Ширина — в пикселях или в процентах от ширины контейнера.
• Высота — в пикселях.

Иконка:

Иконку можно разместить слева или справа от текста. Загрузите файл иконки и задайте:

• Alt-текст — описание иконки для программ экранного доступа;
• Размер — в пикселях;
• Отступ от текста — в пикселях.

Группа элементовГруппа элементов

Группа элементов объединяет несколько элементов колонки в общий контейнер. Например, так можно поставить две кнопки рядом друг с другом.

Используйте группу, когда нужно:

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

Чтобы добавить группу:

1. Добавьте элемент «Группа элементов» в колонку строки.
2. Перетащите в группу нужные элементы.

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

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

ЧекбоксЧекбокс

Элемент «Чекбокс» — галочка, которую клиент ставит или снимает: например, согласие на обработку персональных данных, согласие на рассылку или любой ответ «да» или «нет».

Добавьте «Чекбокс» в колонку строки, впишите текст согласия и ссылку на политику. Ссылка по умолчанию открывается в новом окне, и клик по ней не меняет состояние галочки.

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

Системные настройки:

• Обязательное поле — включено по умолчанию. Если клиент не отметил обязательный чекбокс, кнопка отправки неактивна и клиент видит сообщение, что обязательные поля не заполнены.
• Отмечен по умолчанию — галочка стоит сразу при показе формы.
• Системное имя — имя, под которым значение чекбокса передается в Mindbox. Создается автоматически и уникально для формы.

Текст чекбокса:

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

Дизайн галочки — цвет галочки, цвет фона и цвет обводки квадрата.

Ошибка заполнения:

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

Как значение попадает в Mindbox:

Чекбокс передает значение «отмечен» или «не отмечен». Чтобы записать его, сопоставьте чекбокс с полем Mindbox в разделе «Действия после заполнения формы клиентом» на странице кампании — подробнее в статье «Какие есть действия после заполнения формы». Подписка на канал связывается с чекбоксом так же, как в формах на шаблонах.

Если на единственном экране формы есть чекбоксы, но нет кнопки «Отправить и закрыть форму», форму не получится запустить — см. раздел «Ошибки при сохранении и запуске формы».

Кнопка отправки на сайте неактивна

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

Как убрать галочку, которая стоит сразу при показе формы

Выключите настройку «Отмечен по умолчанию».

Нужен ли чекбокс на экране с полями ввода

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

Поле вводаПоле ввода

Элемент «Поле ввода» — поле, в которое клиент вводит данные. Тип поля бывает:

• Системный — «Email», «Телефон», «Имя». Чтобы форма могла создать клиента, в ней должно быть хотя бы одно поле системного типа на каждой версии — десктопной и мобильной. На каждой версии может быть только одно поле каждого системного типа.
• Несистемный — «Дата», «Число», «Свободное поле» (строка). Таких полей в форме может быть сколько угодно.

Первое поле на экране добавляется с типом «Email». Копия поля и поля на дублированном экране получают тот же тип, название и плейсхолдер — поменяйте их вручную.

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

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

Системные настройки:

• Тип поля — «Email», «Телефон», «Имя», «Дата», «Число» или «Свободное поле».
• Системное имя — имя, под которым значение передается в Mindbox. Создается автоматически. У полей системных типов его нельзя изменить, у остальных — можно. Системное имя не может быть пустым и должно быть уникальным в форме.
• Обязательное поле — если поле не заполнено, кнопка отправки неактивна и клиент видит сообщение об ошибке.

Название поля:

• Расположение названия относительно поля или вариант без названия.
• Текст, шрифт, стиль и выравнивание.
• Отступ до поля.
• Цвет звездочки обязательного поля. Если название скрыто, звездочка показывается в плейсхолдере.

Если название скрыто, заполните «Alt-текст» — его прочитают программы экранного доступа.

Плейсхолдер — подсказка внутри пустого поля: текст, стиль и цвет. У поля с типом «Дата» вместо плейсхолдера показывается формат даты.

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

Маска телефона — у поля с типом «Телефон» задаются страна по коду и количество цифр. Маски телефона и даты видны прямо на холсте.

Ошибка заполнения — текст и дизайн ошибки. Клиент увидит ее, если не заполнит обязательное поле или введет значение в неверном формате.

Как данные попадают в Mindbox:

Чтобы данные записались в клиента или в действие, сопоставьте поля формы с полями Mindbox в разделе «Действия после заполнения формы клиентом» на странице кампании — подробнее в статье «Какие есть действия после заполнения формы». Значение свободного поля запишется, только если в проекте есть подходящее дополнительное поле и оно сопоставлено.

Если форма создает клиента, сопоставьте хотя бы поле «Email» или «Телефон» — иначе форму не получится запустить. Остальные ошибки, связанные с полями ввода, описаны в разделе «Ошибки при сохранении и запуске формы».

Не получается выбрать тип «Email» или «Телефон» у второго поля

Поле такого типа уже есть в форме — на этом или на другом экране. Экран с этим полем отмечен ошибкой в панели экранов.

Данные из формы не появились в карточке клиента

Проверьте сопоставление полей в действиях после заполнения формы. Для свободных полей проверьте, что в проекте есть подходящее дополнительное поле.

Дата не записывается в клиента

Используйте поле с типом «Дата» — его значение передается целиком. Собирать дату из трех полей (день, месяц, год), как в формах на шаблонах, не нужно.

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

Элемент «Выпадающий список» — поле, в котором клиент выбирает один вариант из заданного списка: например, город, цель обращения или пол.

Добавьте «Выпадающий список» в колонку строки и заполните варианты ответа.

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

Системные настройки:

• Имя поля — название поля, по которому его находят при сопоставлении на странице кампании.
• Системное имя — имя, под которым выбранный вариант передается в Mindbox. Выпадающий список всегда сохраняется как пользовательское поле, поэтому к имени добавлен префикс customs.. Системное имя можно скопировать.
• Обязательное поле — если вариант не выбран, форма не отправится, а клиент увидит текст ошибки.

Варианты ответа:

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

Название, плейсхолдер, дизайн и размеры настраиваются так же, как у поля ввода:

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

Как значение попадает в Mindbox:

Сопоставьте выпадающий список с дополнительным полем клиента или действия в разделе «Действия после заполнения формы клиентом» — тогда выбранный вариант запишется.

Ограничения:

• Можно выбрать только один вариант, множественного выбора нет.
• Раскрытый список вариантов рисует браузер или операционная система клиента. Его вид настроить нельзя — настройки дизайна применяются только к свернутому полю.

Раскрытый список на сайте выглядит не так, как в конструкторе или макете

Это ожидаемо: раскрытый список выглядит по-разному в разных браузерах и на разных устройствах и не настраивается.

Выбранное значение не записалось в клиента

Проверьте, что выпадающий список сопоставлен с дополнительным полем в действиях после заполнения формы.

ТаймерТаймер

Элемент «Таймер» показывает обратный отсчет: дни, часы, минуты и секунды. В отличие от таймера в письмах, это не картинка, а счетчик: цифры меняются в реальном времени.

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

На одном экране может быть только один таймер: если добавить второй, конструктор покажет предупреждение.

Системные настройки:

• Имя поля — название таймера.
• Тип таймера:
  • «До даты» — отсчет до конкретной даты и времени;
  • «На период» — отсчет заданной длительности, например 15 минут;
  • «Цикличный» — отсчет, который повторяется по расписанию, например каждый будний день до 17:00.
• Начало отсчета — для типа «На период», например с первого посещения.
• Дата отсчета — для типа «До даты», а также для типа «На период», если начало отсчета задано вручную.
• Длительность — для типа «На период».
• Дни и время — для типа «Цикличный».
• Отображение — какие единицы показывать: дни, часы, минуты, секунды.
• Часовой пояс — проекта или устройства клиента.
• Не показывать после конца — после окончания отсчета форма не показывается до следующего цикла.

Как таймер работает на сайте:

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

Дизайн таймера:

• Подложка: высота, ширина, цвет или картинка на фоне.
• Цифры: шрифт, размер, цвет.
• Подписи «Дней», «Часов» и другие: текст, стиль и расположение — над цифрами или под ними.
• Расстояние между блоками дней, часов, минут и секунд.

Ограничения:

• Таймер общий для всех клиентов. Персональный отсчет — например, до сгорания баллов конкретного клиента — задать нельзя.
• Расстояние между цифрами внутри одного числа, например между «1» и «8» в «18», не настраивается — только между блоками.

Таймер показывает нули в форме на сайте

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

Таймер показывает нули в конструкторе

На холсте конструктора отсчет не идет. Чтобы проверить работу таймера, нажмите «Проверить на сайте» — подробнее в разделе «Как проверить форму на сайте».

Форма закрылась сама

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

АБ-тест формыАБ-тест формы

В форме из конструктора можно запустить АБ-тест: показать клиентам несколько вариантов одной формы и сравнить их по основной метрике. Например, форму с таймером и без него или формы с разными скидками.

Как добавить вариантКак добавить вариант

1. На странице кампании добавьте вариант формы. Новый вариант создается копией текущего — с тем же дизайном, экранами и полями.
2. Откройте вариант в конструкторе и измените то, что хотите проверить: текст, дизайн, набор элементов, типы полей ввода.
3. Выберите основную метрику теста — без нее тест не запустится.
4. Настройте действия после заполнения формы. Они общие для всех вариантов: при сопоставлении доступны поля всех вариантов сразу.

Требования к вариантамТребования к вариантам

Поля всех вариантов сопоставляются с полями Mindbox одновременно. Например, email из поля варианта 1 и email из поля варианта 2 запишутся в одно и то же поле Mindbox. Поэтому варианты должны быть совместимы:

• Все варианты одного типа — либо все с полями ввода, либо все без них. Сравнить в тесте форму с полями и форму без полей нельзя.
• Поля с одинаковым системным именем — одного типа. Если в разных вариантах есть свободные поля с одним системным именем, у них должен быть один тип.
• В каждом варианте есть поле для создания клиента. Если форма создает клиента, в каждом варианте с полями должно быть поле для email, телефона или внешнего идентификатора, и оно должно быть сопоставлено. Поля могут отличаться: например, в варианте А — email, в варианте Б — телефон.
• В каждом варианте есть сопоставленное поле, если в действиях после заполнения выбрано «Дополнить данными» или «Изменить данные».

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

Как проходит проверка и показ тестаКак проходит проверка и показ теста

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

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

Ошибки запуска теста описаны в разделе «Ошибки АБ-теста».

Можно ли сравнить попап и встроенный блок

Нет, АБ-тест формы сравнивает варианты одной формы. Для такого сравнения нужен АБ-тест сайта.

Клиент увидел оба варианта

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

Ошибки при сохранении и запуске формыОшибки при сохранении и запуске формы

Конструктор и страница кампании проверяют форму, чтобы она не сломалась на сайте и не потеряла данные клиентов. Ошибки бывают двух видов:

• Предупреждение — форму можно сохранить, но нельзя запустить, пока ошибка не исправлена.
• Блокирующая ошибка — форму нельзя даже сохранить.

Ошибки видны в двух местах:

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

  

• На странице кампании — в чек-листе «Готовность к запуску». Пока в форме есть ошибки, кнопка «Запустить» недоступна.

  

После исправления ошибки отметка пропадает.

Изменения в запущенной форме сохраняются, только если в ней нет ошибок. Иначе появится сообщение «Чтобы сохранить запущенную форму, исправьте ошибки», а клиенты продолжат видеть прежнюю версию формы. Самая частая причина — из формы удалили поле, которое сопоставлено с полем в Mindbox: верните поле или уберите его из сопоставления. Сохраненные изменения появляются на сайте через несколько минут.

Ошибки в конструктореОшибки в конструкторе

Текст ошибки	Причина	Можно сохранить черновик	Можно запустить или сохранить запущенную форму
Добавьте крестик или кнопку, закрывающую попап без сохранения	На экране нет ни крестика, ни кнопки закрытия формы	Да	Нет
Измените действие кнопки «…» или добавьте экран для перехода	Кнопка ведет на следующий экран, которого нет	Да	Нет
Добавьте ссылку для кнопки «…» — у нее выбрано действие «Переход по ссылке»	У кнопки с действием «Переход по ссылке» нет ссылки	Да	Нет
Добавьте текст промокода для кнопки «…» — у нее выбрано действие «Копировать промокод»	У кнопки с действием «Копировать промокод» нет промокода	Да	Нет
Добавьте ID формы для перехода для кнопки «…» — у нее выбрано действие «Открыть другую форму»	У кнопки с действием «Открыть другую форму» нет ID формы	Да	Нет
Добавьте кнопку с действием «Отправить и закрыть форму» — иначе данные из формы не сохранятся	На единственном экране есть поля ввода или чекбоксы, но нет кнопки отправки	Да	Нет
Измените системные имена в полях «…» и «…» — сейчас они одинаковые	У нескольких полей одинаковое системное имя	Нет	Нет
Добавьте системное имя поля «…» — сейчас оно не заполнено	Системное имя поля не заполнено	Нет	Нет
Добавьте текст варианта ответа для поля «Выпадающий список»	У варианта ответа в выпадающем списке нет текста	Да	Нет
Оставьте только один элемент «Таймер» на экране	На экране больше одного таймера	Да	Нет
Предупреждение: таймер не дойдет до нуля	Показ формы закончится раньше, чем отсчет таймера	Да	Да

Ошибки на странице кампанииОшибки на странице кампании

Эти ошибки связаны с настройкой «Действия после заполнения формы клиентом».

При сохранении черновика:

Текст ошибки	Причина	Можно сохранить черновик	Можно запустить или сохранить запущенную форму
Введите системное имя для поля ввода «…»	У несистемного поля ввода не задано системное имя	Да	Нет
Не удалось сохранить. Системное имя «…» повторяется у 3 полей — измените у 2 из них на уникальные	Системное имя повторяется у нескольких полей	Нет	Нет

При сохранении запущенной формы:

Текст ошибки	Причина	Можно сохранить черновик	Можно запустить или сохранить запущенную форму
Чтобы сохранить запущенную форму, исправьте ошибки	В запущенной форме есть ошибки в конструкторе	Да	Нет
Свяжите поле «…» с полем в Mindbox в «Действиях после заполнения формы»	В запущенную форму добавили поле, но не сопоставили его. Данные из этого поля не запишутся	Да	Да
Свяжите поле ввода из формы с полем в Mindbox, иначе данные не будут записаны	В форме есть поля ввода, но ни одно не сопоставлено при дополнении клиента	Да	Нет
Свяжите поля ввода Email, телефон из формы с полями в Mindbox, иначе данные не будут записаны	В форме есть поля ввода, но ни одно не сопоставлено при создании клиента	Да	Нет
Свяжите чекбокс «…» с полем в Mindbox, иначе данные не будут записаны	Не сопоставлен ни один чекбокс при дополнении или изменении клиента. Обычно так бывает в формах, где есть только чекбокс и кнопка «Отправить и закрыть форму»	Да	Нет
Выберите действие после заполнения формы клиентом, иначе данные не будут записаны	Не включено ни одно действие после заполнения формы: ни создание клиента, ни выдача действия	—	Нет
Заполните действие после заполнения формы или отключите настройку	Включена настройка «Выдать действие», но действие не настроено	—	Нет
Поле обязательно для заполнения в блоке «Выдать действие»	Включена настройка «Выдать действие», но не заполнено название действия	—	Нет

При запуске формы:

Текст ошибки	Причина	Можно сохранить черновик	Можно запустить или сохранить запущенную форму
Перед запуском исправьте ошибки в форме	В форме есть ошибки	Нет	Нет

Ошибки АБ-тестаОшибки АБ-теста

Текст ошибки	Причина	Можно сохранить вариант	Можно запустить тест
Нельзя сравнивать варианты с полями ввода и без них: результаты теста будут некорректны. Сделайте все варианты одного типа: с полями ввода или без них	Один вариант с полями ввода, другие — без	Да	Нет
Измените тип поля в полях варианта А «…» или варианта В «…» — сейчас они не совпадают	В вариантах есть свободные поля с одинаковым системным именем, но разным типом	Да	Нет
Добавьте в форму «…» хотя бы одно поле ввода для сбора контактов (email, телефон, внешний идентификатор)	В одном из вариантов формы, которая создает клиента, нет поля для email, телефона или внешнего идентификатора	Да	Нет
Свяжите поле ввода с полем в Mindbox, иначе данные не будут записаны	В одном из вариантов не сопоставлено ни одно обязательное поле при дополнении клиента	Да	Нет
Свяжите поля ввода с полями в Mindbox, иначе данные не будут записаны	В одном из вариантов не сопоставлено ни одно обязательное поле при создании клиента	Да	Нет
Свяжите чекбокс «…» из варианта А формы «…» с полем в Mindbox, иначе данные не будут записаны	В одном из вариантов не сопоставлен ни один чекбокс при дополнении или изменении клиента. Обычно так бывает в формах, где есть только чекбокс и кнопка «Отправить и закрыть форму»	Да	Нет
Заполните поле (под полем «Основная метрика»)	Не выбрана основная метрика теста	Да	Нет

Кнопка «Запустить» неактивна

Откройте чек-лист «Готовность к запуску» на странице кампании и конструктор формы — в них подсвечены ошибки. Проверьте оба места: часть ошибок относится к дизайну, часть — к действиям после заполнения формы.

Не сохраняются правки в запущенной форме

В форме есть блокирующая ошибка — чаще всего удалено сопоставленное поле или повторяются системные имена.

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

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

Предпросмотр в конструктореПредпросмотр в конструкторе

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

Как открыть форму на сайтеКак открыть форму на сайте

1. Сохраните форму.
2. На странице кампании в блоке формы нажмите «Проверить на сайте». В конструкторе для этого есть кнопка «Посмотреть на сайте».
3. Укажите адрес страницы сайта, на которой нужно показать форму.
4. Перейдите по ссылке или скопируйте ее. Форма покажется сразу после загрузки страницы.

Как работает тестовая ссылка:

• По тестовой ссылке форма показывается каждый раз — без учета таргетинга, условий всплывания и частоты показа. Поэтому так проверяют только вид и работу самой формы.
• Чтобы проверить таргетинг, запустите форму и откройте сайт без тестовой ссылки под клиентом, который подходит под условия.
• Тестовые показы могут учитываться в лимитах показов. Если после нескольких проверок форма перестала показываться, откройте сайт в режиме инкогнито.
• Для встроенного блока на странице должно быть место для встраивания — элемент с селектором из настройки «Место отображения».

Как проверить десктопную версиюКак проверить десктопную версию

Откройте тестовую ссылку в браузере на компьютере. Не сужайте окно браузера: в узком окне форма может частично перестроиться, но полноценной мобильной версией это не будет.

Как проверить мобильную версиюКак проверить мобильную версию

Версия формы определяется по устройству один раз при загрузке страницы, а не по ширине окна. Поэтому мобильную версию проверяйте одним из способов:

• На телефоне — отправьте себе тестовую ссылку и откройте ее в браузере телефона.
• В режиме разработчика в браузере — например, в Google Chrome:

  1. Сохраните форму и откройте тестовую ссылку.

     

  2. На странице с формой нажмите правой кнопкой мыши и выберите «Просмотреть код».

  3. Выберите размер устройства на панели в верхней части экрана.

     

  4. Обновите страницу. Без этого форма останется в десктопной версии. После возврата к десктопной версии страницу тоже нужно обновить.

  5. Если форма собирает контакты, проверьте, как заполняются поля в мобильной версии.

Что проверитьЧто проверить

• Форма выглядит так же, как в конструкторе, на десктопе и на мобильном.
• Каждая кнопка ведет на нужный экран.
• Без обязательных полей и чекбоксов кнопка отправки неактивна, а если в конструкторе задан текст ошибки — он показывается.
• Маска телефона и формат даты работают.
• Таймер идет и показывает нужное время.
• Работают кнопки «Переход по ссылке», «Копировать промокод», «Открыть другую форму» и крестик закрытия формы.
• Данные из формы попали в карточку клиента — если вы отправляли форму с тестовыми контактами.

Форма не открывается по тестовой ссылке

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

По тестовой ссылке форма показывается, а без нее — нет

Сама форма работает. Причина в таргетинге, условиях всплывания, частоте показа или пересечении с другими формами.

Мобильная версия на сайте выглядит как десктопная

Скорее всего, режим разработчика включили без обновления страницы. Обновите страницу в режиме разработчика или откройте ссылку на телефоне.

Форма показывается по тестовой ссылке на любой странице

Это ожидаемо: тестовая ссылка не учитывает таргетинг.

Что дальшеЧто дальше

• Как настроить таргетинг формы
• Какие есть действия после заполнения формы
• Как собрать in-app в конструкторе форм