В статье вы узнаете:

  1. О типах формы подписки, которые можно настроить в SendPulse
  2. Как указать адресную книгу для формы подписки
  3. Элементы, которые можно добавить в форму
  4. Настройка общего вида подписки во вкладке «Дизайн»
  5. Разрабатываем уведомление, письмо-подтверждение и страницу подтверждения подписки
  6. Как вставить код формы на сайт?
  7. Валидация подписчиков через reCAPTCHA

Вы можете пополнить базу email подписчиков с помощью формы подписки, для этого поместите ее на страницу вашего сайта или блога. Но для начала ее нужно создать с помощью «Конструктора форм». Рассмотрим, как работать с «Конструтором форм» чтобы получить форму подписки на любой вкус. 

Перейдите в меню «Формы подписки» → «Создать форму подписки».

Создать форму подписки

В SendPulse есть возможность создать форму с нуля или выбрать готовую.

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

  • «Готовые формы». Это простой способ создать форму. Выберите готовую форму и отредактируйте названия полей.  
  • «Конструтор форм». Здесь вы сможете создать форму подписки, применяя корпоративные цвета, шрифты и используя изображение.

"Перейти

Выберите тип формы подписки

В сервисе доступно 4 вида форм:

  • Встроенная форма. Используется для добавления формы подписки в самое удобное место вашего сайта.
  • Попап-окно. Данный вид позволяет настроить всплывающее окно, которое отобразится пользователю через определенный промежуток времени после нахождения на вашем сайте.
  • Плавающая. Будет отображаться в одном месте даже при прокрутке страницы пользователем.
  • Фиксированная. Закрепите местоположение в хедере, в левой (правой) колонке или в подвале сайта. 

Укажите адресную книгу 

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

Выберите адресную книгу

Далее нажмите "В редактор".

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

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

По клику на ней раскроется меню, в котором вы найдете следующие поля: «Имя», «Телефон», «Адрес», «Дата», «URL», «Уже подписан». Нажмите нужный элемент левой клавишей мыши и перетащите его в форму. 

Перетащите нужные элементы в форму

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

В правой части экрана есть вкладка «Элемент» для настройки каждого из вышеперечисленных элементов, а также вкладка «Дизайн» для настройки общего дизайна формы подписки.

Элементы, которые можно добавить в форму.

Рассмотрим каждый из элементов.

1. Поле ввода

С помощью данного элемента добавляйте поля в форму подписки. 

 Добавляйте поля ввода в форму подписки

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

2. Чекбокс

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

  1. новости,
  2. скидки,
  3. конкурсы,
  4. приглашения на события.

Добавляйте чекбокс

Данные из чекбокса передаются в сервис в таком виде: если отмечено — «yes», если не отмечено — «no». Полученная информация попадает в сервис в переменную, которую вы привязали к данному чекбоксу. Не забудьте ее создать заранее в адресной книге.

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

Настройки GDPR

Соответствие GDPR актуально прежде всего для рассылок, включающих подписчиков из стран Евросоюза.

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

Откройте меню «Опции формы»

Откройте опции формы

Во вкладке «Данные и тип формы» активируйте Соответствие с GDPR

Активируйте соответствие с GDPR

Так вы добавите в форму два чекбокса, необходимые для соответствия формы подписки регламенту GDPR.
Изменить текст в чекбоксах можно во вкладке Элемент.
*Рекомендуется сделать эти чекбоксы обязательными, чтобы клиент не смог подписаться на вашу рассылку, пока не даст формальное согласие с Правилами пользования и с Политикой конфиденциальности:

Редактируйте текст чекбоксов

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

GDPR переменные

Используйте потом эти переменные для более точной сегментации адресных книг.

3. Радиокнопки

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

Добавьте радиокнопки

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

В форму вы можете включить выпадающий список. Для этого задайте названия выпадающих пунктов в «Списке опций». Укажите значения к каждому из них, которое будет передаваться в переменную. На примере ниже создан выпадающий список городов, эта информация поможет таргетировать email кампании по городам.

Используйте выпадающий список

5. Текст

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

Редактируйте текст

6. Изображение

Вставляйте изображение с помощью элемента «Картинка», допустим размер до 1 Mb, и не более 600х600 пикселей.  Во вкладке «Элемент» задайте расположение по центру, справа или слева.

Вставляйте изображения

7. Разделитель

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

Используйте разделитель

Настройте общий вид формы подписки во вкладке «Дизайн»

В конструкторе есть возможность задать форме фон, скруглить углы, выбрать ширину и многое другое. Перейдем во вкладку «Дизайн» и рассмотрим все возможности. 

Меняйте дизайн

Первый раздел — «Стиль блока», второй — «Поля ввода и названия». Пошагово рассмотрим каждый из разделов.

1. Расположение полей

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

 «Вертикально»

 Настраивайте расположение полей

«Горизонтально».

 Настраивайте Горизонтальное расположение полей

2. На всю ширину

Эта опция растянет фон вашей формы подписки на всю ширину сайта.

Растягивайте форму на всю ширину сайта

3. Ширина формы

Регулируйте ширину формы от 200 до 960 пикселей. Приведем примеры, как форма отображается в различной ширине:

360 пикселей,

