Регистрация    Войти
Авторизация

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

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

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


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

<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 стили:

/* Форма Подписаться на 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 адрес ваших пользователей!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  27-09-2013, 11:35   Просмотров: 2945   
Форма Подписаться, Подписаться на E-Mail для ucoz, Подписаться на E-Mail, E-Mail для ucoz, Форма, для uCoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.