Как сделать конверсионную форму подписки своими руками
Как сделать, куда поставить и что предложить
От редакции
Рубрика «Новичкам» — пошаговый гайд для тех, кто только начинает работать с рассылками. Здесь всё, что пригодится для подготовки и запуска email-маркетинга. В каждом выпуске разбираем отдельную тему.
В прошлом выпуске рубрики мы рассказывали, как сделать email-рассылку по закону. В этом выпуске — о формах подписки на рассылку: какие они бывают, как их создать и улучшить.
Форма подписки превращает посетителей сайта в подписчиков. Одни формы справляются с этим на ура, другие нет. Учимся делать первые.
Сразу оговоримся: не только форма подписки влияет на то, сколько человек подпишется на рассылку.
Что влияет на конверсию формы подписки:
Мы поговорим о факторах, которые связаны с формой подписки: ее элементах, расположении на сайте и инструментах для создания.
Из чего состоит форма
Основные элементы формы подписки:
4 основных элемента
Остановимся подробнее на каждом элементе.
Заголовок
Задача заголовка — привлечь внимание посетителей. Обычно для него используют крупный и контрастный текст.
Содержание заголовка зависит от расположения формы подписки на сайте. Главное правило — заголовок должен органично вписывается в суть страницы. Несколько примеров:
А вот пример классного заголовка:
Форма подписки в блоге о доказательной медицине «Только спросить»
Текст
Текст объясняет, что это за рассылка и какая от нее польза читателю. О чем можно написать:
Форма подписки Email Soldiers. Рассказали, о чем рассылка и как часто приходят письма
Прокачайте рассылки по-максимуму 💪
Это поля, куда посетители сайта вбивают свои данные: email, телефон, имя или предпочтения по товарам. Email-маркетологи придерживаются единого мнения: меньше полей — выше конверсия.
Исследование Marketing Experiments — сравнение форм на 5, 7 и 9 полей:
Вывод
Спрашивайте только то, без чего не обойтись. Если сегментация базы требует больше 2-3 полей, остановитесь. Лучше собрать меньше данных, но привлечь больше людей, чем остаться без подписчиков. Окончательно сегментировать базу можно позже.
Согласие на рассылку и обработку персональных данных
Эти пункты защищают отправителя от жалоб пользователей и проверок со стороны ФАС. Во втором выпуске «Рассылок для чайников» мы писали, как правильно взять согласие на рассылку и обработку персональных данных. Если вкратце:
Кнопка
В одной форме заголовок, 3 поля и кнопка. В другой — текст и 7 полей. Какая лучше?
Зависит от аудитории и предложения. Что сработало в интернет-магазине, может не выстрелить в B2B. Поэтому формы надо тестировать: делать несколько вариантов, пускать трафик и смотреть, с какой формы лучше идут регистрации.
Подробнее о тестах:
А еще мы в блоге с нуля создали форму подписки для несуществующей компании. Вот как это было.
В чем сделать форму подписки
Я знаю 3 способа, как сделать форму подписки:
Рассказываю о каждом подробнее.
Использовать конструкторы форм
Эти инструменты можно найти в сервисах по созданию сайтов, специальных сервисах для создания форм и в сервисах рассылки. Работать в них просто: есть наборы готовых шаблонов, а новые элементы можно просто добавлять из готовых наборов. Знать HTML и CSS не обязательно.
Беру блок и перетаскиваю. Так работает редактор форм Unisender
Вот несколько популярных конструкторов, в которых за 30 минут можно сделать красивую форму подписки: . Советуем сразу проверить, можно ли привязать форму из конструктора к сервису рассылки. Так адреса из формы будут напрямую попадать в списки контактов в сервисе рассылки. Если использовать редактор формы, встроенный в сервис рассылки, то все контакты будут автоматически попадать в базу подписчиков.
Сверстать вручную
Подходит, если вы знаете HTML и CSS. При верстке вручную нет шаблонных ограничений: форма может быть какой угодно.
Как это работает: вы вносите HTML и CSS в программу. Чтобы увидеть страницу нужно сохранить файл и загрузить его в браузере. Примеры программ, в которых можно работать с языками разметки: Visual Studio Code
Заказать
Обращаемся к фрилансерам или в агентство. Если хотите собрать базу с нуля, можете обратиться к нам. Мы сделаем формы подписки, протестируем их и установим на сайт.
Создавайте конверсионные формы в Unisender
Соберите красивую форму и разместите её на сайте. Знать HTML и CSS не нужно.
Итак, какие бывают виды форм:
Подписные страницы, лендинги. Целая страница, которая выделена под форму подписки:
Вся страница работает на сбор контактных данных
Форма подписки на всю ширину страницы. Такие формы часто вставляют в подвал сайта.
Форма подписки выделяется с помощью контрастной полосы
Сайдбары. Сайдбар — это узкая боковая полоса, которая идет рядом с основной лентой сайта.
Кроме формы подписки в сайдбар часто помещают новости, чат или баннерную рекламу
Hello-bar. Окно, которое выезжает или всплывает в шапке сайта.
Hello-bar прилипает к верхнему краю, когда вы скроллите страницу
Всплывающие формы для сбора exit-трафика. Похоже на обычную всплывашку, но здесь «вжух!» происходит, когда мы хотим закрыть вкладку браузера.
Хотел закрыть страницу, и тут появилась форма
После статей. Прочитал статью — подписался на рассылку.
Удобно, если у вас есть блог
На странице заказа товара. Вы хотите что-то купить и заполняете для этого форму. Одно из полей формы — email.
И чекбокс с согласием есть. Круто!
В соцсетях. Формы подписки можно создавать даже в соцсетях.
Хорошо, форму сделали и установили ее на сайте. Теперь задумаемся, как ее можно прокачать.
Как прокачать форму подписки
Мы уже писали, что подарки за подписку — не всегда гуд. Они требуют затрат, а многие подписчики будут оставлять email только ради бонуса. Дарить или не дарить? Отвечаем в статье про бонусы за подписку
Сегментировать аудиторию для показа
А этот пункт я нагло украл в Школе email-маркетинга Unisender. Ваня Ильин рассказывал о формах подписки и упомянул про сегментацию посетителей. Приведу пример, как это работает.
Пример
Пользователям, которые пришли на сайт из email-рассылки, мы не показываем формы подписки. Посетители из поискового трафика и соцсетей эти формы видят. Итог: подписчики не отвлекаются на ненужную информацию.
Как еще можно работать с показами формы:
Тестировать
Под каждый сайт нужна своя форма подписки. Чтобы определить какая именно, нужно тестировать: пробовать разные дизайны, текст, подарки и условия показа. Например, только для всплывающих форм можно выделить 3 основных параметра для теста:
Обновлено 31 марта 2023 г.
Поделиться
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы
и интервью с экспертами диджитала.
Ну и как всегда, я приветствую всех читателей и посетителей этого блога.
На днях мне был задан вопрос, как создать красивую форму подписки.
Ну я писал уже о форме подписки, но только в конце каждой статьи. Об этом вы можете почитать:
Ну и сегодня хочу рассказать, как создать красивую форму подписки в сайтбаре.
Есть две основные формы подписки, это (RSS) и SmartResponder.
Мы рассмотрим обе формы подписки. Но в этой статье, мы будем создавать только подписку на (RSS).
Создаем форму подписки вариант № 1
Для этого в сервисе , у вас должен быть зажжен . Открываете его и заходите во вкладку «Оповещать», как показано на ниже.
Далее переходим по ссылке «Подписки по электронной почте» и скачиваете сформированный для вас код и вставляем в .
И смотрите какая у нас вышла форма подписки.
Но она смотрится невзрачно, да еще на английском языке. Здесь можно все изменить и исправить. Но я хочу вам предоставить код, для симпатичной формы подписки.
Здесь вы скачиваете архив с двумя кодами и иконками соц сетей:
В коде для , в двух местах заменяете мое значение / на свое. Вы его берете из своего кода, который вы взяли в сервисе .
А вот где он находится, вы можете увидеть в самом верхнем . Там отмечен мое значение /. А у вас свое в этом же месте, вот его и меняем.
Здесь уже прописаны адреса соц сетей, вам только нужно изменить на свои адреса.
После в корневой папке вашего блога, создаете папку и называете ее и скачиваете в нее иконки из архива. Далее этот код устанавливаем в свой или куда вам нравится.
Далее что бы отлично все смотрелось, нам нужно отредактировать стили.
Для этого, переходим в Админ панели блога, заходим в Редактор и в (.)
в самом низу, вставляем код, который скачали с архивом и называется «код стилей»
В коде вы можете подкорректировать под свой блог и после сохраниться.
Теперь смотрим что получилось после сохранения у меня
Не торопитесь и все у вас получится
Делаем форму подписки вариантом № 2
А вот еще один интересная подписная форма.
Для начала скачиваете архив с тремя кодами и иконками соц сетей:
Нам будет нужен код с названием«код бара», в нем вы меняете мое значение / на свое и вставляете в .
Далее скачиваем на блог вот такую картинку:
Она будет так же находиться в архиве.
Далее нам нужно зайти в Редактор и в самом низу файла . выставить код, который находится в скаченном архиве и называется«код для стилей». Но прежде чем сохраниться, в коде нужно прописать ссылки на ваши картинки.
Теперь сохраняемся и смотрим что у нас получилось.
У меня вышло так
Отлично вышло.
Так же в эту форму, можно добавить иконки соц сетей.
Берем код который так же находится в архиве и называется «код бара с соц кнопками», меняем там свои данные.
После всех изменений, сохраняем в и заходим на страничку посмотреть что у нас вышло.
Кстати забудьте в корневой папке блога, папку и сохранить там иконки, которые были даны в архиве.
Форма подписки вариант № 3
Ну и в заключении, я хочу вам предоставить код формы подписки, который установлен у меня.
В этом коде уже прописаны стили. Единственное что вам нужно, это заменить мои данные / на свои.
После того как вы все изменили в коде, закидываете его в и сохраняетесь.
Теперь заходим на блог и смотрим что у нас получилось.
Ну и на этом закончим.
В следующей статье, напишу как создавать форму подписки в SmartResponder.
Если возникнут вопросы, задавайте в комментариях
Форма подписки – первая точка контакта с клиентом на его пути к получению email-рассылок. И от того, насколько хорошо форма спроектирована, зависит, окажется он в нашей базе подписчиков или нет. Сегодня разберем рецепт для идеальной формы подписки: 105 гайдлайнов с примерами.
Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr. Статья без спойлеров, с примерами, открытыми по умолчанию, доступна по этой ссылке.
Структура статьи
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
Размещение формы
Достаточно часто форму подписки на рассылку можно встретить в нижней части страницы: в футере или рядом с ним.
Блок на главной
Если рассылка – важный и активно используемый канал связи с клиентами, форму подписки можно разместить в качестве отдельного блока на главной странице.
Листинг товаров
Форму подписки также можно включить в листинг товаров, чтобы сделать интерфейс разнообразнее и снизить риск пользовательской «усталости» при просмотре.
Страница подтверждения заказа
Страницу подтверждения заказа можно использовать с умом, извлекая из нее дополнительную пользу. В том числе, размещая призыв к подписке на рассылку.
Всплывающее окно
Форму подписки можно разместить во всплывающем окне, фиксированном при прокрутке. Но главное, чтобы оно не было навязчивым и не перекрывало собой основной контент.
Интерфейс регистрации
Так как email и соц.сети – это равноправные каналы получения информации, почему бы не разместить их рядом? Вплоть до включения в единый блок.
Визуализация
Сделайте форму подписки заметной, реализовав ее в качестве самостоятельного блока, чтобы она привлекала больше внимания клиентов.
Видна по умолчанию
Форма должна быть видна по умолчанию, чтобы клиенту не требовалось совершать какие-либо дополнительные действия перед началом ввода email’а.
Не видна, если клиент подписан
Если клиент уже подписался на вашу рассылку, форму подписки можно не отображать, чтобы не отвлекать его и исключить риск повторной подписки.
Без визуального шума
По возможности расположите форму так, чтобы ее не окружали вторичные элементы, которые могут размыть внимание.
Визуально привлекательна
Поработайте с дизайнером над формой подписки, сделайте ее нестандартной. Визуально привлекательная форма более заметна и может повысить шансы на подписку.
Содержит релевантные элементы
Чтобы форма легче ассоциировалась с рассылкой и быстрее считывалась, в нее можно добавить соответствующие визуальные элементы. Например, конверт или письмо:
Призыв к действию
Размещение рядом с формой подписки на рассылку явного призыва к действию может повысить вероятность, что клиент его совершит.
Отталкивается от глагола
Так как это призыв к действию, он должен отталкиваться не от существительного, а именно от глагола в повелительном наклонении.
Содержит вопрос к клиенту
В качестве альтернативы глаголу в повелительном наклонении в рамках призыва к действию клиенту можно задать вопрос:
Польза от рассылки понятна
Дайте клиенту понять, зачем ему оставлять свой email: в явной форме расскажите, какую дополнительную выгоду он получит, подписавшись на вашу рассылку.
Визуальный highlight выгоды
Выгоду, получаемую при подписке, можно дополнительно выделить на фоне остального текста в призыве к действию, чтобы сфокусировать на ней внимание клиента.
Highlight контента рассылки
В форме подписки также можно подсветить, какой именно контент будет приходить в рамках рассылки: это задаст ожидания клиента с самого начала.
Highlight частоты рассылки
Рядом с формой также можно подсветить, как часто вы будете присылать клиенту рассылку. Это позволит лучше управлять его ожиданиями.
Placeholder
Базовый момент: добавьте в поле ввода email-адреса placeholder, чтобы клиенту было понятно, какие данные требуется ввести.
Визуально отличен от текста
Так как placeholder – это не введенный текст, и у него есть своя функция, стоит подчеркнуть это различие визуально. Например, сделав placeholder полувыцветшим.
Достаточно контрастен
При этом placeholder должен быть контрастным по отношению к фону и должен хорошо читаться. Проверить контрастность вашего placeholer’а можно здесь.
В формате СТА
Вместо просто названия поля в его placeholder можно добавить призыв к действию – вводу своего email.
Без указания обязательности
Если поле в форме всего одно, добавлять в его placeholder звёздочку, которая говорила бы об обязательности его заполнения, будет излишне.
Не пропадает при активации
Placeholder не должен пропадать сразу же при активации поля. Клиент должен видеть его как минимум до момента начала ввода текста.
Виден при вводе текста
При вводе placeholder может уменьшаться и оставаться видимым сверху от вводимого текста. Так клиент в любой момент сможет понять, что ввел нужный тип данных.
Placeholder – иконка?
Нестандартный и интересный вариант исполнения placeholder’а – это иконка. Как вам? Очевидно или все же может вызвать вопросы? Напишите в комментариях.
Заполнение формы
Попытка запросить у клиента больше данных, чем просто email, значительно снизит шансы на заполнение формы. К такой практике лучше не прибегать:
Реакция поля на наведение
Сделайте поле ввода интерактивным, чтобы оно реагировало на наведение курсора и побуждало клиента к его активации.
Реакция поля на активацию
Изменение внешнего вида поля при его активации даст клиенту дополнительное подтверждение того, что можно начать ввод данных.
Без системной обводки
При этом появление системной обводки при активации поля лучше отключить, т.к. она в большинстве случаев будет идти вразрез с общим дизайном сайта.
Раскладка на мобильных
Промаркируйте поле ввода, как email, чтобы при его активации на мобильных появлялась специальная раскладка, и клиенту не приходилось ее переключать.
Ограничение ввода
Реализуйте авто-заполнение поля данными, сохраненными в браузере, чтобы избавить клиента от ручного ввода своего email-адреса.
Авто-заполнение корректно
Убедитесь, что поля с авто-заполнением промаркированы корректно. Если вы просите ввести email, не стоит в авто-подсказке предлагать вставить номер телефона.
Заполнение по умолчанию
Если клиент авторизован и мы знаем его email, поле для ввода может быть заполнено по умолчанию – ему останется лишь нажать на кнопку подписки.
Вводимый текст не обрезается
Сделайте поле достаточно широким, чтобы при вводе email’а значение не обрезалось и было видно полностью.
Выравнивание по левому краю
Выравнивайте вводимый текст по левому краю текстового поля: не стоит его центрировать и устанавливать курсор посредине placeholder’а при активации.
Цвет вводимого текста
Не используйте для текста цвета, ассоциирующиеся с некорректным вводом. Если водимый текст красный, это может ввести клиента в заблуждение, что он допустил ошибку.
Быстрая очистка
Если клиент по ошибке вставил не тот адрес, кнопка быстрой очистки позволит стереть его в 1 клик и потратить время только на ввод нового email’а.
Поле пустое? Без кнопки очистки
Если мы и так уже стерли данные в поле ввода, и в нем отображается лишь placeholder, кнопку очистки можно скрывать, т.к. она становится ненужной.
Без лишних подсказок
Не стоит размещать в форме излишние контекстные подсказки по очевидному действию заполнения поля. Они лишь будут играть роль визуального шума.
Без функции отписки
Функцию отписки лучше вывести в личный кабинет / в сами сообщения. Но если клиент сталкивается с ней при подписке, это может ввести его в ступор и вызвать вопросы.
Выбор рассылки
Если вы делаете несколько рассылок, дайте клиенту возможность выбрать ту, которая подходит ему больше всего, тем самым персонализируя его будущий опыт.
Email + SMS-рассылка?
Нестандартный кейс: при заполнении формы клиент может выбрать email или SMS-рассылку. Каковы плюсы и минусы у такого исполнения? Напишите в комментариях.
Отправка нажатием на кнопку
Базовый момент: при нажатии на кнопку подписки должно происходить подтверждение ввода и отправка данных в систему.
Отправка нажатием на Return/Enter
Также предусмотрите отправку данных с помощью нажатия на клавишу Return/Enter – это также является распространенным паттерном поведения.
Валидация ввода
Наиболее подходящий момент для валидации введенных клиентом данных – это нажатие на кнопку подтверждения подписки.
При деактивации поля
Также имеет смысл реализовать валидацию при деактивации поля, когда внимание клиента уже смещается со ввода данных (например, при клике вне поля).
При нажатии на Return/Enter
Так как нажатие на клавишу Return/Enter зачастую аналогично нажатию на кнопку отправки, в этот момент также должна срабатывать и валидация адреса.
Не при вводе данных
При этом нет смысла проверять вводимые данные сразу же, когда клиент только начал вводить свой email. Такая неуместная валидация может ввести клиента в ступор.
Highlight поля
Если при вводе значения в поле была допущена ошибка, хорошей практикой будет выделить его, привлекая внимание клиента.
Поддержка проблем со зрением
Поле в случае ошибки можно не только подсветить, но и снабдить его соответствующей иконкой, которая привлекала бы дополнительное внимание.
Активация поля при ошибке
В случае ошибки, так как клиенту все равно придется ее корректировать, эту задачу можно упростить, активируя поле ввода автоматически. Сэкономим клиенту 1 клик.
Highlight успешной валидации
Если email-адрес соответствует всем требованиям, это можно дополнительно подсветить. Например, за счет зеленой обводки или галочки.
Ограничения по символам
Специальные символы не должны встречаться рядом друг с другом. С них не должны начинаться и ими не должны заканчиваться ни имя пользователя, ни домен.
Состав домена
Домен может содержать только буквы (a-z, а-я), цифры (0-9) и дефис. Также домен должен содержать минимум 1 точку (несколько, если используются субдомены).
Ровно один символ @
Если клиент ошибся при вводе и ввел некорректный email-адрес, должно появляться сообщение, которое говорило бы ему об этом.
Рядом с полем ввода
Разместите сообщение об ошибке рядом с полем ввода email-адреса, чтобы связь между ними визуально легче читалась.
Не внутри поля ввода
Не стоит размещать сообщение об ошибке внутри поля ввода, так как есть риск, что оно перекроет собой email-адрес, который клиенту нужно поправить.
Хорошо заметно
Сделайте сообщение об ошибке хорошо заметным, чтобы оно лучше привлекало внимание клиента. Текст или tooltip красного цвета хорошо для этого подойдут.
Легко читается
При этом важно учитывать, на каком фоне будет отображаться текст. В некоторых случаях текст красного цвета будет читаться «не идеально»:
Поясняет ошибку
Плюсом будет, если в зависимости от результатов валидации текст сообщения будет изменяться и подстраиваться под конкретную ошибку, которую допустил клиент.
Отталкивается от действия
Вместо просто констатации факта ошибки, в текст сообщения также можно добавить призыв ее скорректировать.
На языке интерфейса
Сообщение должно быть на языке интерфейса: если сайт отображается на русском, будет странно, если сообщение клиент увидит на английском.
Не дублируется
Базовый момент. Сообщение об ошибке должно быть одно. В его дублировании особого смысла нет.
Пропадает при повторном вводе
Текст ошибки должен пропадать при повторной активации поля и вводе данных. Иначе клиента можно ввести в заблуждение: «данные я поправил, а ошибка сохраняется».
