Форма Подписаться на E-Mail для ucoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Форма Подписаться на E-Mail для ucoz


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

Перед тем как создавать данное решение у себя на сайте, вам необходимо ознакомиться с инструкцией по регистрации аккаунта Feedburner.

Как настроить Feedburner 
Счетчик Feedburner и подписка по E-mail

Шаг 1 - Установим HTML:
И так заходим в Feedburner => Выбираем нужный rss канал который вы создали => Выбираем вкладку Публикуй => Подписки по электронной почте => Ставим нужный язык => Сохраняем и копируем нужный html код:

HTML
Код
<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=center-dm/AimX', '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="center-dm/AimX" 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>

В вашем случае у вас будет такой же html код, но со своим фидом, в моём случае это - center-dm/AimX.

Теперь давайте изменим данный html код, пропишем ему нужные классы:

HTML
Код
<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=center-dm/AimX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
  <p>Подписаться на E-Mail:</p>  
  <input class="subscription-input" type="text" name="email"/>  
  <input type="hidden" value="center-dm/AimX" name="uri"/>  
  <input type="hidden" name="loc" value="ru_RU"/>  
  <input class="subscription-button" type="submit" value="Подписаться" />  
  </form>  
   
  </div>  
  </div>

Шаг 3 - Установим CSS:
Теперь когда мы проделали нужные манипуляции с данным html кодом, пропишем ему css стили:

CSS
Код
/* Форма Подписаться на E-Mail для ucoz  
------------------------------------------*/  
.cell-subscription {  
  float:left;  
  width: 250px;  
  text-align:center;  
  background: url(http://www.center-dm.ru/ucoz/vid_podskazka/2/cell-subscription.png) #fff repeat;  
  border-radius: 3px;  
}  

.cell-subscription-info {  
  float:left;  
  width: 210px;  
  padding: 10px 15px;  
  margin: 5px 5px 5px 5px;  
  background:#fff;  
  border-radius: 3px;  
}  

.cell-subscription-info input {  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  padding: 5px 10px;  
  border-radius: 3px;  
}  

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

.subscription-input{  
  float:left;  
  width: 188px;  
  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: #78db64!important;  
  border:1px solid #33a41c!important;  
  text-shadow:1px 1px 1px #258b10!important;  
  font-weight: bold!important;  
  color:#fff!important;  
}  

.subscription-button:active {box-shadow:inset 0px 0px 3px #23880e!important;}  
.subscription-button:hover {background:#6cca59!important;}

На этом всё, мы создали для вашего сайта в системе uCoz свою подписку на E-Mail адрес ваших пользователей!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 05.09.2013 в 16:53
Материал просмотрен: 1133 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта