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

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

В прошлой статье я описала как установить простую форму подписки на сайт WordPress. Это бесплатный быстрый способ, однако визуально блок не очень привлекателен. Я задалась вопросом, как изменить внешний вид самой формы.

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

Поскольку мой блог посвящён начинающим вебмастерам, а не крупным интернет-магазинам, я искала наиболее приемлемые варианты для старта. При отборе руководствовалась 2 критериями:

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

Виджет от 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
Добавить комментарий

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

  1. Сергей

    Спасибо за подробную статью. Всё детально расписано с примерами и иллюстрациями.

    Ответить
    1. Светлана Стецко автор

      Пожалуйста, применяйте на практике.

      Ответить
  2. Светлана

    Хорошая форма подписки, надо использовать в оформлении своего сайта.

    Ответить
    1. Светлана Стецко автор

      Выбор большой, вы обязательно найдёте вариант на свой вкус.

      Ответить
  3. Татьяна

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

    Ответить
    1. Светлана Стецко автор

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

      Ответить
  4. Вячеслав

    Подробная информация. Любой человек может разобраться.

    Ответить
    1. Светлана Стецко автор

      Спасибо, стараюсь для начинающих. Знаю, как им сложно во всё сразу вникнуть.

      Ответить
  5. Лина

    Крутая статья! Спасибо большое! Очень нужная информация, будем пользоваться советами.

    Ответить
    1. Светлана Стецко автор

      Пожалуйста. Рада помочь начинающим.

      Ответить
%d такие блоггеры, как: