Украшаем форму подписки на обновление

украсить форму подпискиПриветствую! В данной статье будет рассказано, как можно украсить форму подписки на обновление сайта по E-mail при помощи языка стилей CSS. Суть данной манипуляции - сделать Ваш сайт более индивидуальным в плане дизайна и привлечь внимание потенциальных подписчиков. Если Вы еще не используете данную форму, то настало самое время, т.к. это даст дополнительных посетителей для сайта.


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

По умолчанию нам предлагаю код, который выводит нечто подобное на сайте (цвет заднего фона зависит от Вашего шаблона сайта):

подписка по почте wordpress

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

<form style="border:1px solid #ccc;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=Mojwpru', 
'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="Mojwpru" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/><input type="submit" 
value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

Вот его мы и будем слегка модифицировать, чтобы в итоге получилось нечто подобное (или на что у Вас хватит фантазии):

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

Код данной формы будет следующим:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" 
target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Mojwpru', 
'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p><input type="text" style="border:1px solid #cccccc;color: #808080; width: 146px; 
-webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px;
-khtml-border-radius: 2px; border-radius: 2px; " name="email" value="E-mail адрес"  
onfocus="if (this.value == 'E-mail адрес') {this.value = '';}" 
onblur="if (this.value == '') {this.value ='Адрес электронной почты';}"/>
<input type="hidden" value="Mojwpru" name="uri"/><input type="hidden" name="loc" 
value="ru_RU"/><input type="submit" value="Подписаться" style="border:1px solid #cccccc; text-transform: lowercase; 
background: #DD4B39 url('http://mojwp.ru/wp-content/uploads/social/gmail.png') 
no-repeat 1px 1px; padding: 0 0 0 20px; font-weight:bold; -webkit-border-radius: 2px; 
-moz-border-radius: 2px; -o-border-radius: 2px;	-khtml-border-radius: 2px; 
border-radius: 2px; color:#ffffff;"/></form>

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

Модифицируем форму подписки по E-mail

Хоть далее я буду все рассказывать как можно понятнее, но это не служит оправданием незнания Вами азов HTML и CSS. Поэтому почитайте соответствующую литературу. Справочник Вам в помощь http://htmlbook.ru/.

Поехали дальше.

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

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

Как видим по первой картинке, форма ввода адреса E-mail стоит над кнопкой Подписаться. На каком-то сайте это может и красиво, но мне лучше, чтобы все было в одну строку, как на втором скриншоте. Чтобы сделать подобное, нужно убрать </p> из следующей связки (только этот набор символов </p>):

name="email"/></p><input type="hidden" value="Mojwpru"

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

<p>Enter your email address:</p>

Далее настраиваем дизайн поля ввода почты. Выдержка из моего кода с пояснением:

<input type="text" style="border:1px solid #cccccc;color: #808080; width: 146px; 
-webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px;
-khtml-border-radius: 2px; border-radius: 2px; " name="email" value="E-mail адрес"  
onfocus="if (this.value == 'E-mail адрес') {this.value = '';}" 
onblur="if (this.value == '') {this.value ='Адрес электронной почты';}"/>

Здесь, в элементе style, как раз и настраиваем внешний вид поля. Фактически - это те параметры, которые Вы вправе менять, чтобы форма продолжала работать без сбоев:

  • border:1px solid #cccccc; - это рамка вокруг белого поля ввода: толщина рамки 1px; solid - значит непрерывная; #cccccc - это цвет рамки.
  • color: #808080; - здесь мы задаем цвет шрифта (на картинке "E-mail адрес").
  • width: 146px; - ширина поля ввода адрес в пикселях. Подбирайте индивидуально.
  • -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; - эта конструкция отвечает за скругление углов поля ввода. Работает на всех современных браузерах, за исключением старых версий Internet Explorer. Если Вам не нужно скругление углов, то просто удаляем данную конструкцию. Если же надумали установить, то вместо 2px поставьте свое целочисленное значение.
  • value="E-mail адрес" - здесь Вы вводите произвольный текст, который будет отображаться в форме ввода. Можете оставить пустым, тогда ничего не будет показано.
  • this.value == 'E-mail адрес' - аналогичный текст с предыдущим пунктом.
  • height:70px; - данного пункта нет в моем коде, но Вы можете его добавить. Назначение простое - задать точную высоту поля ввода. Т.е. мы можем задать ширину (width) и высоту (height).

Настройка кнопки "Подписаться"

По умолчанию данная кнопка у нас на английском языке (Subscribe). Напишем необходимый нам текст на русском языке. Для этого заменяем слово Subscribe

<input type="submit" value="Subscribe" />

на любое русское

<input type="submit" value="Подписаться" />

После этого переходим к настройке ее внешнего вида. Отвечает за это следующий код:

