Оформлення форми підписки для WordPress

Оформление формы подписки WordPress

Минулої статті я описала як встановити просту форму підписки на сайт WordPress. Це безкоштовний швидкий спосіб, проте візуально блок не дуже привабливий. Я задалася питанням, як змінити зовнішній вигляд самої форми.

Які сервіси, плагіни, конструктори, віджети можна використовувати для самостійного оформлення форми підписки, навіть якщо ви не програміст і не дизайнер. Провела власне дослідження та хочу поділитися своїми результатами.

Оскільки мій блог присвячений вебмастерам-початківцям, а не великим інтернет-магазинам, я шукала найбільш прийнятні варіанти для старту. При доборі керувалася двома критеріями:

  • візуально привабливе оформлення форми підписки;
  • можливість безкоштовного використання.

Віджет від WPShop

Якщо ви обрали преміум-шаблон сайту від WPShop, можете скористатися вбудованим симпатичним блоком та підключити до нього обробник. Я покажу на прикладі Jetpack, але ви можете використовувати будь-який інший.

Оформлення підписки відWPShop
Оформлення блоку підписки

WPShop – магазин для тих, хто цінує якість та час. Преміум-шаблони та плагіни для WordPress. SiteFromZero рекомендує як новачкам, так і професіоналам.

Процедура нескладна, давайте покажу, як я це реалізувала у своєму блозі. Зайдіть до розділу Зовнішній вигляд / Віджети та додайте новий.

Блок подписки от WPShop
Блок підписки на сайт від WPShop

Насправді віджет Підписка від WPShop – це лише візуальне оформлення блоку, тому потрібно підключити сторонній обробник, у моєму випадку від Jetpack. Натиснувши кнопку «Допомога», отримайте докладну інструкцію від розробників.

Віджет Підписка від WPShop
Ссылка на инструкцию по установке виджета

Вас перекине на сайт підтримки WPShop, він російською мовою, що значно спрощує вирішення будь-яких питань. До того ж, завжди можна створити тикет та отримати професійну підтримку.

Інструкція з встановлення блоку підписки від WPShop
Інструкція з підключення обробника до форми підписки

Отже, скопіюйте з батьківської теми до дочірньої файл subscribe-box.php, зберігаючи ієрархію папок. Відкрийте файл \template-parts\blocks\subscribe-box.php у дочірній темі та код

<input type="text" placeholder="Ваше имя">
<input type="text" placeholder="Ваш e-mail">
<button class="btn">Подписаться</button>

замініть на код форми підписки, скопійований у сервісі розсилок.

За допомогою FileZilla створіть відповідні папки та скопіюйте файл, має вийти так.

Копія файлу subscribe-box.php у дочірній темі
Скопируйте файл subscribe-box.php в дочернюю тему

Тепер потрібно відкрити скопійований файл subscribe-box.php у дочірній темі та замінити вказаний вище код на шорткод.

<?php echo do_shortcode( '[jetpack_subscription_form]' ) ?>

Я вирішила вкоротити стандартні тексти, мій код вийшов таким:

<?php echo do_shortcode( '[jetpack_subscription_form title="Подписаться на блог" subscribe_text="Получайте уведомления о новых записях в этом блоге"]' ) ?>
Форма підписки Jetpack у темі Reboot

Мені захотілося поміняти кнопку на кольорову, для цього додала стиль у дочірню тему.

#subscribe-submit button {
border-radius: 4px;
border: 1px solid transparent;
padding: .375rem .75rem;
background: #569ba7;
color: #fff;
}

Готово! Тепер форма підписки Jetpack у темі Reboot виглядає цілком презентабельно.

Щоб вивести блок у такому оформленні на головну сторінку або інше місце сайту використовуйте шорткод від WPShop.

Шорткод блока подписки от WPShop
Шорткод форми підписки від WPShop

Конструктор FormDesigner

Для оформлення блоку підписки можна скористатися конструктором FormDesigner. Він містить безліч готових шаблонів та налаштувань різних веб-форм:

  • контактна форма;
  • онлайн-калькулятор;
  • голосування;
  • тестування;
  • оформлення замовлення;
  • підписка;
  • заявка;
  • квіз.

Пропоную подивитися відео по роботі з цим сервісом.

