Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO

Красивая форма подписки на сайт + готовые шаблоны

11 октября 2013
Комментарии: 58

Как сделать красивую форму подписки на сайт

Привет дорогие читатели seoslim.ru. Решил я серьезно заняться своей подписной базой, а то как-то несерьезно вести блог уже более 2-х лет, а иметь всего 200 подписчиков по RSS и около 700 по каналу SmartResponder, даже цели я на этот год ставил немного другие.

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

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

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

Трафик из поисковиков характерен тем, что он направлен именно на поиск цели посетителя, которая заставила его оказаться на страницах вашего ресурса.

Отыскав нужную для себя информацию, с 90% вероятностью такой посетитель закроет страницу сайта и уйдет, дальше бродить по ТОП выдаче Яндекса или Гугла.

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

Вот тут и играет очень важную роль красивая форма подписки на сайте, реализованная как через (feedburner.google.com), так и SmartResponder.

Ваша задача заставить посетителя обратить внимание на специальное окно, в котором он вписывает свою почту и нажимает кнопку подписаться. В будущем если вы напишите очередную статью, к нему на почту придет сообщение, что у вас на сайте появилась новая статья и ссылка на нее. Согласитесь, что от этого выиграют обе стороны. :)

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

Почтовый ящик

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

Сегодня вы находитесь в ТОПе, а завтра уже в жопе на последних местах выдачи. Зато подписчики от вас никуда не денутся, только если вы сами их не распугаете.

Как сделать красивую форму подписки на сайт


Итак, прежде чем мы приступим к созданию чудо формы, у вас должны быть заведены аккаунты в feedburner.google.com (RSS) или SmartResponder.

Если не знаете, как это сделать вам мои статьи в помощь «Как завести RSS ленту» и «Как создать рассылку SmartResponder».

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

Форма подписки под статьей

Вторая форма находится в сайдбаре в самом верху.

Красивая форма подписки в сайдбаре

Приведу вам пример, как я создал первый вид подписки, за вывод которой отвечает сервис Feedburner (RSS), несколько кнопок социальных сетей и стили шаблона wordpress.

После того, как на сервисе Feedburner вы зажгли фид, переходите во вкладку «Публикуй», а затем выбираете раздел «Подписки по электронной почте».

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

Создаем подписку по RSS

Я скопировал этот код себе в редактор Notepad++ и немного его отредактировал, вот что у меня в итоге получилось.

<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=seoslim', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<h2>Подпишитесь на обновление блога по почте:</h2>
<p>
<input type="text" value="Введите Ваш e-mail" name="email" onblur="if(this.value=='') this.value='Введите Ваш e-mail';" onfocus="if(this.value=='Введите Ваш e-mail') this.value='';" style="width:190px;"/>
<input type="hidden" value="seoslim" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input style="width:140px; margin:10px 0 0 5px;" type="submit" value="Подписаться"/>
</p>
</form>

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

Далее нужно определиться с местом вывода будущей формы подписки. Так как я запланировал ее показывать в конце статьи, тогда нужно будет ее вставить в файл single.php.

О том, какой из файлов вашего шаблона wordpress, за что отвечает я подробно рассказывал в статье «Структура шаблона вордпресс».

Однако для того, чтобы наша форма выглядела более привлекательно ее нужно привести к  настройкам, а если быть точнее, то добавить стили оформления в файле style.css.

Для этого заключаем весь полученный ранее код в любой «класс», например «subscribe». Конструктивно это должно выглядеть вот так:

<div class="subscribe">код формы подписки + код социальных кнопок</div>

Если посмотреть, на код моего файла, то вы увидите следующую картину:

Мой код формы подписки

Про код социальных кнопок я рассказывал в статье «Как сделать социальные кнопки вконтакте, твиттер, гугл плюс и др.» Там почитаете, как зарегистрироваться в этих сервисах и получить код кнопок вывода.

Далее нам нужно задать все необходимые стили новому классу. Для этого добавляем в файл style.css следующие настройки:

