Как создать мультиканальную форму подписки
С помощью конструктора вы можете создать форму подписки и разместить её на странице вашего сайта или блога, чтобы собрать базу подписчиков. Поля ввода, чекбоксы, радиокнопки, выпадающие списки, медийные элементы и многое другое помогут сделать вашу форму подписки более профессиональной.
Основные преимущества блочного редактора:
- нужный элемент макета можно добавить в форму подписки, перетащив его с помощью мыши;
- каждый элемент можно гибко редактировать, изменяя цвет, стиль, размер и другие параметры;
- вам не нужно иметь специальные знания и уметь работать с HTML-кодом, чтобы создать эффективную и заметную форму подписки.
В статье рассмотрим, как создать мультиканальную форму подписки с помощью блочного конструктора форм.
Создайте форму подписки
Перейдите в раздел Формы подписки (Subscription forms) и нажмите Создать новую форму (Create subscription form).
Выберите вид формы
Выберите вариант начальной структуры шаблона — они отличаются начальным набором элементов и способом размещения на странице.
| Встроенная форма (Embedded) | Используется для добавления формы подписки в наиболее удобное фиксированное место вашего сайта. |
| Попап-окно (Pop-up) | Позволяет настроить всплывающее окно, которое будет показываться пользователю при определённом условии. |
| Плавающая (Floating) | Будет отображаться в одном месте при прокрутке страницы пользователем. |
| Фиксированная (Fixed) | Позволяет закрепить местоположение в хедере, в левой (правой) колонке или в подвале сайта. |
Вы также можете выбрать готовую форму и перейти в блочный конструктор формы для её редактирования. Если вам нужно добавить свои скрипты и стили, выберите Получить HTML-код без стилей (Get HTML code without styles).
Выберите адресную книгу
Выберите адресные книги, в которых будут сохраняться контакты с данными после отправки формы. Вы можете выбрать из списка существующих или создать новые. При необходимости можно выбрать несколько книг.
Далее нажмите В редактор (Go to builder).
Элементы формы подписки
В редакторе слева вы найдёте элементы, которые можно добавлять. В центре расположен шаблон формы, который вы будете редактировать.
В верхнем левом углу конструктора находится иконка быстрого добавления полей. Здесь собраны самые популярные элементы, нужные при создании формы.
В правой части экрана разворачивается вкладка Элемент (Element) для настройки каждого из перечисленных выше элементов, а также вкладка Дизайн (Design) для настройки общего дизайна формы подписки. Чтобы настроить элемент, перетащите его с панели слева на шаблон формы.
Поле ввода
С помощью этого элемента можно добавить поля в форму подписки. Настройте их с помощью следующих параметров:
| Название поля ввода (Input field label) | Введите название поля, которое будет отображаться над полем ввода. Необязательное поле. |
| Подсказка внутри поля (Placeholder) | Добавьте подсказку, которая будет отображаться как текст более светлого цвета внутри поля. Необязательное поле. |
| Связать с переменной (Bind to variable) | Выберите из выпадающего списка, в какую переменную адресной книги сохранять значение. |
| Сделать обязательным (Set as required) | При активации блокируются действия пользователя, пока поле не будет заполнено. |
Чекбокс
Этот элемент позволяет предоставить пользователю выбор нескольких вариантов из списка. Например, при оформлении подписки пользователь может отметить, что он хочет получать от вашей компании: новости, скидки, конкурсы, приглашения на события.
Настройте чекбокс с помощью следующих параметров:
| Название чекбокса (Checkbox label) | Введите текст чекбокса. |
| Связать с переменной (Bind to variable) | Выберите из выпадающего списка, в какую переменную адресной книги сохранять значение. |
| Сделать обязательным (Set as required) | При активации блокируются действия пользователя, пока поле не будет заполнено. |
Если чекбокс отмечен, в выбранную переменную передаётся значение yes, если не отмечен — no. Полученная информация сохраняется в переменную, привязанную к этому чекбоксу. Не забудьте создать её заранее в адресной книге.
Радиокнопки
Этот элемент используется в форме подписки для выбора одного из нескольких вариантов. Настройте его с помощью следующих параметров:
| Название группы радиокнопок (Label of the radio buttons group) | Введите текст, который будет отображаться над группой радиокнопок. |
| Связать с переменной (Bind to variable) | Выберите из выпадающего списка, в какую переменную адресной книги сохранять значение. |
| Список опций (Options list) | Введите текст опций и соответствующие значения, которые будут передаваться в переменную. |
Выпадающий список
Этот элемент используется в форме подписки для выбора одного из нескольких вариантов, представленного в более компактной форме, чем радиокнопки. Настройте список с помощью следующих параметров:
| Название группы выпадающего списка (Label of the drop-down list) | Введите текст, который будет отображаться над выпадающим списком. |
| Связать с переменной (Bind to variable) | Выберите из выпадающего списка, в какую переменную адресной книги сохранять значение. |
| Список опций (Options list) | Введите текст опций и соответствующие значения, которые будут передаваться в переменную. |
Мессенджер
Этот элемент позволяет добавить кнопки подписки на вашу социальную сеть в форму. Чтобы добавить новую кнопку для подписки на соцсеть, нажмите Добавить кнопку (Add a button), выберите соцсеть и введите ссылку на вашу страницу. Задайте расположение кнопок: по центру, справа или слева.
Для Facebook Messenger и Telegram вы можете указать чат-бота, на которого подпишется клиент после нажатия на кнопку. Выберите чат-бота в выпадающем меню и цепочку, которая запустится после подписки.
Текст
Этот элемент позволяет добавить тексты в форму с помощью элемента Текст. Во вкладке Элемент можно выбрать Шрифт (Font), задать расстояние между строками текста с помощью значения Высота строки (Line height), а также отформатировать текст:
| Стиль текста | Выберите стиль текста: жирный или курсив. |
| Цвет текста | Выберите цвет текста. |
| Вставить/редактировать ссылку | Добавьте ссылку к выделенному тексту или введите текст для отображения. Введите текст, который будет появляться при наведении курсора на ссылку. А также выберите, где будет открываться ссылка: в текущей или новой вкладке. |
| Выравнивание | Выберите выравнивание текста: по центру, слева или справа. |
| Размер шрифта | Выберите размер текста. |
| Код | Открывает исходный код текстового блока, который вы можете отредактировать. |
| Изменение ориентации текста | Настройте ориентацию текста: справа налево или слева направо. |
Картинка
Этот элемент позволяет вставлять картинки с помощью элемента Картинка (Image). Во вкладке Элемент (Element) укажите расположение по центру, справа или слева.
Разделитель
Элемент Разделитель (Spacer) позволяет добавить немного свободного пространства в форму. Во вкладке Элемент (Element) установите разделителю нужную высоту.
Настройка дизайна формы подписки
В конструкторе вы можете настроить общий вид формы подписки: задать фон, скруглить углы, выбрать ширину и многое другое. Настройте стиль блока (Block style):
| Расположение полей (Field Orientation) | Разместите форму подписки вертикально или горизонтально. |
| На всю ширину (Full Width) | Включите этот переключатель, чтобы растянуть фон формы подписки на всю ширину сайта. |
| Ширина формы (Width) | Регулируйте ширину формы от 200 до 960 пикселей. |
| Фон формы (Form background) | Задайте цвет и прозрачность фона формы, подходящий вашему сайту. |
| Фоновая картинка (Background image) | Включите этот переключатель, чтобы задать фоновое изображение формы. Поддерживаются изображения с расширением до 496х600 пикселей и размером 102 Кбайта. |
| Контур (Form border) | Установите толщину и цвет границы формы подписки. |
| Внутренний отступ (Inner padding) | Настройте отступы от внешней границы элемента до содержимого. |
| Скругление углов (Rounded corners) | Настройте или введите радиус скругления углов формы подписки. |
| Шрифт (Font) | Выберите общий шрифт для всех текстовых элементов формы подписки. |
| Фон подложки (Background) | Настройте цвет и прозрачность фона, который отобразится за окном формы.
Доступно только для всплывающего окна. |
| Эффект показа (Show effect) | Выберите анимацию появления формы подписки: Встряска, Увеличение, Уменьшение, Затухание, Выезд сверху/справа/снизу/слева и Прокрутка.
Доступно только для всплывающего окна. |
В разделе Поля ввода и названия (Input fields and labels) настройте общий вид элементов формы подписки.
| Размер полей (Field Size) | Выберите общий размер полей и элементов: S — маленький, M — средний, L — большой. |
| Фон полей (Field background) | Задайте цвет фона полей ввода. |
| Границы (Borders) | Установите толщину и цвет контура полей формы подписки. |
| Скругление углов (Rounded corners) | Настройте или введите радиус скругления углов полей формы. |
| Положение названий полей (Labels position) | Выберите расположение названий полей из выпадающего списка: Сверху поля, Слева от поля, Внутри поля.
Здесь также можно указать размер шрифта названия полей и его цвет, оформить его жирным и курсивом. |
| Показывать логотип SendPulse (Show SendPulse logo) | Включите этот переключатель, чтобы логотип SendPulse отображался на форме подписки. |
| Расположение (Alignment) | Выберите расположение логотипа SendPulse на форме подписки: слева, в центре или справа. |
Настройка опций формы
Нажмите Опции формы (Form options), чтобы перейти к дополнительным настройкам формы подписки.
Данные и тип формы
В этом разделе настройте передачу данных и тип формы подписки:
| Название формы (Form name) | Введите название формы подписки, которое будет отображаться в вашем списке форм. |
| Адресная книга (Mailing list) | Выберите или замените адресные книги, в которые будут поступать данные с формы подписки. |
| Добавлять подписчиков в CRM (Add subscribers to CRM) | Включите этот переключатель, чтобы автоматически передавать данные подписчиков в список контактов в CRM. |
| Назначить тег(и) (Set tag(s)) | Добавьте метки к этой форме подписки, чтобы отметить и легче находить её в списке форм. |
| Сайты размещения (Websites for this form) | Укажите точное название домена сайта, на котором вы размещаете форму подписки. Например, если ваш сайт находится на домене www.example.com, вам нужно указать домен с www.
Если вы укажете неверный домен, пользователь не сможет подписаться через вашу форму. |
| Соответствует GDPR (This form is GDPR compliant) | Включите этот переключатель, чтобы добавить переменные для передачи согласия на обработку персональных данных и использовать их в форме. |
| Язык уведомлений и ошибок (Error and notifications language) | Выберите язык, на котором будет отображаться текст ошибок и уведомлений. |
| Тип формы | Выберите вариант структуры шаблона: Встроенная (Embedded), Попап (Pop-up) или Плавающая (Floating). |
| Условие показа (Display condition) | Выберите, как будет отображаться форма подписки на вашем сайте. Можно настроить время, через которое после входа пользователя на сайт появится форма.
Опция Скрыть на мобильном (Hide on mobile) позволяет убрать показ формы подписки пользователям, зашедшим на сайт с мобильного устройства. |
| Повторный показ (Show again) | Установите интервал показа формы в несколько дней, чтобы реже показывать её пользователям, которые закрыли форму, не подписавшись. |
| Показывать на страницах (Show on pages) | Установите форму подписки на всех страницах сайта или отмените показ на определённых страницах. |
Уведомление о подписке
Уведомление о подписке — это сообщение, которое появится после того, как пользователь заполнит форму подписки и нажмёт кнопку «Подписаться».
Вы можете отредактировать заголовок уведомления, а текст уведомления — отредактировать и отформатировать:
| Стиль текста | Выберите стилистические свойства текста: жирный или курсив. |
| Цвет текста | Выберите цвет текста. |
| Вставить/редактировать ссылку | Добавьте ссылку к выделенному тексту или введите текст для показа. Введите текст, который будет появляться при наведении курсора на ссылку. Также выберите, где будет открываться ссылка: в текущей или новой вкладке. |
| Выравнивание | Выберите выравнивание текста: по центру, слева или справа. |
| Размер шрифта | Выберите размер текста. |
| Код | Разворачивает исходный код текстового блока, который вы можете отредактировать. |
| Изменение ориентации текста | Настройте ориентацию текста: справа налево или слева направо. |
Подтверждение подписки
Если включена опция Отправлять письмо подтверждения (Enable double opt-in), после подписки на сайте пользователь получит письмо с просьбой подтвердить подписку.
Ниже на панели можно изменить адрес отправителя, тему этого письма, а также отредактировать и отформатировать текст письма с помощью редактора.
Для адреса отправителя письма-подтверждения в форме подписки необходимо указывать почту на корпоративном домене. Это важно для прохождения спам-фильтров и узнаваемости отправителя.
Также вы можете настроить персонализацию в письмах подтверждения подписки. Для этого в текст письма вставьте переменные в виде %имя% или {{имя}}.
Добавленные в письмо подтверждения переменные должны быть созданы в адресной книге и связаны с полями формы подписки.
Страница подтверждения
Это страница, на которую перенаправляется новый подписчик после клика по ссылке подтверждения. Выберите из вариантов: Перенаправить на URL или Показать стандартную страницу с сообщением. Если вы перенаправляете подписчика на свой сайт, укажите ссылку.
Вы также можете настроить индивидуальную страницу успешной подписки. Для этого перейдите в меню Формы подписки (Subscription forms) > Страницы подтверждения подписки (Subscription confirmation pages) > Новая страница подтверждения.
Аналитика и статистика
В разделе Аналитика и статистика вы можете включить отслеживание подписок с сайта в Google Analytics и активировать сбор дополнительных меток.
Вставка кода формы на сайт
Для размещения формы подписки на сайте вам может понадобиться ее код. Чтобы получить код формы, нажмите кнопку опций справа от Сохранить (Save) и выберите Сохранить и получить код (Save and get code).
Чтобы отправить форму, ваш сайт должен содержать заголовок Referer, который указывает на источник запроса.
Код необходимо вставить в исходный код вашего сайта между тегами <body>. Если ваш сайт создан на платформе WordPress, вы можете добавить форму подписки с помощью плагина для WordPress от SendPulse. Еще один способ вставить код формы на сайт — использовать Google Tag Manager.
Просмотр списка подписчиков
Вы можете просмотреть всех, кто подписался, в выбранной адресной книге по дате подписки и переменной с названием вашей формы. Если вы выбрали подписку методом Double opt-in и пользователь не подтвердил подписку через почту, такой пользователь не будет добавлен в адресную книгу, и вы не сможете его отслеживать.
Валидация подписчиков через reCaptcha
Captcha защитит вашу адресную книгу от попадания в нее фальшивых подписчиков, рассылка которым может привести к попаданию ваших писем в спам. Если количество подписок превышает 100 в день, срабатывает reCAPTCHA. После прохождения теста на распознавание, пользователь в течение 10 секунд будет перенаправлен на предыдущую страницу.
Обновлено: 05.02.2024
или