Регулируйте ширину формы

 960 пикселей.

 Ширина формы 960 пикселей

4. Фон формы

Устанавливайте фон формы подходящий вашему сайту. Для этого кликните на иконку цвета «rgba», откроется цветовая палитра и вы сможете подобрать нужный цвет. 

Устанавливайте фон формы

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

Задавайте прозрачность формы

5. Фоновая картинка

Для привлечения внимания пользователя используйте тематическое изображение. Рекомендуемый размер 496х600 пикселей, а объем 102117 байт. 

Используйте фоновую картинку

6. Контур 

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

 Установите размер контура

7. Внутренний отступ

Настройка отвечает за отступы от внешней границы элемента до его содержания. Чаще эти отступы называют полями. В «Конструткоре форм» вы сможете задать отступы от 5 до 40 пикселей. Мы применили максимальный отступ, вот что получилось.

Задайте внутренние отступы

8. Скругление углов

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

Задайте скругление углов

9. Шрифт

Откройте выпадающее меню шрифта и выберите подходящий. Доступны следующие шрифты: Arial, Segoe, Tahoma, Trebuchet MS, Verdana, Times New Roman, Georgia, Platino Linotype, Courier New, и даже Comic Sans MS. 

Выберите шрифт

Если вы выбрали изначальный вид формы попап-окно, то дополнительно в этом разделе отобразятся еще две настройки:

10. Фон подложки 

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

 Устанавливайте фон подложки

11. Эффект показа (только для попап-окна)

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

12. Размер полей

Доступно три опции размера: S — малый, M — средний, L — большой. 

13. Фон полей

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

Выберите фон полей

14. Границы 

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

 Задайте границы

15. Скругление углов

Доступно скругление углов «поля ввода» от 0 до 25. Поставьте 25 и получите максимальный эффект. В примере мы применили значение 8. 

Задайте скругление углов

16. Положение названий полей

В выпадающем меню вы можете выбрать следующие расположения названий полей (наше поле называется «Email»): «Сверху поля», «Слева от поля», «Внутри поля». В примере ниже мы выбрали «Сверху поля».

Выберите положение названий полей

Тут же можно указать размер шрифта к названию полей и его цвет, отформатировать его жирным и наклонным.

Разрабатываем уведомление о подписке, текст письма-подтверждения и страницу подтверждения подписки

После того как вы настроили желаемый дизайн формы, переходим к последнему шагу настроек, для этого нажмите «Опции формы».

Перейдите в опции формы

Слева вы видите разделы:

  • Данные и тип формы,
  • Уведомление о подписке,
  • Текст письма подтверждения,
  • Страница подтверждения.

 Разделы формы подписки

1. Данные и тип формы

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

«Попап» и «плавающая» имеют следующие дополнительные настройки:

Условие показа 

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

Скрыть на мобильном

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

Повторный показ

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

Показывать на страницах

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

2. Уведомление о подписке

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

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

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

3. Текст письма подтверждения

После подписки на сайте, пользователю отправляется письмо с просьбой подтвердить подписку. В данной закладке вы можете изменить адрес отправителя, тему данного письма, а также текст. Помните, что вам обязательно в тексте письма необходимо указать тег {{LINK}}? куда будет подставлена ссылка для подтверждения подписки.

Важно отправить письмо-подтверждение с адреса c корпоративным доменом. Это улучшит прохождение письма спам-фильтров. 

Что такое корпоративный домен? В случае, если у вас уже есть свой сайт, и домен зарегистрирован, можно создать корпоративный адрес электронной почты, который будет содержать ваше уникальное доменное имя после символа @. Итак, если ваше доменное имя mycompany.ru, то корпоративный адрес может быть следующим: yourname@mycompany.ru.

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

 Редактируйте текст письма подтверждения

4. Страница подтверждения

Это страница, на которую перенаправляется новый подписчик после клика на ссылку подтверждения. Выберите из вариантов: «Страница на вашем сайте» или «Стандартная». Если вы перенаправляете подписчика на свой сайт, укажите ссылку.

Укажите страницу подтверждения подписки

Вы также можете настроить индивидуальную страницу об успешной подписке. Для этого перейдите в меню «Формы подписки» → «Страницы подтверждения подписки» → «Новая страница подтверждения».

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

Скопируйте полученный код формы подписки

Как вставить код формы на сайт?

Код необходимо вставить в исходный код вашего сайта между тегами <body>. Если у вас сайт на WordPress, вы можете добавить форму подписки с помощью этого плагина. Еще один способ вставить код формы на сайт — использовать Google Tag Manager. 

Валидация подписчиков через reCAPTCHA

Капча защитит вашу адресную книгу от попадания в нее фейковых подписчиков, отправляя рассылку по которым вы попадете в спам. При количестве подписок более 100 в день срабатывает reCAPTCHA. После прохождения теста на распознавание, пользователь будет перенаправлен на предыдущую страницу в течение 10 секунд. 

Валидация подписчиков через reCAPTCHA

Теперь вы знакомы со всеми возможностями конструктора форм подписки.

Приступить к созданию формы

Оцените, насколько полезна статья "Конструктор форм"

User Rating: 4 / 5 (9)

Другие полезные страницы

Популярное в нашем блоге

Начните пользоваться сервисом SendPulse прямо сегодня