меню
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Как собирать email-адреса при помощи всплывающей формы на сайте

Вы здесь:

банер
Когда у вас есть база контактов, можно в любой момент запустить рассылки и увеличивать продажи. Один из самых быстрых способов собрать базу — всплывающие формы или попапы (от англ. pop-up).
В этой статье мы расскажем, как создать всплывающую форму в UniSender и как с её помощью превращать посетителей сайта в подписчиков.

План действий

Шаг 1. Выбрать оффер
Шаг 2. Подготовиться
Шаг 3. Создать форму и настроить её показ на сайте
Дизайн
Условия показа
Выбор списка
Шаг 4. Создать автоматическое письмо
Шаг 5. Запустить всплывающую форму

Шаг 1. Выбрать оффер

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

Примеры офферов:

  • мгновенная скидка новым подписчикам (в денежном эквиваленте или %);
  • промокод на скидку при покупке на определенную сумму;
  • приглашение на закрытую распродажу;
  • бесплатная услуга (доставка, сборка, подключение);
  • полезные материалы (PDF-книги или шаблоны документов);
  • приглашение поучаствовать в конкурсе, розыгрыше.

Зачем важно давать что-то бесплатное при подписке. Важно, чтобы подписчики почувствовали осязаемую выгоду здесь и сейчас. Так им будет проще дать нам взамен свои контакты.

Шаг 2. Подготовиться к настройке формы

Для настройки формы вам понадобится:

  • Оффер (см. предыдущий шаг).
  • Цветовой код вашего сайта. Например, #f39800 — это оранжевый.
    Узнать код цвета
  • Картинка для фона формы подписки. Выложите её на сервер или бесплатный хостинг. Скопируйте ссылку.
  • Список контактов в UniSender, в который будут собираться email из формы.
  • Доступ в админ-панель сайта. Когда форма будет готова, её код надо скопировать на страницы сайта. Поручите это программисту, это не сложно.

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

Пример

Дальше мы покажем процесс на конкретном примере. Настроим всплывающую форму подписки для курса по SMM.

  • Оффер: бесплатная пошаговая инструкция «Как связать SMM и рассылки самостоятельно»
  • Цель: подписка на рассылку курса.

Шаг 3. Создать форму и настроить её показ на сайте

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

всплывающие формы

Введите название формы подписки. Затем выберите один из более 20 вариантов дизайна. Нажмите «Продолжить».

Теперь настроим дизайн выбранной формы и страницы благодарности за подписку. Лучше делать их в фирменном стиле вашего сайта.

Дизайн формы подписки

программа

Так выглядит форма, которая есть в шаблоне. Сейчас мы будем ее менять

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

форма1 форма2
Форма до подписки Форма после подписки

Пример

В примере длинный текст подзаголовка, поэтому мы убрали заголовок и написали всё, что хотели сказать, в подзаголовке. А также заменили текст подзаголовка на странице благодарности.

Настройка цветов формы. В разделе «Цвета формы» вам нужно поменять цвета формы на цвета вашего сайта. Для этого введите коды цветов в поля.

дизайн

В эти поля надо вставить коды цветов

Пример

Нам подходит в этой форме всё, кроме красного цвета и фона формы. Мы заменим его на оранжевый.

Настройка полей ввода. Затем нужно настроить, какие поля вы хотите собирать в форме подписки. Возможно, вам нужен только email подписчика без имени и телефона.

поля ввода

Проставьте галочки возле полей, которые хотите отображать в форме

Пример

Мы будем собирать имя, телефон и email, чтобы пригласить на курс тех, кто заполнил форму.

Настройка кнопок. В разделе «Кнопки» можно поменять текст на кнопке. Это текст призыва к действию, который должен быть коротким. Кроме того, он должен быть связан с предложением на форме.

кнопки

Пишем нужный нам текст на кнопке

Пример

Мы напишем в этом поле «Скачать pdf».

Настройка картинки для фона. Чтобы добавить в фон картинку, поставьте галочку в разделе «Картинки и иконки». В поле «Картинка на заднем фоне формы» поставьте ссылку на картинку, выложенную на сервере.

иконки

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

Подробнее о согласии на email-рассылку

конфиденциальности»

Укажите, что нужно отображать ссылку на «Правила конфиденциальности»

В самой форме укажите текст ссылки, которая будет вести на страницу, где описано, как вы работаете с этими данными. Не забудьте поменять текст ссылки, ведущей на Политику конфиденциальности, если это нужно.

Вот что у нас получилось:


Готовая всплывающая форма подписки для сайта

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

мобильный
Так выглядит форма на мобильных устройствах

Пример

Мы поменяли цвет кнопки, заменили картинку в фоне, а также написали свой текст. Также поставили ссылку на «Политику конфиденциальности».

Переходим к настройке условий показа.

Настройка условий показа

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

условие

Варианты, после какого действия пользователя будет отображаться всплывающая форма

Пример

Мы выбрали условие по времени пребывания на странице. Условие «показывать, если человек провел на странице 22 секунды».

Далее выберем нужный список.

Выбор списка, куда попадут новые подписчики

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

UniSender предлагает выбор: с письмом подтверждения подписки или без. Мы рекомендуем выбрать список с письмом подтверждения подписки.

Подробнее о подтверждении подписки и согласии на email-рассылку

Как подписывать на рассылку: с подтверждением или без

список
Настройка списка, куда будут собираться контакты со всплывающей формы

Шаг 4. Создать автоматическое письмо для формы

Если в настройках формы вы указали «С письмом подтверждения подписки», заполните «Адрес отправителя», «Имя отправителя» и укажите тему письма.

адрес
Адрес и имя отправителя, тема письма

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

Пример

По умолчанию UniSender предлагает создать стандартное письмо. Но если у вас есть готовый шаблон в фирменном стиле, вы можете использовать его.

письмо

Мы использовали наш шаблон дайджеста

Шаг 5. Запустить всплывающую форму на сайте

На последнем этапе создания формы активируйте её.

код1
Активируем форму

Откройте настройки кода и скопируйте их. На этом шаге вы увидите сайты, на которых установлен код.

код 2
Так выглядит код формы

Зайдите в админку вашего сайта и добавьте код перед тегом . Если вы не разбираетесь в HTML, лучше попросить программиста добавить код на сайт.

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

Оцените, на сколько вам показалась полезной статья «Как собирать email-адреса при помощи всплывающей формы на сайте»
(17)