На примере UniSender, PopMechanic и плагина для WordPress

На примере UniSender, PopMechanic и плагина для WordPress
Click here to view original web page at hostenko.com
Форма подписки собирает данные пользователей на сайте (email, имя, телефон) и передаёт их в сервис рассылки. Далее мы можем отправить этим контактам приветственное письмо, настроить автоматическую серию писем или сразу запустить регулярные рассылки.

Привяжите форму подписки к своему сервису рассылки. Я выбираю интеграцию с UniSender.

Пример обычной формы рассылки с сайта Т—Ж

А в блоге EmailSoldiers появляется такая всплывающая форма

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

Рассказываю о 4 простых способах, как создать форму подписки и сделать так, чтобы контакты с неё автоматически попадали в сервис рассылки.

Редактор сервиса рассылки

Плюсы.
  • Настройка и активация формы происходит в интерфейсе одного сервиса.
  • Не нужно знать HTML, CSS и языки программирования.
  • Форму удобно настроить — можно задать дизайн, текст и условия показа.
  • Форма уже подключена к нужному списку сервиса рассылки — контакты автоматически будут попадать в него.
  • Настройка занимает 10-15 минут.
  • Это входит в стоимость месячного тарифа большинства сервисов рассылки.

Минусы.

  • Мы ограничены набором готовых шаблонов.
  • Если менять сервис рассылки, форму придётся создавать по-новой.
  • Чтобы установить форму, нужно иметь доступ к админке сайта или пользоваться Google Tag Manager.

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

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

Шаг 1. Заходим в личный кабинет. Переходим в «Инструменты» → «Всплывающие формы». Нажимаем «Создать форму» и выбираем шаблон.

Шаг 2. Кастомизируем текст и дизайн формы.

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

Если нужно, можно зайти в «Дополнительные настройки» и установить таргетинг: в каких странах показывать форму, на каких страницах и по каким дням

Шаг 4. Жмём «Продолжить», выбираем список контактов, адрес отправителя и письмо-подтверждение.

Когда всё будет готово, нажимаем «Продолжить»

Шаг 5. Переходим в раздел «Активация». Копируем код и вставляем его перед </body> на сайте.

У меня нет Google Tag Manager, поэтому я буду вставлять код вручную

Шаг 6. Я хочу поставить форму на сайт под управлением WordPress. Для этого захожу в меню WordPress → «Внешний вид» → «Редактор тем» → «Подвал». В вёрстке нахожу закрывающий тег </body> и вставляю скрипт.

Когда скрипт на месте, жму «Обновить»

Шаг 7. Проверяем работоспособность формы. Заходим на любую страницу и выполняем условие, которое задали для появления формы. В моём случае попап появится, если просматривать страницу 5 секунд или пролистать её на 20%.

Всё ок, форма работает

Сервис для создания форм подписки

Плюсы.
  • Не нужно знать HTML, CSS и языки программирования.
  • Создать стильную форму, привязать её к сервису рассылки и установить её на сайт можно за 10 минут.
  • Большой выбор готовых форм и настроек для кастомизации.
  • Гибкие настройки таргетинга и условий показа.
  • Можно посмотреть подробную статистику по форме.
  • Можем поменять сервис рассылки — форма всё равно останется с нами.

Минусы.

  • Большинство сервисов для создания форм платные.
  • Нужно знать, как получить доступ к HTML-шаблону сайта или уметь работать с Google Tag Manager.

Сделать красивую форму подписки можно не только в сервисах рассылки, но и на платформах, которые на этом специализируются. Их много: FormDesigner, Tilda, PopMechanic, LeadGenic. Когда форма будет готова, мы привяжем её по API к сервису рассылки. В некоторых платформах есть готовые интеграции с сервисами рассылки.

Для примера я создам форму в PopMechanic и объединю её с UniSender.

Шаг 1. Заходим в PopMechanic. Переходим в раздел «Собрать email» и выбираем подходящую форму.

Шаг 2. Настраиваем форму: меняем текст, картинки, выбираем, как разные элементы будут отображаться на компьютере и мобильном.

Шаг 3. Когда всё будет готово, сохраняем форму и переходим к настройке кнопки для вызова формы.

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

Шаг 4. На этих двух вкладках можно выбрать, кто из посетителей будет видеть форму и при каких условиях она будет всплывать. Когда всё будет готово, переходите в раздел «Добавить интеграцию».

