Гайды

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

Как сделать, куда поставить и что предложить
От редакции

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

В прошлом выпуске рубрики мы рассказывали, как сделать email-рассылку по закону. В этом выпуске — о формах подписки на рассылку: какие они бывают, как их создать и улучшить.

Форма подписки превращает посетителей сайта в подписчиков. Одни формы справляются с этим на ура, другие нет. Учимся делать первые.

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

Что влияет на конверсию формы подписки:

  • Ежедневное количество посетителей на сайте.
  • Количество показов формы.
  • Отношение клиентов к бренду.
  • Известность рассылки. Например, чтобы подписаться на Invisible, люди выстраиваются в очередь.

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

Из чего состоит форма

Основные элементы формы подписки:

Элементы формы подписки
4 основных элемента

Остановимся подробнее на каждом элементе.

Заголовок

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

Содержание заголовка зависит от расположения формы подписки на сайте. Главное правило — заголовок должен органично вписывается в суть страницы. Несколько примеров:

Для блога Узнайте первыми о новых статьях

Полезные материалы почтой

Для главной страницы Присоединяйтесь к нашему сообществу

Узнавайте об акциях, скидках и новых поступлениях

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

У нас кое-что для вас есть.

А вот пример классного заголовка:

Пример хорошего заголовка
Форма подписки в блоге о доказательной медицине «Только спросить»

Текст

Текст объясняет, что это за рассылка и какая от нее польза читателю. О чем можно написать:

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

Удачный пример:

Форма подписки EmailSoldiers
Форма подписки Email Soldiers. Рассказали, о чем рассылка и как часто приходят письма
Прокачайте рассылки по-максимуму 💪
Учитесь в школе email-маркетинга → получаете 100% кешбек на счёт в Unisender → делаете крутые рассылки и много зарабатываете 💸
Вперёд!
Как сделать конверсионную форму подписки своими руками 4

Форма

Это поля, куда посетители сайта вбивают свои данные: email, телефон, имя или предпочтения по товарам. Email-маркетологи придерживаются единого мнения: меньше полей — выше конверсия.

Исследование Marketing Experiments — сравнение форм на 5, 7 и 9 полей:

5 полей
Конверсия 13%
Стоимость лида $31
7 полей
Конверсия 12%
Стоимость лида $35
9 полей
Конверсия 10%
Стоимость лида $42
Вывод

Спрашивайте только то, без чего не обойтись. Если сегментация базы требует больше 2-3 полей, остановитесь. Лучше собрать меньше данных, но привлечь больше людей, чем остаться без подписчиков. Окончательно сегментировать базу можно позже.

Согласие на рассылку и обработку персональных данных

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

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

Кнопка

Большая и привлекательная кнопка с надписью «Подписаться» или чем-то похожим.

Какая форма будет лучше работать?

В одной форме заголовок, 3 поля и кнопка. В другой — текст и 7 полей. Какая лучше?

Зависит от аудитории и предложения. Что сработало в интернет-магазине, может не выстрелить в B2B. Поэтому формы надо тестировать: делать несколько вариантов, пускать трафик и смотреть, с какой формы лучше идут регистрации.

Подробнее о тестах:

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

В чем сделать форму подписки

Я знаю 3 способа, как сделать форму подписки:

  1. Использовать конструкторы форм.
  2. Сверстать вручную в HTML.
  3. Заказать.

Рассказываю о каждом подробнее.

Использовать конструкторы форм

Эти инструменты можно найти в сервисах по созданию сайтов, специальных сервисах для создания форм и в сервисах рассылки. Работать в них просто: есть наборы готовых шаблонов, а новые элементы можно просто добавлять из готовых наборов. Знать HTML и CSS не обязательно.

Пример построения формы подписки в конструкторе Юнисендер
Беру блок и перетаскиваю. Так работает редактор форм Unisender

Вот несколько популярных конструкторов, в которых за 30 минут можно сделать красивую форму подписки: FormDesigner, Wppage, Tilda, PopMechanic, SumoMe. Советуем сразу проверить, можно ли привязать форму из конструктора к сервису рассылки. Так адреса из формы будут напрямую попадать в списки контактов в сервисе рассылки. Если использовать редактор формы, встроенный в сервис рассылки, то все контакты будут автоматически попадать в базу подписчиков.

Сверстать вручную

Подходит, если вы знаете HTML и CSS. При верстке вручную нет шаблонных ограничений: форма может быть какой угодно.

Как это работает: вы вносите HTML и CSS в программу. Чтобы увидеть страницу нужно сохранить файл и загрузить его в браузере. Примеры программ, в которых можно работать с языками разметки: Eclipse, Visual Studio Code, Notepad++.

Заказать

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

Создавайте конверсионные формы в Unisender
Соберите красивую форму и разместите её на сайте. Знать HTML и CSS не нужно.
Попробовать
Как сделать конверсионную форму подписки своими руками 6

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

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

Итак, какие бывают виды форм:

Подписные страницы, лендинги. Целая страница, которая выделена под форму подписки:

Лендинг
Вся страница работает на сбор контактных данных

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

Форма подписки полосой
Форма подписки выделяется с помощью контрастной полосы

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

Сайдбар
Кроме формы подписки в сайдбар часто помещают новости, чат или баннерную рекламу

Hello-bar. Окно, которое выезжает или всплывает в шапке сайта.

Hello-bar
Hello-bar прилипает к верхнему краю, когда вы скроллите страницу

Всплывающие окна. Читаешь такой статью и тут — вжух! — тебе предлагают подписаться.

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

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

Попап для сбора exit-трафика
Хотел закрыть страницу, и тут появилась форма

После статей. Прочитал статью — подписался на рассылку.

Форма подписки в блоге
Удобно, если у вас есть блог

На странице заказа товара. Вы хотите что-то купить и заполняете для этого форму. Одно из полей формы — email.

Форма подписки при оформлении заказа
И чекбокс с согласием есть. Круто!

В соцсетях. Формы подписки можно создавать даже в соцсетях.

Так выглядит форма подписки в Facebook*
Так выглядит форма подписки в Facebook*

Хорошо, форму сделали и установили ее на сайте. Теперь задумаемся, как ее можно прокачать.

Как прокачать форму подписки

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

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

Сегментировать аудиторию для показа

А этот пункт я нагло украл в Школе email-маркетинга Unisender. Ваня Ильин рассказывал о формах подписки и упомянул про сегментацию посетителей. Приведу пример, как это работает.

Пример

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

Как еще можно работать с показами формы:

  • Демонстрировать форму только на определенных страницах. Например, скидка в форме согласована с товаром, который смотрит пользователь.
  • Если работаете со всплывающими формами, проследите, чтоб они появлялись только 1 раз. Миняажтрисёт, когда приходится несколько раз закрывать одну и ту же форму.

Адаптировать под смартфоны

Факт: 57,2% посетителей сайта заходят с мобильных телефонов. Если форма подписки не адаптирована под них, то мы потеряем половину потенциальных подписчиков.

Тестировать

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

  • Время появления. Определяет, через сколько секунд появится форма.
  • Глубина просмотра. Сколько страниц пользователь должен просмотреть, чтобы появился поп-ап.
  • Место появления: по центру, сбоку или внизу страницы.

Обобщим статью:

Формы подписки, памятка

Обновлено 31 марта 2023 г.