Хотите украсить свою форму подписки? Изменить визуальное оформление, поменять кнопку. В нашей статье вы узнаете как это зделать

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

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


24.08.2013 | Создание блога комментария 54 | 17073 просмотров | Автор статьи: Александр Рус


Здравствуйте, дорогие гости моего блога! С момента написания последней статьи прошло уже много времени (около 2 недель), эх что то я сдал немного свои темпы :mrgreen:

Если вы читаете данную статью, значит вы не спроста попали на мой блог. Наверняка в 80% случаях вы искали информацию: «Как украсить стандартную форму подписки от Google?» 🙂 . Да да, все верно! Вы нашли на свой вопрос ответ! Именно в этой статье я опишу все известные для меня приемы и способы, для выполнения вами поставленной задачи.

Итак, приступим!

Вкратце ниже я опишу вопросы которые мы будем разбирать в этой статье:

  1. Как поменять цвет формы подписки?
  2. Как изменить размер?
  3. Как поменять внешний вид кнопки «Подписаться»?
  4. Как изменить размер и цвет шрифта?
  5. Как вставить картинку в форму подписки?
  6. Как поменять размер и цвет рамки?
  7. Как удалить ссылку из формы подписки.

А теперь по порядку!

Изначально, стандартный код формы подписки от Google у нас выглядит так:

1
2
3
4
5
6
7
8
9
10
<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=Agirus', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"&gt;
Enter your email address:
<input style="width: 140px;" type="text" name="email" />
<input type="hidden" name="uri" value="Agirus" />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" />
Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
</form>

1. Для того что бы поменять цвет формы нам необходимо в первую строку после text-align:center;  добавить атрибут background-color: #f5f5dc»; , меняя значение  #f5f5dc — вы меняете цвет фона.

2. У каждого шаблона свои размеры. И для того, что бы наша форма подписки была на всю ширину сайдбара дописываем после background-color: #f5f5dc»; следующее width:275px; — атрибут отвечающий за ширину формы подписки(подгоняем его под ширину своего сайдбара).

3. Теперь делаем красивую кнопку «Подписки».  Ее я нарисовал в фотошопе. Размер кнопки  200X31.

Удаляем строчку стандартного кода:

1
<input type="hidden" name="loc" value="en_US" /><input type="submit" value="Subscribe" />

и вместо него вставляем

1
<input style="width: 200px; height: 31px;" type="image" src="'http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png'" />

width: 200px; — ширина кнопки;

height: 31px; — высота кнопки;

src=’http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png’>  — путь к картинке. Здесь вы можете нарисовать свою кнопку размером: ширина — 200px, высота — 31px; загрузить картинку на хостинг и вписать вместо моей ссылки свою( так у вас будет отображаться своя кнопка). Или оставьте  все без изменения для отображения моей кнопки.

4.  Удаляем строчку

1
2
Enter your email address:
<input style="width: 140px;" type="text" name="email" />

и вместо нее вставляем

1
2
ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?
<center><input id="src" style="width: 220px; height: 30px; background-color: #fff;" type="text" name="s" value="Введите ваш E-mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /></center>;

width: 220px; height: 30px  — это размер поля в котором вводят email адресс.

background-color: #fff» — цвет поля.

value=»Введите ваш E-mail» — значение value выводит информацию, которая будет отображаться в поле.

строку 

1
<input type="hidden" name="uri" value="Agirus" />

оставляем без изменений.

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

Добавляем следующий ниже код:

1
<img style="width: 275px; height: 280px;" alt="" src="http:///wp-content/uploads/2013/08/onlline-marketing-rss.png" />

width: 275px; — ширина картинки. Подгоняем под ширину вашей формы.

height: 280px; — высота картинки. Тут на ваше усмотрение.

6.  За размер рамки формы подписки отвечает атрибут border:1px — он прописан в самом начале кода.

solid #ccc — атрибут отвечающий за цвет рамки. Он тоже прописан в самом начале после атрибута border:1px .

7.  В стандартной форме подписки присутствует ссылка от Google. Думаю, что лишняя внешняя ссылка никому не нужна. Поэтому находим ниже написанный код и удаляем его:

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

А теперь визуально посмотрим на проделанную нами работу :mrgreen:

До После
Enter your email address:





Delivered by FeedBurner


Слева стандартная форма подписки от Google.
Справа форма после изменения.

ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?





Вот полностью готовый код формы подписки из этой статьи.