Ось таке гарне оформлення блоку в мене вийшло.

Форма подписки от FormDesigner

Існує спеціальний плагін для інтеграції з WordPress сайтами, що дуже зручно. До форми можна підключати безліч послуг розсилки. Раджу спробувати попрацювати веб-дизайнером та обов’язково поділіться своїм досвідом у коментарях.

Optin Forms

Плагін допоможе швидко створити симпатичну форму підписки прямо в панелі WordPress. Звичайно, вибір невеликий, лише 6 макетів, обмежена кількість кириличних шрифтів, всі шаблони мають горизонтальну орієнтацію.

Плагін Optin Forms

Зайві поля можна вимкнути, кольори всіх елементів редагуються. Ось таке красиве оформлення форми підписки я зробила за кілька хвилин. Такий блок добре виглядатиме в кінці статті або футері.

Форма підписки від Optin Forms

Щоб створити форму для сайдбару, мені довелося видалити заголовок і опис, отриманий шорткод вставила в розділі Віджети, макет адаптувався під ширину бічної колонки. Теж досить добре виглядає.

Optin forms плагін

Optin Forms інтегруються із кількома поштовими сервісами.

Optin Forms інтеграція із поштовими сервісами

MailMunch

Встановіть безкоштовний плагін MailMunch – Grow your Email List.

MailMunch плагін Вордпресс

Він зв’яже WordPress з потужним додатком, що дозволяє створювати красиві форми підписки різних типів:

MailMunch форми підписки
  • popover – спливаюче вікно (на вході або виході);
  • embedded – вбудована форма, що виводиться в кінці статті;
  • topbar – верхня панель;
  • scrollbox – бокс прокручування;
  • sidebar – статичний блок у сайдбарі;
  • cover – обкладинка.

В базі понад 200 дизайнерських макетів «на всі випадки життя». На жаль, майже всі вони доступні лише для Premium облікових записів. Ось кілька варіантів оформлення.

Преміум шаблони MailMunch

Безкоштовний пакет містить лише 5 шаблонів, але навіть завдяки їм ви зможете налаштувати цілий комплект різних форм і розмістити на своєму сайті. Кількість проектів також буде обмежена 1, і всі вони будуть містити логотип MailMunch.

Я спробувала зробити красиві форми підписки для свого блогу. Варіант для сайдбара приблизно в тому самому стилі, що були розглянуті вище.

Безкоштовна форма підписки від MailMunch

А ось який гарний вийшов popover.

mailmunch-popover з логотипом

Topbar – смуга з підпискою над шапкою сайту..

MailMunch topbar - смуга над шапкою

Реєстраційні форми та цільові сторінки інтегруються із 17 поштовими сервісами, серед яких: MailChimp, Constant Contact, GetResponse.

Можна встановити на проект без інтеграції, простежити статистику. Прямо в панелі WordPress відображається кількість підписників кожного блоку.

Використання преміальних макетів та видалення логотипу компанії MailMunch обійдеться у 20 $/місяць, при річній підписці – 30% знижка.

Преміум версія MailMunch

MailPoet

Плагін розсилки новин MailPoet дозволить безкоштовно встановити форму підписки і надсилати автоматичні листи зареєстрованим підписникам аналогічно плагіну Jetpack, але має ширший функціонал.

MailPoet плагін

Поштова служба MailPoet має власні шаблони форм і електронних листів. При цьому ви самі налаштовуєте дизайн та розклад відправок. Звичайно, доведеться трохи попрацювати, але результат того вартий.

У базі є 12 макетів форм підписок. На їх основі створено спливаючі вікна, слайдери, фіксовані панелі, блоки під сторінками, віджети.

Статичні форми підписки MailPoet

Взявши шаблон за основу, ви можете зробити дуже гарне власне оформлення, використовуючи блоки та медіатеку WordPress. Спробувала створити popup, результат приголомшливий: швидко, легко, безкоштовно, без логотипу.

Створення спливаючої форми в MailPoet

На вас також чекає дизайнерська колекція макетів електронних листів. Справа в тому, що MailPoet дозволяє використовувати початківцям вебмайстрам (до 1000 підписників) PRO-версію безкоштовно. Надсилайте будь-яку кількість листів (з логотипом MailPoet у підвалі), не заплативши жодного центу. У вас не спитають навіть номер картки.

