Home / Блоговедение / Как сделать красивую форму подписки?

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

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

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

  • Постоянные посетители;
  • Дополнительный целевой трафик;
  • Клиенты ваших товаров и услуг;
  • Партнеры по бизнесу;

Существует немало сервисов, через которые можно генерировать формe подписки и автоматически рассылать письма подписчикам. Но я бы хотел выделить Google Feedburner. Этот сервис позволяет сгенерировать форму подписки, ленту RSS и автоматически отправляет письма вашим подписчикам на e-mail при появлении новой статьи на вашем блоге.

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

Чтобы вам было понятнее, сразу измените язык.

сменить язык

Перед вами должна быть надпись «Зажигай фид прямо сейчас». Здесь вам необходимо ввести адрес своего сайта и нажать кнопку «NEXT».

новый фид

У вас появится уведомление, что по данному адресу более одного фида. Вам нужно выбрать первый вариант, следующего вида:

http://адрес сайта/feed

456123

Затем вы можете задать название и адрес фида. Я оставил по умолчанию.

На этом завершен первый этап настроек. Вас поздравляют, у вас появилась своя RSS лента, которую можете посмотреть перейдя по ссылке, данной сервисом Feedburner.

feed_gotov

Теперь приступаем ко второму этапу, в котором необходимо настроить форму подписки.

На открывшейся следующей странице, появилось горизонтальное меню с надписями – анализируй, оптимизируй, публикуй, решай проблемы. При помощи этого меню, мы и будем делать следующие настройки.

Перейдите во вкладку «Публикуй», «Подписки по электронной почте».

Если у вас еще не активна эта услуга, нажмите «Активировать» на открывшейся странице.

publikui

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

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

первый вариант формы

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

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit=""window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=WORKLEADERRU’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="WORKLEADERRU" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

Вместо надписи «Enter your email address:», в коде пропишите «Введите свой e-mail».

Возможно вас заинтересует:  Как защитить текст от копирования?

Вместо надписи «Subscribe», впишите «Подписаться».

В конце кода, удалите следующую часть:

<p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p>

У вас должно получиться примерно так:

второй вариант подписки

Теперь нам нужно вставить фоновую картинку, поменять цвет кнопки и вставить кнопки социальных сетей.

Загрузите фоновое изображение на свой хостинг. Можете скачать вот это:

фон формы подписки

Измените свой код формы подписки следующим образом:

Шаг 1. Заключите код Feedburner в теги

<div class="subscribe">
</div>

Шаг 2. Удалите в начале кода формы стиль:

style="border:1px solid #ccc;padding:3px;text-align:center;"

И вместо него вставьте вот этот:

class="burner_form"

В результате у вас должен получиться вот такой код:

<div class="subscribe">
<form class="burner_form" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit=""window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=WORKLEADERRU’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true">
<p>Введите ваш e-mail:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="WORKLEADERRU" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="submit" value="Подписаться" />
</form>
</div>

Скопируйте и вставьте следующий код в файл style.css

.subscribe {
position: relative;
width: 280px;
height: 360px;
background: url(ссылка на фоновое изображение) no-repeat top center;
overflow: hidden;
}

.burner_form {
width: 230px;
height: auto;
padding: -10px 30px 40px 0px;
margin: 172px 0px 0px 25px;
text-align: center;
}

Не забудьте поменять надпись «ссылка на изображение кнопки» на свою ссылку.

Если форма съезжает в сторону, неправильная ширина или высота, просто измените это в стилях формы.

Теперь наша форма подписки приобрела более приятный вид. Осталось только добавить кнопки соц. сетей.

форма подписки

 

Добавляем кнопки соц. сетей в форму подписки.

Добавить кнопки можно при помощи обычного HTML кода. Но чтобы вы не заморачивались, сделайте следующее:

1. Загрузите на свой хостинг изображения иконок соц. сетей необходимого размера.

2. Скопируйте и вставьте HTML код под кодом формы подписки, вставив в код свои ссылки:

