В прошлой статье я описала как установить простую форму подписки на сайт WordPress. Это бесплатный быстрый способ, однако визуально блок не очень привлекателен. Я задалась вопросом, как изменить внешний вид самой формы.
Какие сервисы, плагины, конструкторы, виджеты можно использовать для самостоятельного оформления формы подписки, даже если вы не программист и не дизайнер. Провела собственное исследование и хочу поделиться своими результатами.
Поскольку мой блог посвящён начинающим вебмастерам, а не крупным интернет-магазинам, я искала наиболее приемлемые варианты для старта. При отборе руководствовалась 2 критериями:
- визуально привлекательное оформление формы подписки;
- возможность бесплатного использования.
Виджет от WPShop
Если вы выбрали премиум-шаблон сайта от WPShop, можете воспользоваться встроенным симпатичным блоком и подключить к нему обработчик. Я покажу на примере Jetpack, но вы можете использовать любой другой.
WPShop — магазин для тех, кто ценит качество и время. Премиум-шаблоны и плагины для WordPress. SiteFromZero рекомендует как новичкам, так и профессионалам.
Процедура несложная, давайте покажу, как я это реализовала в своём блоге. Зайдите в раздел Внешний вид / Виджеты и добавьте новый.
На самом деле виджет Подписка от WPShop — это только визуальное оформление блока, поэтому нужно подключить сторонний обработчик, в моём случае от Jetpack. Нажав кнопку «Помощь», получите подробную инструкцию от самих разработчиков.
Вас перебросит на сайт поддержки от 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 в дочерней теме и заменить вышеуказанный код на шорткод.
<?php echo do_shortcode( '[jetpack_subscription_form]' ) ?>
Я решила укоротить стандартные тексты, мой код получился таким:
<?php echo do_shortcode( '[jetpack_subscription_form title="Подписаться на блог" subscribe_text="Получайте уведомления о новых записях в этом блоге"]' ) ?>
Мне захотелось поменять кнопочку на цветную, для этого добавила стиль в дочернюю тему.
#subscribe-submit button {
border-radius: 4px;
border: 1px solid transparent;
padding: .375rem .75rem;
background: #569ba7;
color: #fff;
}
Готово! Теперь форма подписки от Jetpack в теме Reboot выглядит вполне презентабельно.
Чтобы вывести блок в таком оформлении на главную страницу или любое другое место сайта используйте шорткод от WPShop.
Конструктор FormDesigner
Для оформления блока подписки можно воспользоваться конструктором FormDesigner. Он содержит множество готовых шаблонов и настроек различных веб-форм:
- контактная форма;
- онлайн-калькулятор;
- голосование;
- тестирование;
- оформление заказа;
- подписка;
- заявка;
- квиз.
Предлагаю посмотреть видео по работе с данным сервисом.
Вот такое красивое оформление блока у меня получилась.
Есть специальный плагин для интеграции с WordPress сайтами, что очень удобно. К форме можно подключать множество сервисов рассылки. Советую попробовать поработать веб-дизайнером и обязательно поделитесь своим опытом в комментариях.
Optin Forms
Плагин поможет быстро создать симпатичную форму подписки прямо в панели WordPress. Конечно, выбор небольшой, всего лишь 6 макетов, ограниченное число кириллических шрифтов, все шаблоны имеют горизонтальную ориентацию.
Лишние поля можно отключить, цвета всех элементов редактируются. Вот такое красивое оформление формы подписки я сделала за пару минут. Такой блок будет хорошо смотреться в конце статьи или футере.
Чтобы создать форму для сайдбара мне пришлось удалить заголовок и описание, полученный шорткод вставила в разделе Виджеты, макет адаптировался под ширину боковой колонки. Тоже довольно хорошо смотрится.
Optin Forms интегрируются с несколькими почтовыми сервисами.
MailMunch
Установите бесплатный плагин MailMunch — Grow your Email List.
Он свяжет WordPress с мощным приложением, позволяющим создавать красивые формы подписки различных типов:
- popover — всплывающее окно (на входе или выходе);
- embedded — встроенная форма, выводится в конце статьи;
- topbar — верхняя панель;
- scrollbox — бокс прокрутки;
- sidebar — статичный блок в сайдбаре;
- cover — обложка.
В базе более 200 дизайнерских макетов «на все случаи жизни». К сожалению, почти все они доступны только для Premium аккаунтов. Вот несколько вариантов оформления.
Бесплатный пакет содержит только 5 шаблонов, но даже благодаря им, вы сможете настроить целый комплект различных форм и разместить на своём сайте. Количество проектов также будет ограничено 1 и все они будут содержать логотип MailMunch.
Я попробовала сделать красивые формы подписки для своего блога. Вариант для сайдбара примерно в том же стиле, что были рассмотрены выше.
А вот какой красивый получился popover.
Topbar — полоска с подпиской над шапкой сайта.
Регистрационные формы и целевые страницы интегрируются с 17 почтовыми сервисами, среди которых: MailChimp, Constant Contact, GetResponse.
Можно установить на проект без интеграции, проследить статистику. Прямо в панели WordPress отображается количество подписчиков по каждому блоку.
Использование премиальных макетов и удаление логотипа компании MailMunch обойдётся в 20 $/месяц, при годовой подписке — 30% скидка.
MailPoet
Плагин новостной рассылки MailPoet позволит бесплатно установить форму подписки и отправлять автоматические письма зарегистрированным подписчикам аналогично плагину Jetpack, но имеет более широкий функционал.
Почтовая служба MailPoet имеет свои собственные шаблоны форм и электронных писем. При этом вы сами настраиваете дизайн и расписание отправок. Конечно, придётся немного поработать, но результат того стоит.
В базе имеется 12 макетов форм подписок. На их основе созданы всплывающие окна, слайдеры, фиксированные панели, блоки под страницами, виджеты.
Взяв шаблон за основу, вы можете сделать очень красивое собственное оформление, используя блоки и медиатеку WordPress. Попробовала создать popup, результат потрясающий: быстро, легко, бесплатно, без логотипа.
Вас также ждёт дизайнерская коллекция макетов электронных писем. Дело в том, что MailPoet позволяет использовать начинающим вебмастерам (до 1000 подписчиков) PRO-версию бесплатно. Отправляйте любое количество писем (с логотипом MailPoet в подвале), не заплатив ни цента. У вас не спросят даже номер карты.
После того как вы соберёте базу более 1000 человек, подписчики будут продолжать добавляться, но письма перестанут отправляться. Нужно будет перейти на платный пакет.
Optin Cat
Плагин быстрого создания форм подписки для MailChimp — очень популярного почтового сервиса.
Сам MailChimp имеет свои макеты блоков и писем рассылки, даже предоставляет бесплатный пакет для начинающих (менее 2000 подписчиков). Однако почти все шаблоны доступны в платной версии, а на свободных — будет встроен логотип компании.
Optin Cat предлагает 5 бесплатных шаблонов форм подписки на рассылку. Наиболее симпатичные по дизайну я протестировала.
Имеется целый ряд настроек для редактирования и отображения на сайте. Очень прост в использовании. Можно сделать двойные формы (с благодарностью за подписку), всплывающие окна.
Но во время работы у меня несколько раз появлялись баги: то серый фон с правой формы пропадал, то наоборот появлялся лишним в других блоках. Я не писала в поддержку, но если у вас случится подобная ситуация, то придётся решать проблему.
GetResponse
Красивое оформление форм предлагает сервис GetResponse, Для иллюстрации дизайнов, я отобрала несколько примеров на свой вкус, на самом деле выбор огромный.
Платформа GetResponse — мощный инструмент продвижения проекта. Здесь вы найдёте чаты, вебинары, конструктор сайтов, воронки конверсии, push-уведомления, лендинги, сможете создать и запустить рекламу в Facebook и Instagram, проводить сегментацию подписчиков благодаря системе тегов и баллов, использовать шаблоны автоматизации.
Тестируйте многочисленные премиум-функции в течение 30-дневной бесплатной версии. Сервис поддерживает русский язык.
Для начинающих (база до 500 подписчиков) GetResponse предоставляет бесплатный тариф. В него входит создание и оформление форм подписок, рассылки писем. Кроме того, вы сможете создать один сайт и один лендинг.
Редактор Creative Mail
Редактор специально разработан для WordPress, Jetpack и WooCommerce. Для начала работы надо установить плагин и создать учётную запись в Creative Mail. К сожалению, мне не удалось зарегистрироваться и протестировать его «интеллект» для создания писем email рассылки.
Если у вас есть опыт работы с этим приложением напишите, пожалуйста, в комментариях.
На сегодня у меня всё. Если вы знаете другие интересные приложения для оформления форм подписок, то делитесь опытом. Я постараюсь их протестировать и добавить в обзор.
От себя лично добавлю, что не такое простое дело — выбрать почтовый сервис и настроить e-mail рассылку. Вариантов очень много, а при регистрации запрашивают и прописку и номер карты, а ведь неизвестно подойдёт ли он в принципе. Я всё люблю сначала «пощупать».
Ряд компаний предлагают бесплатные пакеты, но часто они ограничены небольшим количеством подписчиков и предоставляют формы в сопровождении логотипа.
Для себя выбрала плагин MailPoet 3, его политика очень дружелюбна к новичкам, а работать с их макетами — сплошное удовольствие. Написала отдельные статьи о настройках рассылки и работе в редакторе, читайте новые обзоры.
Очень приглянулся конструктор FormDesigner с его викторинами, опросами, подарками. Для развивающихся проектов — прекрасная возможность выделиться. А тем, кто уже собрал свою аудиторию, рекомендую обратить внимание на GetResponse: аналитика, интеграции, автоматизация, собственные вебинары.
Спасибо за подробную статью. Всё детально расписано с примерами и иллюстрациями.
Пожалуйста, применяйте на практике.
Хорошая форма подписки, надо использовать в оформлении своего сайта.
Выбор большой, вы обязательно найдёте вариант на свой вкус.
У меня тема Ребут. И там есть в виджетах встроенная форма подписки. Спасибо, что помогли разобраться с настройками.
Это очень хороший вариант, не требует установки дополнительных плагинов и визуально очень презентабельный. Пожалуйста, пользуйтесь преимуществами темы Reboot.
Подробная информация. Любой человек может разобраться.
Спасибо, стараюсь для начинающих. Знаю, как им сложно во всё сразу вникнуть.
Крутая статья! Спасибо большое! Очень нужная информация, будем пользоваться советами.
Пожалуйста. Рада помочь начинающим.