Після того, як ви зберете базу понад 1000 осіб, підписники продовжуватимуть додаватися, але листи перестануть надсилатися. Потрібно буде перейти на платний пакет.

Premium MailPoet

Optin Cat

Плагін швидкого створення форм підписки для MailChimp – дуже популярного поштового сервісу.

Optin Cat плагін

Сам MailChimp має свої макети блоків та листів розсилки, навіть надає безкоштовний пакет для початківців (менше 2000 підписників). Однак майже всі шаблони доступні у платній версії, а на вільних – буде вбудовано логотип компанії.

Optin Cat пропонує 5 безкоштовних шаблонів підписки на розсилку. Найбільш симпатичні за дизайном я протестувала.

Плагін Optin Cat

Є цілий ряд налаштувань для редагування та відображення на сайті. Дуже простий у використанні. Можна зробити подвійні форми (з подякою за підписку), спливаючі вікна.

Але під час роботи у мене кілька разів з’являлися баги: то сірий фон з правої форми пропадав, то навпаки з’являвся зайвим в інших блоках. Я не писала на підтримку, але якщо у вас станеться подібна ситуація, то доведеться вирішувати проблему.

Баги Optin Cat

GetResponse

Гарне оформлення форм пропонує сервіс GetResponse. Для ілюстрації дизайнів, я відібрала кілька прикладів на власний смак, насправді вибір величезний.

Форми підписки від GetResponse

Платформа GetResponse – потужний інструмент просування проекту. Тут ви знайдете чати, вебінари, конструктор сайтів, вирви конверсії, push-сповіщення, лендинги, зможете створити та запустити рекламу в Facebook та Instagram, проводити сегментацію підписників завдяки системі тегів та балів, використовувати шаблони автоматизації.

Тестуйте численні преміум-функції протягом 30-денної безкоштовної версії. Сервіс підтримує російську мову.

Для початківців (база до 500 підписників) GetResponse надає безкоштовний тариф. До нього входить створення та оформлення форм підписок, розсилки листів. Крім того, ви зможете створити один сайт та один лендинг.

Тарифи GetResponse

Редактор Creative Mail

Редактор спеціально розроблений для WordPress, Jetpack та WooCommerce. Для початку роботи потрібно встановити плагін і створити обліковий запис Creative Mail. На жаль, мені не вдалося зареєструватися та протестувати його «інтелект» для створення листів email розсилки.

Якщо у вас є досвід роботи з цією програмою напишіть, будь ласка, в коментарях.

Сьогодні у мене все. Якщо ви знаєте інші цікаві програми для оформлення форм підписок, то ділитеся досвідом. Я спробую їх протестувати та додати до огляду.

Від себе особисто додам, що не така проста справа – вибрати поштовий сервіс та налаштувати e-mail розсилку. Варіантів дуже багато, а при реєстрації запитують і прописку і номер картки, адже невідомо чи підійде він у принципі. Я все люблю спочатку «помацати».

Ряд компаній пропонують безкоштовні пакети, але часто вони обмежені невеликою кількістю підписчиків та надають форми у супроводі логотипу.

Для себе обрала плагін MailPoet 3, його політика дуже доброзичлива до новачків, а працювати з їхніми макетами – суцільне задоволення. Написала окремі статті про налаштування розсилки та роботу в редакторі, читайте нові огляди.

Дуже сподобався конструктор FormDesigner з його вікторинами, опитуваннями, подарунками. Для проектів, що розвиваються, – чудова можливість виділитися. А тим, хто вже зібрав свою аудиторію, рекомендую звернути увагу на GetResponse: аналітика, інтеграція, автоматизація, власні вебінари.

Поділитися з друзями
Светлана Стецко

Світлана Стецько -адміністратор, вебмайстер, копірайтер, блогер, дизайнер, SEO-фахівець цього сайту. Ділюсь своїми експериментами, спостереженнями та результатами.

Оцініть автора
( 4 оцінки, середнє 5 з 5 )
SiteFromZero
Додати коментар

Натискаючи на кнопку "Надіслати коментар", я даю згоду на обробку персональних даних і приймаю політику конфіденційності.