<input type="submit" value="Подписаться" 
style="border:1px solid #cccccc; text-transform: lowercase; 
background: #DD4B39 url('http://mojwp.ru/wp-content/uploads/social/gmail.png') 
no-repeat 1px 1px; padding: 0 0 0 20px; font-weight:bold; -webkit-border-radius: 2px; 
-moz-border-radius: 2px; -o-border-radius: 2px;	-khtml-border-radius: 2px; 
border-radius: 2px; color:#ffffff;"/>

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

  • margin: 0 0 0 2px; - внешний отступ (читайте справочник CSS). С помощью данной команды я сделал промежуток между кнопкой и формой ввода почты.
  • text-transform: lowercase; - переводим буквы в прописные (ставим по желанию).
  • background: #DD4B39 url('http://mojwp.ru/wp-content/uploads/social/gmail.png')
    no-repeat 1px 1px;
    - здесь мы задаем картинку, которая будет отображаться в кнопке. Предварительно закачиваем картинку нужного Вам размера на сайт и прописываем путь до нее. #DD4B39 обозначает цвет заднего фона. При желании, Вы можете обойтись без картинки, а ограничиться просто сменой цвета кнопки и обратое, т.е. обойтись только картинкой на весь размер кнопки без заливки цветом фона. no-repeat делает так, чтобы картинка не размножалась на всю ширину и высоту кнопки. В конце по 1px отступы сверху и снизу.
  • padding: 0 0 0 20px; - внутренний отступ (не путать с margin). Цифра 20px отодвинула надпись "подписаться" от левого края и поставила за картинкой письма.

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

Вот и закончили с настройками. Осталось сохранить и любоваться на результат.

Будут вопросы - пишите в комментариях. Помогу чем смогу.

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликован 21 комментарий
  1. Лисёнок Рэнди says:
    http://animalistika.ru

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

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

    • mojWP says:

      плагин WP-Syntax выводит и подсвечивает код
      http://mojwp.ru/wp-syntax.html

  2. Александр says:
    http://dorfer.ru

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

    • mojWP says:

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

  3. Александр says:
    http://dorfer.ru

    ага, я тоже пока упор делаю на статьи, чтобы хоть какая-то база была и пользователь проводил на сайте больше времени 🙂 кстати, вы не могли бы рассказать о том, как сделать подгрузку постов с помощью jquery? )

  4. Sueno says:
    http://sueno.ru/

    Очень полезная статья 🙂 а главное во время. Спасибо тебе огромное! Буду эксперементировать. Кстати не нашла как закруглить кнопку, я не внимательно читала?

  5. Sueno says:
    http://sueno.ru/

    ой все нашла, точно не внимательно читала. Ну все пошла ставить эксперементы.

  6. alimugik says:
    http://www.itshneg.ru/

    Офигенный пост, как раз то что искал, все просто и понятно... )))

  7. seogrot says:
    http://seogrot.com/

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

  8. Женя says:
    http://tut-blog.ru

    Давным-давно я нашел эту статью в Интернете и по примеру сделал себе форму подписки на сайт. Доволен остался, ведь все доходчиво написано и главное РАБОТАЕТ!

  9. seogrot says:
    http://seogrot.com/

    Сегодня таки добавил форму подписки на сайт, всё отлично работает! Стили вынес в отдельный файл.

  10. Илья says:
    http://polnyi-pisec.ru

    Отличная статья. Все понятно описано, Виталий, спасибо. У меня возникла маленькая проблема - закрывающий тег удалил, но кнопка подписки, по прежнему внизу. Подскажите пожалуйста, в чем может быть проблема. Может в CSS (таблице стилей)темы? Вот код, который у меня получился, немного правда доработал кнопку -

    • Виталий says:

      код не пройдет через комментарии.
      кидайте файлом на почту

      • Илья says:
        http://polnyi-pisec.ru

        Ок =) На почту для обратной связи отослал.

  11. Надежда says:
    http://bestsposob.ru

    Очень понравилась кнопка. У меня как раз отсутствует такая подписка, только на RSS есть. Надо сделать и такую. Спасибо.

  12. Татьяна says:
    http://moymk.ru/

    Виталий! ДОбрый день! Скажите, а можно ли уже готовый (отрисованный в ФШ или скачанный) рисунок подписки (поле для e-mail и кнопка) вписать в код feedburner? Может, вы писали об этом уже? Ткните носом пожалуйста. Спасибо

    • Виталий says:

      без проблем. Это "верстка" называется

  13. Андрей says:
    http://zsco.pp.ua

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

  14. Артём says:
    http://blog-artema.ru/

    Спасибо, украсил свою формочку) Можете посмотреть)
    Может посоветуете, как-то по другому немного сделать?

  15. Анастасия says:

    Здравствуйте, возникла слудующая проблема.
    Форму сделала, как мне нравится, только пишу адрес,нажимаю кнопку подписаться, и меня перебрасывает на страницу с моими записиями, а не на форму подписки. Что сделать?
    Заранее спасибо.

    • Виталий says:
      http://mojWP.ru/

      Добрый.
      Вы действительно думаете, что я могу подсказать что-то дельное не видя проблемы? Смотрите код: где-то что-то неправильно сделали.

Не держи в себе. Выскажись.

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.26MB | MySQL:102 | 0,262sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html
Друг, не уходи!