<p align="center"><font color="#927A11"><b>Давайте дружить:</b></font></p>
<noindex>
<p align="center">
<a href="ссылка на RSS ленту" rel="nofollow" target="_blank"><img src="ссылка на иконку RSS" alt="Подписаться по RSS" title="Подписаться на RSS" width="45" height="45"></a>
<a href="ссылка на профиль ВКонтакте" rel="nofollow" target="_blank"><img src="ссылка на иконку ВКонтакте" alt="Присоединиться в ВКонтакте" title="Присоединиться в ВКонтакте" width="45" height="45"></a>
<a href="ссылка на профиль в Facebook" rel="nofollow" target="_blank"><img src="ссылка на иконку Facebook " alt="Присоединиться в Facebook" title="Присоединиться в Facebook" width="45" height="45"></a>
<a href="ссылка на профиль Google +" rel="nofollow" target="_blank"><img src="ссылка на иконку Google +" alt="Присоединиться в Google+" title="Присоединиться в Google+" width="45" height="45"></a>
<a href="ссылка на профиль в twitter" rel="nofollow" target="_blank"><img src="ссылка на иконку Twitter" alt="Читать в twitter" title="Читать в twitter" width="45" height="45"></a>
</p>
</noindex>

Аналогичным способом можно добавить другие иконки или изменить эти.

Все вопросы можете задать в комментариях. С удовольствием отвечу на них.

Возможно вас заинтересует:  Исправляем ошибку разметки Open Graph - префикс article неизвестен валидатору!

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