.subscribe { 
background: linear-gradient(to bottom, #FFFFFF 0px, #E8EFF5 100%) transparent;
border: 1px solid #DCE0E3;
border-radius: 5px;
color: #4B5F74;
font-size: 13px;
height: 124px;
line-height: 36px;
margin: 0px 10px 10px;
text-align: center;
}

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

Готовые шаблоны формы подписки


Хочу представить вашему вниманию уже готовые шаблоны различных форм подписки на сайт. Их можно использовать в любом месте площадки, а также они могут быть адаптированы, как под подписку по RSS, так и под сервис SmartResponder.

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

Готовые формы подписки

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

Последняя новость

Пару дней назад наконец-то пришел мой первый чек от Google Adsense. К нам в Беларусь он летел чуть больше одного месяца, уверен что еще столько придется потратить на его обналичивание.

Первый чек от Google Adsense

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

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

(7 голос., в среднем: 4,43 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (58)
  1. Виталий в 10:54

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

    Ответить
    • Руслан в 08:38

      Хорошо знать css и html не сильно нужно можно просто хотя бы маленько и все получиться.

      Ответить
      • Виталий в 18:23

        Даже чтобы маленько знать нужно не мало времени потратить, и то в итоге все может получиться криво и не красиво.

        Ответить
  2. Виталий в 10:59

    Максим, скажите, а что если зарабатываешь через гугл адсенс единственный способ получить деньги это получить чек, а потом его обналичить или есть другие более лёгкие пути? Разве нет возможности работать напрямую с webmoney, там хоть живые деньги легче получить, не нужно идти в банк с непонятным чеком и на пальцах расказывать на кассе, что это за «конь в вакуме» :). А потом еще и ловить на себе косые взгляды с квадратными глазами! :)

    Ответить
    • Максим Войтик в 12:09

      В Беларусии только обналичивать чек, по другому никак не получится.

      Ответить
      • Руслан в 08:39

        Я вроде бы слышал что гугл адсенс только чеки и выдает и хоть ты и в России или в другой стране больше ни как.

        Ответить
      • Максим Войтик в 16:48

        Если ты в РБ, тогда только чеки. (

        Ответить
      • Виталий в 18:26

        Если в России то можно вывести на веб мани, а там дальше на карту, для этого есть специальный сервисвис по моему Рапида называется. Но для Украины и Беларуссии он не подойдет.

        Ответить
  3. Виталий в 11:02

    Ах, еще хотел спросить, как там у вас в Беларуссии «Батько» ... относится к инфобизнесменам :) или ... :). А если без шуток , то планируете ли вы легализировать свой заработок?

    Ответить
    • Максим Войтик в 12:12

      В РБ конечно лучше работать честно :)

      Ответить
  4. Алексей в 06:33

    Поздравляю с прибытием первого чека его хозяину. Осталось только деньги получить. Но это еще не все... Хотелось бы статью от А до Я об полном цикле получения деньгов от Adsence в РБ и сколько их останется после все вычетов. 😳

    Ответить
    • Максим Войтик в 12:14

      Статью обязательно напишу, только поздней, когда все получу. :)

      Ответить
  5. Юрий Ваценко в 23:20

    Спасибо вам за такой подробный пост. Видно, что пишите с душой. И понимаю, что тоже мне нужно это сделать, но так ведь лень.

    Ответить
    • Максим Войтик в 12:16

      Спасибо Юрий. Вот только Google этого никак не хочет ценить. 🙁

      Ответить
      • Юрий Ваценко в 14:19

        Я вообще слышал, что Google иногда не присылает чеки с деньгами, а может вообще заблокировать аккаунт с деньги, по мнимым причинам.

        Ответить
      • Максим Войтик в 20:10

        У меня как видите все нормально с Google получилось. Главное не кликать по своим объявлениям и никто вас не заблокирует.

        Ответить
      • Виталий в 14:43

        Потому что статьи уж сильно «seo-причесаны», не вооружонным глазом видно что вы соблюдаете все правила сео оптимизации контента, а с недавнего времени гугл это не любит, по этому и санкции возникли, у ктонановенького тоже самое, и еще несколько блогов я знаю, которых ждет такая же участь. Сейчас уже оптимизировать контент на все 100% чревато песимизацией от гугла. Как мне видится чтобы исправить ситуацию нужно:

        1. Заменить точные вхождения ключевых слов на синонимы.

        2.Убрать заголовки h2, которые были «за уши притянутя» и в которые были впихнуты точные вхождения.

        Или хотябы в заголовках ключи поменять на синонимы.

        3. Улучшить поведеньческие факторы, проведениям конкурса или марафона.

        4. Купить несколько трастовых ссылок.

        P.S У меня один из сайтов тоже песемизирован гуглом и именно это я буду делать для исправления ситуации.

        Ответить
      • Максим Войтик в 20:12

        Тоже склоняюсь что мой блог пострадал от фильтра Google под названием Панда. В ближайшее время начинаю полностью пересматривать все статьи.

        Ответить
      • Ольга в 22:50

        Насчет пункта 2 абсолютно согласна. Эти заголовки очень неэстетично выглядят на некоторых блогах.

        Ответить
  6. Руслан в 08:37

    Отличный пост. Форму подписки не так — то и трудно сделать, достаточно знать что ты хочешь ну и не много разбираться в коде, а точнее в css и html.

    Ответить
    • Виталий в 18:27

      А если не знаешь, что ты хочишь, то в интернете есть куча psd исходников форм, главное уметь их сверстать.

      Ответить
  7. Роман в 13:45

    Если будите использовать мой код, тогда замените в нем атрибут action на свой, что предложит система, так как он у всех разный

    что это означает, подробней хотелось бы узнать 😥

    Ответить
    • Максим Войтик в 14:46

      Этот код у каждого индивидуальный, чтобы система знала на чью RSS ленту посетитель будет подписываться.

      Ответить
    • Федор в 07:54

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

      Ответить
  8. Ivan в 09:32

    Вставляю свой action, но все равно при нажатии подписаться подписывает на ваш блог! Что не так?

    Ответить
    • Ivan в 09:54

      Все разобрался! вопрос закрыт!

      Ответить
  9. Александр Быкадоров в 20:40

    В Смарте тоже можно сделать формы, но... они такие какие то корявые получаются. Причем, что вымораживает, так это то, что в смарте они по одному выводятся, а в реале, то линия лишняя то еще что

    Ответить
  10. Степан в 16:03

    Спасибо за статью. Очень помогла в работе.

    Ответить
  11. Жук Юрий в 21:33

    Да, про смарт точно подметили. Лишняя линия ненароком то и вылезет. Всю картину красивой подписки испортит.

    Ответить
  12. Сергей большой в 01:33

    Хм... интересно, Я когда-то тоже возился с этой формой подписки, но через какое-то время смог создать просто потрясающая форму подписки, с манящей красотой и банальной функциональностью! 🙄 🙄 🙄

    Ответить
  13. Ольга в 22:51

    Что-то слишком сложно, как для блондинки...

    Ответить
    • Максим Войтик в 18:51

      Всегда можно воспользоваться услугами других людей.

      Ответить
      • Ольга в 11:26

        Я именно так и делаю, когда очень нужно :)

        Ответить
  14. Александр в 23:03

    Плохо что на SmartResponder, только на платных аккаунтах можно прикрепить свой feedburner.

    Ответить
  15. Дима в 17:21

    Форму подписки не так — то и трудно сделать, достаточно знать html и css.(или даже только дримвивер)

    Ответить
  16. Альберт в 22:21

    Да я согласен.Но повозится все-равно придется.Самый простой принцип такой.Качаешь с инета нужный исходник,потом в фотошопе редактируешь и подгоняешь в размер и главное сохранить для Web-устройств с HTML.Далее какие картинки отвечают за поля и кнопку-подключаешь к ним всего 3

    строки кода,а остальное оставляешь,что предоставил тебе сервис рассылки.

    Ответить
  17. Жук Юрий в 13:54

    Красивая форма подписки — всегда интересно.

    Ответить
  18. Сергей в 19:32

    Спасибо, кстати чеки обналичивать проще всего через Epayservice (не сочтите за рекламу, потому ссылку не оставляю). Просто сам там зарегистрирован. Отправляете им чек, они вам на MasterCard живые деньги минус небольшие проценты. Потом можно снять в любом банкомате Беларуси. Очень удобно.

    Ответить
  19. Игорь в 17:50

    Прикольные шаблоны.Максим можно использовать понравившейся шаблон?

    Заранее спасибо.

    Ответить
  20. Aleksandr в 20:07

    У меня такой вопрос, можете помочь создать форму подписки для нового сайта?

    Если что заплучу

    Ответить
    • Максим Войтик в 20:52

      Подобного рода сообщения шлют на почтовый ящик.

      Ответить
  21. zmoe в 00:30

    А я вот думаю о другом: а реально ли люди подписываются через эту форму? Мне так кажется, что сейчас только завлекать как то нужно, что-то даешь человеку, а взамен ПОДПИСКА! [present]

    Ответить
    • Максим Войтик в 18:20

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

      Ответить
  22. Галина в 13:31

    Здравствуйте,Максим! Я сделала форму подписки на смарте из их шаблона. Вставила сгенерированный код на блог и понеслись ошибки. Валидатор выдал, изображение не оптимизировано при загрузке и прочее. У Вас все норм ,но Вы сами грамотны в программировании и подправили. Уже и не рада,что ушла с фида. Что посоветуете?

    Ответить
    • Максим Войтик в 13:59

      Может что-то не так вставили, не должно быть проблем с формой.

      Ответить
      • Галина в 14:39

        Да нет,Максим! Написала в службу поддержки, так как онлайн операторы не смогли ответить, указала ошибки, которые выдают сервисы проверки и валидатор, попросила мой код исправить программистов, а мне ответили: Формы, в соответствии со страницами сервиса ещё будут дорабатываться.

        Как скоро это произойдёт — ответить я затрудняюсь. и дальше советы по добавлению тегов и пр. Я им ответила примерно так: Не всегда красочное, но выдающее ошибки лучше простых , но качественных форм. Если бы я была программистом, то устранила бы все сама и не обращалась бы к вам, но если вы выдаете продукт, то, корректно генерируйте код. Сейчас Ваш блог посмотрю и если что,напишу. Вот Вам и смартреспондер!

        Ответить
      • Галина в 15:01

        У Вас все норм! Не знаю,почему у меня так. Может из-за шаблона? Хочу послать им свой код сегодня. Максим, а Вы закрываете смарт noindex? И Вы правили что-то в сгенерированном коде? Спасибо.

        Ответить
      • Максим Войтик в 15:41

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

        Ответить
      • Галина в 17:55

        Максим,получается Вы перешли на старую форму подписки? Я вот об этом тоже думала, так как фид не удалила, там было все ок ! Он в неактивных виджетах и те подписчики,что там,получают рассылки по той форме. Но если я смарт уберу в неактивные виджеты,а старую форму поставлю на блог, то и ошибки смарта уйдут? Вот этот момент если можно,то выскажите свое мнение. Я этого не знаю.Спасибо,что помогаете.

        Ответить
      • Максим Войтик в 20:03

        Если вы Галина имеете ввиду ту подписку, что стоит у меня в сайдбаре и под статьей, то она реализована через Фидбернер.

        Ответить
      • Галина в 20:49

        Получается, что смартом Вы не пользуетесь? Но от Вас приходили рассылки и со смарта,но давно, правда. Тогда ,если Фидбернер,то Вы статистикой смарта и другими прелестями не пользуетесь? Старое оказалось лучше нового. Да и верно, так как в смарте пока все изучишь, то времени уйдет куча. Отправила я письмо со своим кодом в смарт, пусть правят свой продукт и посмотрим, что мне ответят и что за специалисты нас «лечат». Отпишусь,если интересно. Спасибо,Максим.

        Ответить
      • Максим Войтик в 22:43

        У меня стоит Смартреспондер в тех случаях, где я предлагаю скачать какую-нибудь бесплатность (видеокурс, базу ТИЦ) за подписку.

        Ответить
      • Галина в 23:43

        Ясно. Пришел ответ от смарта. Форму не исправили,а посоветовали обратиться на форум. Ладно. Максим, а Вы не ставили плагин WP Smush — оптимизация изображений? Не хотите написать статью, пусть о другом, но для изображений. И что Вы скажете по поводу скрипта maxcache?

        Ответить
      • Максим Войтик в 14:52

        Я не сторонник плагинов, поэтому WP Smush не использовал ранее, хотя много раз читал про аналогичные модули. У меня на блоге тысячи картинок, поэтому контролировать что их всех правильно оптимизирует какой-либо из модулей весьма сложно. Если найду время, то обязательно протестирую WP Smush и его аналоги на других своих проектах и напишу о результатах.

        Maxcache устанавливал некоторым своим клиентам, вроде скорость загрузки сайта немного подросла, но как по мне, то лучше использовать стандартные плагины кэширования.

        Ответить
  23. Андрей Зимин в 22:15

    Спасибо за урок, постараюсь сделать подписную форму по вашему методу, а то моя пока еще простенькая.

    Ответить
  24. Роман в 03:05

    Красивые формы, спасибо, скачал буду себе ставить, выручили. [:-))] :-D [:-))]

    Ответить
  25. Екатерина в 03:07

    Мне всё понравилось, у вас так красиво на блоге, а формы вообще класс, к себе забрала. [good]

    Ответить
  26. Лидия в 13:27

    Когда-то делала красивую форму для сайта, но сменила шалбон и форма исчезла. Буду по вашему уроку вспоминать , как делала...спасибо :)

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2016 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!