menu

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

Пошаговый путеводитель с примерами

Форма подписки превращает посетителей сайта в подписчиков. Одни формы делают это хорошо, другие не очень. Как создать конверсионную форму подписки? Давайте разбираться.

Для начала сравним 2 подписные формы:

Длинная форма
Форма №1
Короткая форма
Форма №2

Завидую людям с железными нервами. Они могут заполнить форму №1 до конца. Разместив такую форму, компания позаботилась о себе: менеджер по продажам будет знать о подписчике все, включая сугубо юридическую информацию. Email-маркетолог сможет детально сегментировать базу и начнет рассылать SMS на указанный номер.

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

Форма №2 куда дружелюбнее: заполнил два поля — и первое письмо уже в инбоксе. Здесь компания позаботилась о посетителе и наверняка выиграла в конверсии. Оставшиеся данные для CRM соберет менеджер или email-маркетолог.

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

Инструменты для создания формы подписки

Многие думают, что создавать формы подписки — удел программистов. Это не так. Сделать форму руками под силу любому маркетологу. Главное — подобрать правильный инструмент.

Перечислим их. Будем идти от сложного к простому.

Визуальные редакторы и редакторы исходного кода

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

Верстка в Kompozer
Окно визуального редактора KompoZer. В центре — вид сайта, по сторонам — рабочие инструменты

В редакторах кода можно создать точную и гибкую разметку страницы, которая адаптируется под  разное разрешение экрана. Примеры редакторов: Eclipse, Visual Studio Code, Notepad++.

Этот вариант подходит, если вы программируете или хотите разобраться в верстке. Если нет — идем дальше.

Конструкторы сайтов и форм

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

https://gyazo.com/07a776861d4cfa7600e2173912104929

Вы меняете цвет и размер блоков, вставляете новые поля и задаете алгоритм работы каждого элемента. Знать языки программирования не надо.

Несколько популярных конструкторов: FormDesigner, Witget, Wppage. Большинство из них легко интегрировать с сервисом email-рассылок.

Заказать

Если с конструкторами и визуальными редакторами не заладилось, наймите фрилансера. Зайдите на любой фрилансерский сайт, например, fl.ru или freelance.ru. Разместите заказ утром и к вечеру несколько человек предложат вам свои услуги.

Эксперты UniSender тоже могут создать для вас форму подписки или сверстать письмо. Просто оставьте заявку на этой странице.

Конструктор форм UniSender

Легко собрать форму из блоков при помощи встроенного в сервис редактора. Зайдите во вкладку «Инструменты» в Личном кабинете и создайте форму за 5 минут.

Личный кабинет UniSender
Конструктор форм в Личном кабинете UniSender

Элементы формы подписки

Из чего состоит конверсионная форма подписки?

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

Представьте ситуацию: вам нужно сделать форму подписки для кулинарного сайта «Email-шеф». Давайте пройдемся по основным элементам формы и вместе придумаем для нее текст и дизайн.

Заголовок

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

Возможные заголовки для сайта «Email-шеф»:

Заголовки для формы Email-шефа

Текст

Размещать текст под заголовком не обязательно. Но в нем можно ответить на вопросы:

  • о чем рассылка;
  • в чем польза для читателя;
  • как часто приходят письма.

Напишите это одним предложением или кратким маркированным списком. Задача — показать пользу.

Заголовок формы подписки

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

Соединим заголовок и текст:

Заголовок и текст формы Email-шефа
Заголовок и текст формы подписки на рассылку «Email-шефа»

Форма

Email-маркетологи придерживаются единого мнения: меньше полей — больше конверсия. Часто для успешной рассылки не нужно ничего кроме адреса. Например, Imagescape сократили форму с 11 полей до 4 и увеличили конверсию в 2 с лишним раза.

Рост конверсии формы подписки
Меньше полей — больше конверсия в подписку

Marketing Experiments сравнивали формы на 5, 7 и 9 полей. Вот что получилось:

Конферсии больших и маленьких форм

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

В формах встречаются и другие преграды:

  • повторный ввод пароля;
  • капчи;
  • выпадающие списки;
  • обнуление формы, если она заполнена неверно.

Чтобы собирать подписчиков, все это не нужно.

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

  1. Имя.
  2. Email-адрес.
  3. Что предпочитает готовить: кондитерские изделия, мясо, выпечку, фастфуд.
  4. Телефон для обратной связи при заказе.
  5. Адрес доставки.

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

Мы пожертвовали 3 полями, чтобы упростить форму. Вот что получилось:

Форма Email-шефа
Заголовок, текст и поля формы

Кнопка отправки

Ничего необычного: большая и привлекательная кнопка с надписью «Подписаться» или «Получить». Добавляем и готово.

Готовая форма Email-шефа
Добавили кнопку. Готово.

Дизайн

Зависит от того, где размещена форма. Если для нее создана отдельная страница, то можно разгуляться: вставить изображения, прикрепить видео или добавить инфографику.

Мы просто добавили качественную фоновую фотографию.

При желании можно поставить счетчик, который будет считать подписчиков. Он послужит хорошим социальным доказательством. У Email-шефа пока подписчиков нет, а ставить неверные цифры нечестно. Поэтому мы счетчик не ставим.

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

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

Форму подписки надо ставить там, где у сайта больше посетителей, готовых совершить действие. В нашем случае — подписаться на рассылку. Это могут быть:

  1. Шапка сайта.
  2. Меню оформления заказа.
  3. Статьи в блоге.

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

Форма подписки может выглядеть по-разному:

  • закрепленный элемент страницы;
  • всплывающее окно.
  • pop-up и pop-under. Преследует при скролле вверх или вниз.
  • мини-баннер. Кликаешь — переходишь к форме.

Тестируйте

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

  • vospari

    Есть ли у вас функционал показывать форму подписки посетителям сайта, идентифицируя их по utm метке?

    • Пока такого функционала нет, но мы над ним работаем. Разработчики обещают после Нового года.

    • У нас кстати есть, если интересно makedreamprofits.ru/jo/