Html subscribe mail to

How TO — Email Newsletter

Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.

How To Create a Newsletter

Step 1) Add HTML

Use a element to process the input. You can learn more about this in our PHP tutorial. Then add inputs for each field, together with a «submit» button:

Example

Step 2) Add CSS:

Example

/* Style the form element with a border around it */
form border: 4px solid #f1f1f1;
>

/* Add some padding and a grey background color to containers */
.container padding: 20px;
background-color: #f1f1f1;
>

/* Style the input elements and the submit button */
input[type=text], input[type=submit] width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
>

/* Add margins to the checkbox */
input[type=checkbox] margin-top: 16px;
>

/* Style the submit button */
input[type=submit] background-color: #04AA6D;
color: white;
border: none;
>

input[type=submit]:hover opacity: 0.8;
>

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.

Источник

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

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

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

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

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

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

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

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

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

Поддержка виджета FollowByEmail (FeedBurner) прекращается Вы получили это сообщение, потому что в вашем блоге используется виджет FollowByEmail (FeedBurner). Недавно команда FeedBurner объявила , что поддержка этого сервиса подписки на электронную рассылку прекращается в июль 2021 г.. Фид продолжит работать после июль 2021 г., но ваши подписчики перестанут получать сообщения автоматической электронной рассылки. Чтобы продолжить отправку сообщений, скачайте контактные данные подписчиков.

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

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

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

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

CSS#subscribebox .widget_follow_subscribe .widget-detail #subscribebox p .follow-subscribe-social .follow-subscribe-social ul .follow-subscribe-social ul li .follow-subscribe-social ul li:last-child .follow-subscribe-social ul li a .follow-subscribe-social ul li a:hover form.subscribe form.subscribe input .subscribe-email .subscribe-email:focus form.subscribe .placeholder form.subscribe input:-ms-input-placeholder form.subscribe input::-webkit-input-placeholder form.subscribe input:-moz-placeholder form.subscribe input::-moz-placeholder .subscribe-button .subscribe-button:hover .subscribe-button:focus .creadit a

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

HTML 
Subscribe to my Newsletter
 
  ' onfocus='if (this.value == "Your Email") ' value='Your Email'/> 
 

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

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

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

CSS#subscribe-box #subscribe-box p #subscribe-box .emailfield #subscribe-box .emailfield input #subscribe-box .emailfield input:focus #subscribe-box .emailfield .submitbutton #subscribe-box .emailfield .submitbutton:active #subscribe-box .emailfield .submitbutton:hover .creadit a

HTML 
 Subscribe for our all latest news and updates 
 
" onfocus="if (this.value == "Your Name") " type="text" value="Your Name" /> " onfocus="if (this.value == "Your Email") " type="text" value="Your Email" />   
 
 

CSS#wp-subscribe < padding:15px; background: #ffffff; >#wp-subscribe h4.title < font-size:18px; color:#e8503c; line-height: 1;text-align: center; margin-bottom: 0; margin: 10px; font-weight: 500>#wp-subscribe h4.title span #wp-subscribe p < color: #000000; margin: 0; text-align: center; >#wp-subscribe p.text < margin: 15px 0;font-size: 15px; >#wp-subscribe input < border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height:60px; >#wp-subscribe .email-field <> #wp-subscribe input.email-field #wp-subscribe input::-webkit-input-placeholder < color: inherit; opacity: 0.8; >#wp-subscribe input:-moz-input-placeholder < color: inherit; opacity: 0.8; >#wp-subscribe input::-moz-input-placeholder < color: inherit; opacity: 0.8; >#wp-subscribe input::-ms-input-placeholder < color: inherit; opacity: 0.8; >#wp-subscribe input:focus::-webkit-input-placeholder < color: transparent !important >#wp-subscribe input:focus::-moz-input-placeholder < color: transparent !important >#wp-subscribe input:focus:-moz-input-placeholder < color: transparent !important >#wp-subscribe input:focus::input-placeholder < color: transparent !important >#wp-subscribe input.submit #wp-subscribe p.footer-text

HTML 
get more nice stuff 
in your inbox
 
instantly by Subscribing to us. So you will get email everytime we post something new here
   
We guarantee you won't get any other SPAM
 

CSS.footer-logo < width: 100%; text-align: center; background-image: linear-gradient(107deg,#E91E63,#3672bd); background-position: 50%; background-repeat: no-repeat; padding: 20px 0px; margin-top: 30px;>#footer-subscribe < width:40%; overflow: hidden;margin: 0px auto;padding: 40px; >.FollowByEmail .follow-by-email-inner .follow-by-email-address .FollowByEmail .follow-by-email-inner .follow-by-email-submit .follow-by-email-inner p .FollowByEmail h2 .followbytext h2.date-header #FollowByEmail1 p @media screen and (max-width: 960px) < #footer-subscribe < width: 90%; height: initial; padding: 10px; >> table

HTML 
 
 Subscribe to our Newsletter
 
Sign up here with your email address to receive our all news and updates about blogger in your inbox. Its free.