Как быстро создать форму подписки на рассылку без программиста

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сделать красивую форму подписки можно не только в сервисах рассылки, но и на платформах, которые на этом специализируются. Их много: 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)

Многие сервисы рассылки предлагают готовый инструмент — формы подписки, которые можно установить на 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 и более страниц. Смотрите, какое условие работает лучше.

Источник: hostenko.com/wpcafe