Бесплатная html форма подписки на сайт | Подписаться на рассылку по email | Feedburner

Бесплатная html форма подписки на сайт | подписаться на рассылку по email | Feedburner
Форма подписки является одной из самых важных частей сайта и блога. Если использовать данный виджет, можно получить большой поток трафика на свой веб ресурс. Сегодня я поделюсь с вами двумя, замечательными html формами подписки, в одну из которых встроены иконки социальных сетей и так же расскажу вам, как настроить эти формы (настройка будет происходить через очередной сервис Google, который называется Feedburner).

Что такое форма подписки на сайте?

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

Что такое Feedburner и как это работает?

Feedburner - это один из немногих сервисов RSS потоков (лента новостей веб ресурса). У него есть много функций, но самыми главными являются подписка на рассылку по email и статистика подписок по RSS. Когда кто-то подпишется на ваш сайт через Feedburner, используя свою почту, он автоматически будет получать на эту же почту ваши последние публикации. Для начала работы в сервисе Feedburner вам нужно создать аккаунт в гугл. Вашим идентификатор в сервисе будет ваш логин. Этот логин нужно будет вставить в одной из форм, которую вы выберите.

Где на сайте лучше всего разместить форму подписки?

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

Установка формы подписки на сайт

Что ж, теперь вы знаете, что и к чему, по-этому можем приступать к установке. Как упоминалось ранее в статье, всего есть два варианта формы. Первый с иконками соц. сетей, второй вариант по-проще без иконой. Как выглядит первый тип формы вы можете посмотреть на одном из наших шаблонов для blogger Inspire в нем форма установлена на страницах с постами, в конце публикаций.

Чтобы формы отображались на ваших ресурсах сперва установите в своих HTML редакторах перед тегом </head> следующий код:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Код первой формы.

 html форма подписки на сайт первый вариант

Для первого варианта формы копируете и устанавливаете CSS код:

#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Сделали? Замечательно! Теперь завершающий этап для данного варианта формы. HTML код ниже, вставляете в том месте своего сайта в котором должна отображаться форма подписки. Вот и код:

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Поздравляю с установкой первого типа.

Код второй формы.

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

Если второй тип формы понравился вам больше, тогда проделайте следующее. Скопируйте код CSS и установите его в своем редакторе. Код:

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
.creadit a{color: #A7A6A6; float: right; font-size: 8px

HTML код для отображения формы вставляете там где она должна появиться на вашем сайте или блоге:

<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>

Настройка форм.

Настройка выполняется очень просто. В HTML коде везде где найдете фразу: YOUR-USER-NAME (для первого варианта формы) или просто: USER-NAME (для второго варианта формы) вставьте свой логин из сервиса Feedburner.

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


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Бесплатная html форма подписки на сайт | Подписаться на рассылку по email | Feedburner
4/ 5
Oleh

4 Коммент.

Оставить комментарий
avatar
Вадим Коваль
августа 13, 2016

Здравствуйте. Не могли бы помочь сделать виджет на блогер "подписаться на обновления блога по почте" чтобы этот виджет был в конце статьи?

И за сколько вы готовы помочь мне с этим. Может учтется, но я ваш постоянный покупатель.)

Ответить
avatar
Шаблоны для Blogger
августа 13, 2016

Здравствуйте. Вы хотите установить на свой блог одну из этих двух форм? Или хотите создать новую?

Ответить
avatar
Вадим Коваль
августа 13, 2016

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

Ответить
avatar
Шаблоны для Blogger
августа 13, 2016

Да, на соц сети можно вставлять ссылки.
Хорошо, поставим. Пишите на почту, договоримся.
shablonublogger@gmail.com

Ответить