Шаг 5. Привяжите форму подписки к своему сервису рассылки. Я выбираю интеграцию с UniSender.

Чтобы связать UniSender и PopMechanic, нужен API-ключ. Он работает как дорога между двумя городами — контакты из формы подписки будут автоматически попадать в сервис рассылки. Получить API-ключ можно в личном кабинете UniSender в разделе «Настройки» → «Интеграции и API». В PopMechanic для каждого сервиса добавлена инструкция, как получить API-ключ.

Шаг 6. Вставляем API-ключ, выбираем список контактов и способ подтверждения подписки. Жмём «Отправить».

Шаг 7. Переходим в раздел «Установка кода». Копируем скрипт, переходим на сайт и вставляем код в конце закрывающего тега </body>. Например, в WordPress я захожу во «Внешний вид» → «Редактор тем» и нахожу файл footer.php.

Если вы работаете с Google Tag Manager, то добавить скрипт можно и через него.

Шаг 8. Возвращаемся в PopMechanic. Переходим в раздел «Запуск», активируем форму.

Шаг 9. Проверяем, работает ли форма.

Всё ок — форма появляется, когда ей и положено .

Готовый плагин для CMS-систем (WordPress, Joomla, Drupal)

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

Минусы.

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

Многие сервисы рассылки предлагают готовый инструмент — формы подписки, которые можно установить на CMS-систему (WordPress, Joomla, Drupal). Рассказываю, как настроить такую форму подписки на рассылку на примере плагина UniSender для WordPress.

Шаг 1. Заходим в админку WordPress, выбираем «Плагины» → «Добавить новый».

Шаг 2. Ищем «UniSender Integration» — это специальный WordPress-плагин для сбора email.

Шаг 3. Заходим в плагин. Чтобы он работал в связке с нашим аккаунтом UniSender, нужно ввести API-ключ.

Шаг 4. Привязываем плагин к своей учётной записи UniSender. Заходим в аккаунт UniSender, переходим в «Настройки аккаунта» → «Интеграция и API».

Копируем API-ключ. Возвращаемся в плагин WordPress, вставляем API-ключ в форму.

Шаг 5. Кастомизируем форму: задаём количество полей и их содержимое, выбираем в какой список контактов будут попадать адреса.

Шаг 6. Добавляем форму на сайт. Это можно сделать практически в любом блочном редакторе или через раздел «Внешний вид» → «Виджеты» в админке WordPress. Я буду добавлять форму через блочный редактор Visual Composer.

Шаг 7. Настраиваем дизайн. Добавляем свои CSS, если нужно.

Заменил заголовок, добавил текст, подключил свои шрифты и цвета

Шаг 8. Проверяем, как работает форма.

Всё ок, контакты попадают в сервис рассылки

Заказать у фрилансеров или в агентстве

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

Минусы.

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

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

Что нужно прописать в ТЗ к форме:

  • Какой это вид формы: статическая или всплывающая.
  • Общие пожелания по дизайну: цвета, шрифты.
  • Какие поля должны быть в форме.
  • На каких страницах и в каком месте эта форма будет стоять.
  • С каким сервисом рассылки её нужно объединить.
  • Условия показа для всплывающих форм: когда она появляется, какие пользователи будут её видеть, как часто показывать одному и тому же пользователю.
  • Общие пожелания для мобильной версии формы.
  • Что написать в тексте.

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

Найти исполнителей можно на сайтах фриланса (freelance.ru, fl.ru) или обратиться в маркетинговое агентство.

Заключение

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

На что обратить внимание, когда будете создавать форму:

  • Чем меньше полей в форме — тем выше её конверсия.
  • Настройте в сервисе рассылки письмо-подтверждение для новых пользователей, в котором они ещё раз подтвердят желание получать рассылку. Так вы избавитесь от незаинтересованных клиентов и недействительных адресов в базе.
  • Попробуйте создать несколько форм и проверить, какая работает лучше. Когда выберите победителя, меняйте текст, цвет кнопки и количество полей. Возможно, какое-то из этих изменений увеличит конверсию формы.
  • Для всплывающих форм пробуйте разные условия показа — например, через 5 и 10 секунд или только тем, кто посетил 2 и более страниц. Смотрите, какое условие работает лучше.

Смотрите также:

Как добавить комментарии Facebook на сайт WordPress
Как интегрировать Disqus в WordPress

Похожие статьи