1
2
3
4
5
6
<form  style="border:1px solid #ff0000;padding:3px;text-align:center; background-color: #f5f5dc"; " action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Agirus', 'popupwindow', 'scrollbars=yes,width=550,height=420');return true"><br>ХОТИТЕ ПОЛУЧАТЬ ОБНОВЛЕНИЯ БЛОГА НА E-MAIL?
<center> <br><input rel="nofollow" style="width: 220px; height: 30px;background-color: #fff"type="text"name="email" name="s" id="src" value="Введите ваш E-mail"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></center>
<input type="hidden" value="Agirus" name="uri"/>
<input style="width: 200px; height: 31px;" type="image"  src='http://myworkpro.ru/wp-content/uploads/2013/08/Bez-imeni-1.png'>
<img style="width: 275px; height: 280px;" src="http:///wp-content/uploads/2013/08/onlline-marketing-rss.png"> 
</form>

На этом все. Будут вопросы пишите в комментариях.

P.S. — Ребят, предлагаю Вам произвести бесплатный обмен ссылками с мои блогом. Подробности читайте здесь «Обмен ссылками«.  Надеюсь с Вами на взаимовыгодное сотрудничество!

С Уважением, Александр Рус!

Материалы по теме:

Что такое CMS, а так же правила ее выбора
Сейчас мы разберемся с вопросом: "Что такое CMS?". На самом деле тут все просто, CMS расшифровывается как "Content Management Software" ("программное обеспечение для управления ...
Как разместить флэш-баннер на сайте
Флэш-баннер установить на свой сайт достаточно просто – он ставится так же, как и простой графический баннер. Требуется выполнить пару несложных действий, с которыми ...
Настройка URL-адреса на платформе WordPress
Прогрессивное продвижение сайта невозможно без правильной настройки URL-адреса и работы с файлом .htaccess. Ниже вы найдете базовые рекомендации по этим двум аспектам. Посещаемость интернет-сайтов во ...
Как закрыть ссылки от индексации в комментариях WordPress.
Всем доброго дня! Недавно, как то зашел в гости к Александру Каратаеву, на его блоге меня заинтересовала информация о новых методах закрытия ссылок от ...
Плагин de: comment: адаптивная форма комментариев.
Плюсы плагина Регистрация на сайте Настройки de:comments Партнерская программа. Всем привет! Сегодня я расскажу про один из лучших плагинов, который заменяет стандартную форму комментариев ...

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

1
Лидия http://tytvkysno.ru/

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

Автор2
Александр Рус (участник БКС) http://myworkpro.ru/

Добавил в конце статьи.

3
Лидия http://tytvkysno.ru

Спасибо за отзывчивость.

Автор4
Александр Рус (участник БКС) http://myworkpro.ru/

Да не за что)

5
Светлана http://login-slog.ru/

Уже все сама сделала. Спасибо за содержательный пост!

Автор6
Александр Рус (участник БКС) http://myworkpro.ru/

Рад был угодить 😉

7
Светлана http://login-slog.ru/

Тоже не могу разобраться с кнопкой. Нарисовала в фотошопе такую красоту, а она не отображается. Помогите разобраться

Автор8
Александр Рус http://myworkpro.ru

Указали бы для приличия ссылочку на Ваш сайт.

9
Вячеслав

Не могу разобраться с кнопкой, она не отображается. Помогите

10
Михаил http://mihafilm.blogspot.ru

О, Александр, поздравляю в Яндексе по тематическому запросу на 5м (первой же страницы) месте этот блог!!!

Автор11
Александр Рус (участник БКС) http://myworkpro.ru/

Это хорошо 🙂

12
Юрий http://bloger-man.ru

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

Автор13
Александр Рус (участник БКС) http://myworkpro.ru/

Вроде говорили, что его закроют, а он уж как год назад работал, так и работает.

14
Алексей http://ozerkalke.ru

Где-то в комментах было, что благодаря feedburner гугл быстрее индексируется и для пользователей хорошая защита от спама

Автор15
Александр Рус (участник БКС) http://myworkpro.ru/

Тоже такое читал.

16
Елена Прекрасная http://prekrasniy-mir.ru/

Да, вторая форма подписки конечно красивее, но она очень большая, хотя под статьей нормально будет, а если в сайтбар, то уменьшать надо.

Автор17
Александр Рус (участник БКС) http://myworkpro.ru/

Размеры любые можно подобрать самому, я для примера такую создал)

18
Татьяна Сова http://sovuskino.ru/

Спасибо, Александр! Обязательно воспользуюсь. Как раз искала информацию, как поменять свою форму подписки. А тут так подробно и легко все изложено! На следующей неделе собираюсь поменять). Нарисую картинки свои, кнопочку и будет красота!!! Надеюсь, что все получится! 🙂

Автор19
Александр Рус (участник БКС) http://myworkpro.ru/

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

20
Татьяна Сова http://sovuskino.ru/

Как раз я пользуюсь Feedbunder

