На прикладі UniSender, PopMechanic та плагіна для WordPress.
Форма підписки збирає дані користувачів на сайті (email, ім'я, телефон) та передає їх у сервіс розсилки. Далі ми можемо надіслати цим контактам вітальний лист, налаштувати автоматичну серію листів або запустити регулярні розсилки.
Прив'яжіть форму передплати до свого сервісу розсилки. Я вибираю інтеграцію із UniSender.
Приклад звичайної форми розсилки із сайту Т-Ж
А в блозі EmailSoldiers з'являється така форма, що спливає
Щоб створити красиву форму передплати, зовсім не обов'язково знати HTML, CSS або мови програмування. Існують сервіси, в яких будь-яка людина може швидко створити та налаштувати різні форми.
Розповідаю про 4 прості способи, як створити форму передплати та зробити так, щоб контакти з неї автоматично потрапляли у сервіс розсилки.
Сервіс для створення форм передплати
Готовий плагін для CMS-систем (WordPress, Joomla, Drupal)
Редактор сервісу розсилки
Плюси
Налаштування та активація форми відбувається в інтерфейсі одного сервісу. Не потрібно знати HTML, CSS та мови програмування. Форму зручно налаштувати – можна задати дизайн, текст та умови показу. Форма вже підключена до потрібного списку сервісу розсилки – контакти автоматично потраплятимуть до нього. Налаштування займає 10-15 хвилин. Це входить у вартість місячного тарифу більшості послуг розсилки.
Мінуси
Ми обмежені набором готових шаблонів. Якщо змінювати сервіс розсилки, форму доведеться створювати по-новій. Щоб встановити форму, потрібно мати доступ до адмінки сайту або користуватися Google Tag Manager.
Мабуть, це найпростіший спосіб. Знати HTML і CSS не потрібно, просто вставляємо готовий код на сторінку. Розкажу, як створити форму на прикладі редактора сервісу розсилки UniSender.
У UniSender є конструктор статичних та спливаючих форм. Перші закріплюються в якійсь частині сайту, другі з'являються поверх всього контенту сторінки. Я створюватиму спливаючу форму.
Крок 1. Заходимо до особистого кабінету. Переходимо до «Інструментів» → «Спливаючі форми». Натискаємо «Створити форму» та вибираємо шаблон.
Крок 2. Кастомізуємо текст та дизайн форми.
Крок 3. Коли дизайн буде готовий, натискаємо «Продовжити» та налаштовуємо умови показу.
Якщо потрібно, можна зайти в «Додаткові налаштування» та встановити націлення: у яких країнах показувати форму, на яких сторінках та по яких днях
Крок 4. Тиснемо «Продовжити», вибираємо список контактів, адресу відправника та лист-підтвердження.
Коли все буде готове, натискаємо "Продовжити"
Крок 5. Переходимо до розділу «Активація». Копіюємо код і вставляємо його перед на сайті.
У мене немає Google Tag Manager, тому я вставлятиму код вручну
Крок 6. Я хочу поставити форму на сайт під керуванням WordPress. Для цього заходжу в меню WordPress → Зовнішній вигляд → Редактор тем → Підвал. У верстці знаходжу тег, що закриває та вставляю скрипт.
Коли скрипт на місці, тисну «Оновити»
Крок 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. Переходимо до розділу «Встановлення коду». Копіюємо скрипт, переходимо на сайт і вставляємо код в кінці тега, що закриває . Наприклад, у 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 і більше сторінок. Дивіться, яка умова працює краще.
Автор: Артем Чеховської Редактор та автор у блозі UniSender.
Пишу про маркетинг, допомагаю маркетологам та власникам бізнесу розібратися в email-розсилках.
Коментарі до запису: 1
Дякую за статтю. Я на своєму сайті для всіх форм використовую конструктор FormDesigner.ru. Є й плагін для wordpress. Дуже подобається простота та можливість налаштувати інтеграцію з unisender, а також я ще передаю дані у amocrm. Дуже зручно. Рекомендую.