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

Базовая функция формы подписки — собирать электронные почты пользователей и подписывать их на рассылку. А вот на то, захотят ли люди оставить там свой email, будет влиять множество факторов. Часть из них зависит и от того, как выглядит форма, просто ли её заполнять и понятен ли результат.

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

Какие формы подписки бывают

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

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

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

Дополнительные форматы. Чекбоксы в настройках профиля или при регистрации на сайте, а также кнопки подписки в соцсетях. Обычно они используются в качестве дополнительной возможности подписаться — а основную функцию сбора email выполняют элементы или страницы.

Выбор зависит в первую очередь от технических особенностей платформы (на лендинге не получится сделать отдельную страницу, а при бесконечной главной — убрать форму в подвал). Также на него влияют путь пользователя, особенности рассылки и другие факторы. Но содержание формы при этом остаётся плюс-минус похожим — ниже разберём её основные элементы. 

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

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

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

Заголовок

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

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

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

Текст

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

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

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

Форма

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

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

Лид-магниты. Какие из них приносят деньги, а какие — бесполезны

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

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

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

Кнопка

Большая и привлекательная кнопка с надписью «Подписаться» или чем-то похожим. Главное, чтобы посетитель сайта чётко понимал, что за собой повлечёт нажатие на этот элемент, так что тут лучше не слишком креативить.

Call-to-action: гид по конверсионным призывам к действию

Дополнительные фичи

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

Исключение — если для подписки на рассылку вы создаёте отдельную страницу или лендинг. Там можно разойтись: опубликовать подробное описание рассылки или бонуса, который вы даёте за подписку, примеры писем и многое другое.

Вариант, который может подойти для жёсткой сегментации по тематике — выбор типа писем для подписки. Но здесь важно следить за соблюдением обещаний: если человек хочет подписаться только на рассылку с новостями, добавлять его в список коммерческой рассылки не стоит.

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

Технические моменты

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

Проверка email. Многие конструкторы форм поддерживают возможность автоматической проверки правильности введённого адреса. Конечно, это не спасёт от опечаток в имени пользователя, но может помочь при введении «неформатного» адреса, например, без @ и точки в доменном имени.

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

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

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

Thank you page. Как оформить страницу после подписки

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

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

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

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

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

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

Такие конструкторы часто есть у самих платформ для email-маркетинга, например, в Unisender. Это удобно, так как не нужно настраивать интеграции — все данные сразу будут собираться в сервисе. Подробнее о том, как создать и настроить такую форму в Unisender, смотрите в нашей Базе знаний — это действительно просто!

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

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

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

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

Заказать

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