21
Рита http://ritabk.ru/

Александр, спасибо за подробную статью. У меня тоже неплохая форма подписки на новости блога. Но делала я ее немного по- другому. Теперь попробую сделать так, как у вас написано. Этот вариант меня устраивает. Тем более, что картинку свою сделаю. А то я брала в интернете, а это не есть хорошо. :mrgreen:

Автор22
Александр Рус (участник БКС) http://myworkpro.ru/

Попозже зайду в гости, посмотрю, что получилось 😉

23
Платон Щукин http://platon-shhukin.ru

Да форма красивая)

24
Екатерина http://babuwka.ru

Спасибо, немного подправила и своим формы подписок.

25
chepe94 http://blogchepe.com

Большое спасибо) буду делать..

26
Алексей http://ozerkalke.ru

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

Автор27
Александр Рус (участник БКС) http://myworkpro.ru/

Точно не припомню уже, где то около 50$.

28
Олег Клышко http://klyshko.ru/

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

Автор29
Александр Рус http://myworkpro.ru

Привет, Олег купил в интернете готовую прем. тему. Просто вбил в поиске платные темы для wordpress, а потом выбирал)

30
Оксана http://magicglade1.blogspot.ru

Спасибо огромное, что делитесь опытом, буду пробовать!

Автор31
Александр Рус (участник БКС) http://myworkpro.ru/

Да это элементарные вещи, почему бы и не помочь)

32
Максим http://oribal.ru

Еще бы хотелось статью, как вообще создать эту форму подписки) А потом дать ссылку на эту статью, как ее приукрасить.

Автор33
Александр Рус (участник БКС) http://myworkpro.ru/

В статье говорится от куда код подписки берется.

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

34
Оксана

Александр, ооочень полезная статья, только не могу понять как и куда вставить этот код в мой блог на blogspot. На feedbuner скопировала, отредактировала, а дальше как? Если не трудно подскажите, пожалуйста.

Автор35
Александр Рус (участник БКС) http://myworkpro.ru/

Там же все просто. Зайдите в редактор блога, выберите Дизайн. В дизайне нажмите справа в колонке добавить виджет, перед вами высветится список виджетов, выберите "Рассылка обновлений по электронной почте", откроется новое окно где необходимо вписать URL своего Feedbuner, сохраняем и все готово.

Автор36
Александр Рус (участник БКС) http://myworkpro.ru/

Ну да, попробуйте поэксперементируйте.

P.S. Оксана, сделайте что бы при нажатии на ваш ник, можно было на ваш блог перейти.

37
Оксана

Спасибо! Это все сделала. А чтобы форма была красивая (использовать все ваши советы из этой статьи) нужно в коде править?

38
Компьютерная помощь http://ssecond-life.ru

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

Автор39
Александр Рус http://myworkpro.ru

Можно и без фотошопа, какую нибудь красивую картинку в интернете для формы подписки найти и скопировать)

40
Андрей http://zarobitok.ru

Статья зачетная, успехов 🙂

41
Дмитрий http://webmasterdima.ru

Спасибо большое! Кстати блог у Вас обалденно красивый, неприменно в закладки.

Автор42
Александр Рус (участник БКС) http://myworkpro.ru/

Рад, что понравилось.

43
Владимир http://i-cando.ru/

Спасибо за хороший урок. Наконец сделал нормальную форму feedburner у себя. Правда переделал ее под себя можете взглянуть.

44

Здравствуй Владимир. Код своей формы подписки не скинешь на мой емейл?
С уважением Иван Александрович

Автор45
Александр Рус (участник БКС) http://myworkpro.ru/

Напишите ему на его сайте в Обратную связь.

Автор46
Александр Рус (участник БКС) http://myworkpro.ru/

Посмотрел, красивее чем у меня получилось 🙂

47
Владимир http://i-cando.ru/

Я старался 🙂

48

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

Но и перебарщивать не нужно. Главное, чтобы форма была функциональной.

49
Александр Майер http://bloginfo.biz

Давно хочу поменять свой "баннер" с подпиской в конце статей на удобную, и добавить форму еще в сайдбар. Все руки никак не доходят =)

Автор50
Александр Рус (участник БКС) http://myworkpro.ru

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

51
Игорь http://blogopraktika.ru/

Да, стандартная форма никуда не годится. Править нужно в любом случае.

Автор52
Александр Рус (участник БКС) http://myworkpro.ru

Согласен с Вами Игорь.

53
Александр http://makyshkin.ru

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

Автор54
Александр Рус (участник БКС) http://myworkpro.ru

Ну тут уже дело принципов. Каждый может сделать на свой вкус и цвет-) нужно только желание и ФОТОШОП-)

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.