Форма подписки легко и быстро

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

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

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

Красивых форм для подписки в сети много, на любой вкус и цвет, так что выбирайте то, что вам нравится и устанавливайте ее на свой блог.

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

И после того, как Вы уже установите коды новой формы, следуйте по шагам, подгоняя каждый элемент по такой последовательности:
1. Основная форма.
2. Форма ввода данных.
3. Кнопка подписки.

Как на этой картинке:

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

Теперь переходим к практике, а точнее к самому коду, который и нужно будет редактировать.

Первое:
Надеюсь у Вас уже есть код формы подписки, который Вы берете в своем кабинете сервиса рассылок, или на сервисе feedburner.  Feedburner всем хорош, но мне не очень нравится, что подписчики остаются на этом сервере.
А вот они, подписчики, мне нужны на своем сервисе рассылок для дальнейшей работы с ними.

Впрочем это Вам решать, работать с feedburner или нет

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

То, что выделено красным -удаляете, то что зеленым — дописываете.
Обратите внимание, если вы будете устанавливать свою кнопку, то надпись “Подписаться”, или что у вас там будет написано на самой кнопке, нужно будет удалить и оставить просто кавычки.

Вот код. Только не забудьте поставить адрес своего фида.

<div class="cell-subscription">  
  <div class="cell-subscription-info">  
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=ваш фид', 'popupwindow', 'scrollbars=yes,width=550,height=520');
return true">
<input class="subscription-input" type="text" name="email"/>
<input type="hidden" value="ваш фид" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input class="subscription-button" type="submit" value="Подписаться" /><p>
<a rel="nofollow" href="http://feedburner.google.com" target="_blank"></a></p></form>
</div>  
  </div>

Этот код мы вставляем в виджет, который ставим в то место, где будет Ваша форма подписки.

Второе:
Далее добавляем код css в файл стилей Вашего блога — style.css, который будет «управлять нашей формой подписки».
Где найти этот код?
В админке WordPressa: Внешний вид-Редактор-Таблица стилей.

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

/* Форма Подписаться на E-Mail  
------------------------------------------*/  
.cell-subscription {  
  float:left;  
  width: 250px;
  height:430px;  
  text-align:center;  
  background: url(https://successmen.ru/gena/wp-content/uploads/2018/03/f1.png) no-repeat;
  margin: -15px 0 20px -13px;  
}  

.cell-subscription-info {  
  float:left;  
  width: 200px;  
  padding: 10px 15px;  
  margin: 275px 6px 5px 45px;    
  border-radius: 3px;  
}  

.cell-subscription-info input {  
  font:12px Verdana,Arial,Helvetica, sans-serif;  
  padding: 5px 10px;  
  border-radius: 3px;
  margin: 10px 0px 0px 21px;
  width: 180px;
  height: 33px;  
}  

.cell-subscription-info p {  
  float:left;  
  width: 100%;  
  padding: 0px;  
  margin: 0px;  
}  

.subscription-input{  
  float:left;  
  width: 180px;  
  margin: 10px 0px;  
  background:#FAFAFA;  
  border: 1px solid #CAD3DA;  
  color:#555;  
}  

.subscription-input:focus {box-shadow:inset 0px 0px 3px #e6e6e6!important;}  

.subscription-button {  
  cursor:pointer;  
  background:url(https://successmen.ru/gena/wp-content/uploads/2018/03/button.png) no-repeat!important; 
  border:0px solid #8d592c!important;  
  text-shadow:1px 1px 1px #258b10!important;  
  font-weight: bold!important;  
  color:#fff!important; 
  width: 180px!important;
  height:64px!important;
  margin:7px 0px 0px 22px !important;  
}  

.subscription-button:active {box-shadow:inset 0px 0px 3px #23880e!important;}  
.subscription-button:hover {background:url(https://successmen.ru/gena/wp-content/uploads/2018/03/button2.png) no-repeat!important;}

/* Конец Формы Подписаться на E-Mail  
------------------------------------------*/

ВНИМАНИЕ: это только начальный шаблон кода, он работает с моей картинкой на форме подписки и с моими размерами самой формы,  — его нужно будет изменять и подгонять по Вашей картинке на форме уже по месту на сайте.

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

В этом месте Вы задаете размер Вашей формы подписки:
.cell-subscription {
float:left;
width: 250px;
height:430px;

Это строка  с Вашей картинкой фона формы подписки:
background: url (https://successmen.ru/gena/wp-content/uploads/2018/03/f1.png) no-repeat;

Строки:
background:url (https://successmen.ru/gena/wp-content/uploads/2018/03/button.png) no-repeat!important;
и
.subscription-button:hover {background:url (https://successmen.ru/gena/wp-content/uploads/2018/03/button2.png) no-repeat!important;}
Это Ваш кнопка.

Первая — button.png стоит на форме подписки.
Вторая — button2.png немного другая по цвету, появляется когда посетитель наводит на кнопку мышкой.

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

Положение полей для ввода E-mail и имени на форме подписки, а также кнопки меняйте, подбирая параметр margin и padding.
А размер самих полей настраиваем параметром width и height.

И последнее: Нужно проверить, как смотрится ваша форма в разных браузерах, так как это избавит вас от неправильной настройки формы. Mozilla и Chrome могут по-разному показывать вашу форму подписки, ну это только в том случае, когда вы не правильно установите параметры в файле css.
Надеюсь, что эта статья вам поможет сделать на ваш блог «красивую и уникальную форму подписки».

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

Успехов Вам.
Ваш Геннадий Гуковский

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