Как настроить кастомную форму попапа
Вы можете создать попап, выбирая типы элементов, которые хотите включить, собирать необходимые вам данные и хранить их в переменных для дальнейшей сегментации аудитории и персонализации взаимодействия.
Рассмотрим в статье, как создать и настроить кастомную форму.
Создайте новый попап или перейдите в режим редактирования существующего. В поле «Главное действие» выберите «Кастомная форма».
Настройте поля
По умолчанию в кастомной форме уже есть одно поле ввода. Если вам нужно добавить другой элемент, вы можете пропустить настройку поля и удалить его.
Выберите тип данных
Вы можете выбрать, какой тип данных будете передавать в поле. Нажмите {} и выберите существующее поле или создайте новое.
При создании нового поля укажите его название – оно будет отображено в плейсхолдере поля и выберите тип данных:
| Строка (String) | Используется для ввода до 255 текстовых символов. |
| Число (Number) | Используется для ввода числовых значений. |
| Электронная почта (Email) | Используется для введения email адресов в виде example@example.com. |
| Телефон (Phone) | Для ввода телефонных номеров. Рекомендуется использовать международный формат с кодом страны. |
Вы также можете добавить дополнительный заголовок поля, который будет отображаться над полем. Включите заголовок и введите название.
Установите обязательность поля
Отметьте важность заполнения поля:
| Обовязательное (Required) | Данные формы можно будет отправить только после заполнения всех обязательных полей. У заголовка поля появится * для пометки, что поле обязательно для заполнения. |
| Необязательное (Optional) | Данные формы можно отправить без заполнения необязательных полей. |
Свяжите с переменной
Вы также можете автоматически предзаполнять поля попапа для удобства пользователей. Данные попапах будут добавляться через Local Storage, Cookies (для сбора с локального хранилища в браузере пользователя) или через API (для сбора из вашей системы) и передаваться после отправки формы.
Напротив поля нажмите {} и выберите созданную в настройках переменную.
Читайте подробнее «Как передавать пользовательские переменные».
Вы также можете скрыть поля, если они будут предварительно заполнены значениям из переменных. Например, если пользователь уже регистрировался и у вас есть необходимые данные, вы можете его дополнительно не запрашивать ту же информацию.
По умолчанию, если у вас или у пользователя в системе имеются значение для выбранных переменных, виджет автоматически подставит эти значения в поля. Пользователь может их просмотреть, редактировать и только потом отправить.
Если вы включите функцию «Скрыть предварительно заполненное поле», поля скроются от пользователя, а значения передаются во время отправки формы.
Добавьте дополнительные элементы
Чтобы добавить дополнительные элементы в попап, нажмите кнопку «Добавить элемент» и выберите тип элемента.
Можно добавить до 5 элементов в один попап. Чтобы показать больше информации или собрать больше данных, рекомендуем использовать цепочки попапов.
Вы можете добавить и настроить следующие элементы:
| Поле ввода (Entry field) |
Поле, где пользователь может оставить свои данные. При создании поля добавьте название и выберите тип данных: строку, число, email або телефон. Данные будут переданы в связанную переменную в том виде, в каком получены от пользователя. |
| Чекбокс (Checkbox) | Элемент с текстом, который посетитель может отметить галочкой, например: «Я соглашаюсь на обработку моих данных».
Когда пользователь отметит чекбокс, в переменную типа «Строка» будет передан текст поля. |
| *Множественный выбор (Multiselect) |
Несколько связанных полей, которые пользователь может отметить в попапе. Например: «Я согласен на обработку моих данных» и «Согласен получать рассылку». Данные хранятся в общей переменной как массив значений. Для каждого поля добавьте текст, который увидит посетитель, и выберите значение, которое будет записано в соответствующую переменную CRM. |
| *Дропдаун (Dropdown) |
Элемент, в котором пользователь сможет выбрать одно значение из списка. К примеру, приоритетную категорию рассылок. Для каждого поля добавьте текст, который будет видеть посетитель, и выберите значение, которое будет записано в соответствующую переменную CRM. |
| *Радиокнопки (Radio buttons) |
Элемент, в котором пользователь сможет выбрать одно значение с помощью радиокнопок. Для каждого поля добавьте текст и выберите значение, которое будет записано в соответствующую переменную CRM. |
| NPS-опрос (NPS survey) |
Элемент с набором кнопок с помощью которых пользователь может оценить сервис или предложение. Вы можете выбрать формат оценки: звездочки, смайлики, сердечки, ругательства или цифры. Вы также можете активировать поле ввода комментария к оценке. Данные будут переданы в переменную в зависимости от выбранного формата. Читайте подробнее: «Как создать NPS-форму». |
| Цепочка (Pop-up flow) |
Элемент с запуском другого попапа для создания цепочек. Вы можете выбрать другой созданный попап и добавить название кнопки, которая его запустит. Читайте подробнее: «Как создать сценарий цепочки для попапов». |
*При добавлении нескольких опций (в элементах «Множественный выбор», «Дропдаун» и «Радиокнопки») вы можете оставить поле отметки пустым или отметить их за пользователя, подсказывая выбор. К примеру, вы можете заранее отметить поля, обязательные для заполнения.
Настройте порядок элементов
Чтобы изменить порядок отображения полей или элементов, наведите слева на иконку, зажмите ее и перетащите в соответствующее место сверху или снизу.
Настройте кнопку
Нажатие на кнопку отправить передает данные заполненной формы в раздел «Лиды» и, если настроите соответствующие действия – в Email и CRM сервисы.
Рекомендуем учитывать размеры вашего попапа и писать название кнопки призыва к отправке максимально сжато и понятно.
Настройте дополнительные опции
Вы также можете настроить дополнительные действия по работе с попапом и выбрать, куда хранить данные подписчиков. Активируйте соответствующий переключатель и настройте элементы:
| Открывать попап после нажатия на лаунчер (Open this pop-up upon launcher click) | Открывает выбранный попап по нажатию на лаунчер.
Читайте также «Як створити попап лаунчер». |
| Запрашивать подтверждение подписки (Request subscription confirmation) |
Отправляет письмо подтверждения после заполнения поля с запросом адреса электронной почты. Данные в SendPulse передаются только после подтверждения (метод double opt-in). Вы можете выбрать письмо из списка созданных в настройках инструментов подписки и добавить сообщение, которое будет отображаться после того, как пользователь отправит форму. |
| Сохранить в адресную книгу (Save to a mailing list) | Сохраняет данные в выбранную адресную книгу. Название переменной возьмется из названия поля или элемента, а значение – из заполненого поля или отмеченного посетителем элемента попапа. |
| Создать сделку в CRM (Create a deal in CRM) |
Сохраняет данные в виде сделки и контакта в CRM. Вы можете выбрать воронку, ввести название и статус сделки. При сохранении данных контактов в CRM создаются новые поля контакта. |
Настройте условия показа и опубликуйте попап
Перейдите во вкладку «Условия показа» (Display condition), чтобы настроить сценарий отображения попапа в соответствии с действиями пользователя на сайте. Вы можете добавить несколько условий, используя операторы связи «Или» или «И», и выбирать порядок их выполнения.
Читайте подробнее: «Типы условий».
После настройки условий нажмите «Сохранить и опубликовать» (Save and publish).
Созданные попапы будут отображаться в рамках вашего проекта во вкладке «Попапы» (Pop-ups).
Обновлено: 14.11.2023
или