79 комментариев

  1. Круто! Вот эта статья. Давно хотел поменять свою форму подписки, но не знал как сделать это профессионально, как у тебя. Добавлю статью в закладки — будет время займусь.

    Андрей, а ты не знаешь, где можно найти себе такую нарисованную девченку? Только не такую, а другую для уникальности.

    Ответить
    • Спасибо, Алексей.
      Я просто взял картинку из поика Google, в фотошопе пририсовал конверт, вот и вся уникальность 🙂

      Ответить
      • Кстати, по поводу конверта, не поняла, как его прорисовать. С фотошоп вообще не дружу, если честно.)) Хотела конверт сделать, но в итоге сделала просто подписку саму, где вписываем данные, и обвела это рамкой такой, в осеннем стиле.) На заднем фоне девочка с зонтиком, тоже осенняя такая, чтобы в тему осени было.)

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

      • Хм… А слои то лучше делать все таки в CSS, а не в фотошопе — фотошопные в разных браузерах по разному отображаться могут.

      • И неужели она полностью стала уникальной от этих манипуляций? Гугл не выдает копии при поиске по картинке — или ты просто этим не заморачиваешься?

      • До поры до времени, да стала уникальна.

    • Алексей — нарисованную девченку можно найти на фотостоках, можно заказать у фрилансеров, а можно и самому нарисовать. Кстати не нужно откладывать в долгий ящик — решение проблем выгодно делать уже в процессе чтения статьи.

      Ответить
  2. Не-е. Мне такая не пойдет! Такую девку я видел на других блогах. Мне нужна не тронутая. Наверное ты прав — тоже буду искать в Google.

    Ответить
    • Нетронутых в наше время трудно найти 🙂

      Ответить
    • Найди девственную!)

      Ответить
      • Так где же такие искать — тут разве что самому сделать, воспитать — и уже тогда её вмонтировать в форму подписки — классно все получится — ведь инструкция то не сложная.

    • Так почему же все таки не искать на специализированных сайтах, на которых предоставляются вагоны бесплатной графики, которую можно как бы изменять уже под себя (благодаря заливкам, изменениям цвета и так далее — и получать полностью девственно уникальные изображения?

      Ответить
  3. Ivanovskij:

    100% поставлю себе такую же, только картинку поменяю, спасибо за эту форму подписки! УРА!

    Ответить
    • Всегда пожалуйста 🙂

      Ответить
      • А не боишься, что за плагиат поисковики под фильтры аристуют? (Ну типа разойдется форма по интернету — и получается потеряет свою уникальность твоя личная)?

      • Юрий, какой же это плагиат? Это же не контент 😉

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

    • Олег, такую же делать не нужно — нужно быть оригинальным. А то тут поведется так, что у всех будет одинаковая — это как бы не очень хорошо.

      Ответить
  4. Андрей Косолапов:

    Красивая кнопочка получилась. Жалко что у меня сайдбары маленькие и форма Смарта в них не помещается. А если пытаюсь делать меньше, то выходит фигня. Но мысль хорошая, надо подумать.

    Ответить
    • Так это не проблема — можно масштабировать — это раз, задавать в процентах ширину — это два, да и просто можно отодвинуть z-index куда подальше — и все поместится. Правда действительно вид хромать будет.

      Ответить
  5. Андрей, спасибочки! Добавлю в закладки, после попробую сделать))

    Ответить
    • Привет, Тань. Всегда пожалуйста.

      Ответить
      • А ты как всегда и ко всем — вежлив! Молодцом! С таким подходом количество читателей будет увеличиваться не по дням — а по часам!

    • Татьяна, если человек говорит, что он добавляет в закладки и после когда-то попробует сделать, то это воспринимается так, будто это никогда делаться не будет. Я стараюсь избегать оставлять такие комментарии, даже если действительно буду делать по инструкции — чтобы не обижать подобным пониманием автора.

      Ответить
  6. Урааа, наконец-то, дождалась!)) Андрей, спасибо большущее, ты гений!)) Так приятно, что выполнили мою сокровенную просьбу, как же я долго искала, чтобы хоть у кого-то было описание того, как это делается.)) Даже мой знакомый (из прошлого) сказал мне: «Ди, купи у меня курс, там все есть и про фид, и про картинки и т.д.»
    Я так на него обиделась, если честно.( Просто пытался продать свой курс, притом каждый день мне говорил, что у него и то и се есть в это курсе. Жесть.(

    Ответить
    • Ну про «гений», это вы слишком 🙂
      Здесь ничего особого нет.

      Ответить
      • Во-первых без вы, не люблю формальностей.)
        Во-вторых я очень долго искала такую информацию, ее никто не хотел предоставлять в открытом доступе, либо плохо искала, конечно. Но, не находила!
        У меня слетел блог с хостинга, придется все заново делать.( Вот как раз и начну все заново, и форму подписки с нуля, все новенькое будет.)

      • Ок, я тоже не люблю формальностей.
        Зайду в гости на новый блог с удовольствим 🙂

  7. Вопрос не по теме. Я поменял адрес входа в админку путем замены названия файла wp-login.php и его содержимого, Захожу по новому адресу,но теперь не могу выйти, пишет ошибку 404, страница на найдена. Что я сделал не так.

    Ответить
    • Егор, я не могу ответить, пока сам не увижу. Я бы посоветовал спросить у хостера. Вполне возможно, что вводите неверный адрес или каким-то образом поврежден файл wp-login.php.

      Ответить
      • Да, не все в файле заменил, был косяк. Сейчас ровно!

  8. Вот как раз такой формы и не хватает моему блогу, вот правда только девушку заменила бы на что-то другое по своей тематике.

    Ответить
  9. Баяс:

    Информация действительно полезная и нужная. Респект.

    Ответить
  10. Елена Прекрасная:

    Андрей, у тебя реально прикольная форма подписки, спасибо за инструкцию! А у меня простая, сразу как сделала, потом все руки не доходят изменить))

    Ответить
  11. Андрей, полезная и подробная статья, каждый справится, следуя вашим инструкциям и создаст свою уникальную и красивую форму подписки.

    Ответить
  12. Андрей Косолапов:

    Андрей, а как быть с формой подписки на Смарт? Действия те же или нет.

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

      Ответить
      • Андрей Косолапов:

        Это да, просто как например ее сделать больше той, которую выдает смарт.

      • В коде должны быть значения высоты и ширины.

  13. Все-таки я нашел себе не тронутую. Девушка конечно известная, но на блогах ее нет. Благодарю за стили! Только исправь немного — не везде есть точка с запятой. Новички не разберутся.

    Ответить
    • Отличная форма получилась.

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

      Ответить
  14. Андрюха спасибо!!! Дай расцелую)))) Шучу, нормально с ориентацией))) Спасибо за пост!

    Ответить
  15. Андрей Косолапов:

    Андрей, я решил проблему со смартом. Заходите посмотрите что получилось. Статья на блоге «Форма подписки»

    Ответить
    • Посмотрел, Андрей! Все просто супер получилось! Молодцом — старался сам или просил кого?

      Ответить
      • Андрей Косолапов:

        Сам конечно.

      • Это замечательно! Когда сам что-то делаешь — приятнее на результат смотреть — да и гордость за себя любимого охватывает (по себе знаю).

  16. Фотка в конце статьи потерялась… Печалька. Я так понимаю что там скриншот твоей формы был?

    Ответить
  17. Круто! Спасибо! Взял себе…..

    Ответить
  18. Спасибо! Это по рассылке статья. А как сделать, чтобы после подписки книга приходила или скачивалась пользователю?

    Ответить
    • Есть 2 варианта:
      1. Настроить автоматическую отправку писем на сервисе рассылки после подписки и в этом письме указывать ссылку для скачивания.
      2. Настроить автоматическое перенаправление пользователя после подписки на скрытую страницу, где можно скачать.
      Я использую второй вариант.

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

        Как это сделать? Можно ли почитать у вас?

      • У меня пока нет статьи на эту тему, постараюсь в скором времени написать.

  19. Спасибо за замечательную статью. Благо, мне с новым сайтом отчасти повезло: форма для FeedBurner — очень милая. Фид второй день подключить не получается: сервис его не обнаруживает. Не подскажете, как быть? Если это — не наглость. 🙂

    Ответить
  20. Спасибо, Андрей, за ответ. На сайте о хендмейде еле-еле настроила рассылку, но при переходе на ленту записи в RSS не отображаются. Пока убрала ссылку с сайта. Решение придёт позже.

    Ответить
    • Проверьте правильность ссылки RSS. Если рассылка работает, то и лента должна отображаться нормально.

      Ответить
  21. Спасибо, Андрей. Сделаю.

    Ответить
  22. Спасибо за статью. У меня получилось сделать форму подписки в конце статей. Почти получилось… Осталось кое что подрихтовать, но не могу разобраться.
    Например, как увеличить промежуток между полем для ввода е-мейла и кнопкой «подписаться»?
    И как поменять размер и цвет шрифта надписи «введите свой е-мейл» ?
    Если подскажешь, буду благодарен!

    Ответить
    • Иван, это все настраивается в CSS. В ближайшее время напишу статью, в которой расскажу как сделать форму подписки под каждой статьей.

      Ответить
      • То есть эти настройки находятся не в тех кодах, которые ты давал в своей статье? Где то в другом месте?

      • Почему же, все настраивается в предоставленном CSS коде. Просто он для формы подписки в сайдбаре. А вы делаете под статьей. Соответственно значение отступов margin и padding в коде будут отличаться немного.

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

    Ответить
  24. Спасибо, ваш метод мне помог, форма и фон отлично вписались в дизайн блога!

    Ответить
  25. Доброго времени суток!
    Спасибо за полезную статью — у меня практически всё получилось. Подписываюсь на Вашу рассылку. Осталось пару вопросов: почему-то не установилась кнопка (что я мог сделать не так?) и пробовал поменять хотя бы цвет встроенной кнопки (тоже увы). Может подскажите. В любом случае, спасибо за Ваши труды.

    Ответить
    • Эдуард, я не нашел на вашем сайте формы подписки. Я так не могу ответить, что вы сделали не так, не взглянув на код.

      Ответить
  26. Скажите пожалуйста, а как ввести слова «Введите свой e-mail:» в само поле подписки?

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *