Красивые формы подписки Justclick
Здравствуйте. В этой статье я хочу рассказать, как создать или переделать стандартную форму JustClick. Некоторые новички задаются вопросом «Зачем мне эта подписка, сайт есть и так нормально работает». Многие ищут работу в интернете, пытаются предложить свои услуги или товары, но упускают главный момент – это рассылка. Мало того, что сайт надо раскручивать, так надо еще иметь и дополнительный трафик: подписчики, RSS-лента, соцсети и другое. Это незаменимые элементы в онлайн-бизнесе. Сегодня мы поговорим о подписке на вашу рассылку и каким образом можно организовать красивые формы подписки. Как вы уже поняли, рассылка нужна для того, чтобы оповещать посетителей о ваших товарах, услугах, новостях на блоге и все то, что вам взбредет в голову.
Вот такую форму подписки мы будем делать. Ее можно подкорректировать под любой сервис.
Рассмотрим сервис JustClick.
Войдите или если еще не зарегистрировались в сервис, зарегистрируйтесь. Создайте рассылку, сгенерируйте форму и в настройках отставьте 2 поля: Имя и электронка. Я не буду описывать, как нужно создавать рассылку сервисе, это темы отдельных постов. .
Ну а кому влом разбираться, ниже находятся исходники.
Для начала нужно создать рассылку и сгенерировать формы для этих рассылок. Согласитесь, полученный код содержит много хлама, а форма как была стандартная, без всяких дизайнерских штучек, так и осталась. Я не говорю, что я очень хороший web-дизайнер, но примитивную форму подписки создала, ее легко переделать под свой вкус и не содержит всякого «мусора».
Вот, что получилось от JustClick.
<form action="http://fastzar.justclick.ru/subscribe/process/" method="post" target="_blank" id="subscr-form-3130" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"><style type="text/css">@import url('http://fastzar.justclick.ru/media/css/page_ext.css');</style>
<style type="text/css">#subscr-block-3130 {
width:290px;
margin:0 auto;
padding:25px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#subscr-form-3130 td {
font:normal 16px Arial,Helvetica,sans-serif;
text-align:center;
nbsp; padding:0;
}
#subscr-form-3130 input.form-submit {
text-align:center;
width: auto;
}
#subscr-form-3130 #form-submit-3130 {
border:solid 1px #E0E0E0;margin-top:5px;
}
#subscr-form-3130 a.jc_compile_btn, input.form-submit.jc_compile_btn {
border:solid 1px #E0E0E0;margin-top:5px;
}
#subscr-form-3130 a.jc_compile_btn span, #subscr-form-3130 input.form-submit.jc_compile_btn {
font:normal 20px Arial;
padding-top:7px;
margin-bottom:-5px;
}
#subscr-form-3130 input[type=text] {
color:#000;
font-size:16px;
text-align:left;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
border:#ccc 1px solid;
padding:7px 10px;
margin:5px 10px 8px;
width:240px;
}
</style>
<table align="center" border="0" cellspacing="0" cellpadding="3"><tbody>
<tr>
<td><input name="lead_name" type="text" onblur='if(this.value=="") this.value="Введите ваше имя"' onfocus='if(this.value=="Введите ваше имя") this.value=""' value="Введите ваше имя"/></td>
</tr>
<tr>
<td><input name="lead_email" type="text" onblur='if(this.value=="") this.value="Введите ваш e-mail"' onfocus='if(this.value=="Введите ваш e-mail") this.value=""' value="Введите ваш e-mail"/></td>
</tr>
<tr>
<td><input type="submit" class="form-submit jc_compile_btn small black-smooth-gradient" style="color:#fff" value="Подписаться!" /></td>
</tr></tbody>
</table>
<script language="JavaScript" src="http://fastzar.justclick.ru/media/subscribe/helper2.js.php"></script>
<script language="JavaScript">jc_setfrmfld()</script>
</form>
</div>
Приступаем к созданию форм.
Скопируйте нижеприведенный код к себе в блокнот.
Стили:
width:250px;/*регулируемый параметр ширины формы*/
}
#optin {
padding:10px 15px;
text-align: center;
background:url(fon2.png); /*фон формы*/
border:2px ridge black;/*рамка формы*/
border-radius:10px; /*закругление краев формы*/
}
#optin input[type="text"]{
border:0;
font-size: 10px;
margin-bottom: 10px;
padding: 8px 10px;
width: 100%;/*ширина полей*/
border-radius:10px;
outline: none;
color: rgb(150, 150, 150);
padding-left:35px;/*отступ от пиктограммы*/
}
#optin input[type="submit"]{
outline: none;
background:url(battom-red4.png);/*Тут может быть любая другая ваша кнопка*/
border:0;
cursor:pointer;
width:220px;/*размеры кнопки*/
height:60px;/*в уменьшенном виде*/
}
html код:
<div class="jc_subblock_0 jc_subblocktexture_0" id="subscr-block-3130">
<form action="http://fastzar.justclick.ru/subscribe/process/?rid[0]=first" method="post"
target="_blank" id="subscr-form-3130" onsubmit="return jc_chkscrfrm(this, false, false,
false, false)">
<div id="optin">
<center><font color="white">Получите в подарок дрессированного Слона стоимостью 1 миллион $ </font><font color="red">Бесплатно!</font></center>
<center><img src="giftbox.png" width="180" height="150"></center>
<center><img src="strelka-vniz.gif" width="80" height="80"></center>
<input style="background:url(name2.jpg) no-repeat;background-color:white;" type="text"
name="lead_name" onblur="if(this.value=='')this.value=this.defaultValue;"
onfocus="if(this.value==this.defaultValue)this.value='';"
value="Ваше имя:">
<input style="background:url(pass2.jpg) no-repeat;background-color:white;" type="text"
name="lead_email" onblur="if(this.value=='')this.value=this.defaultValue;"
onfocus="if(this.value==this.defaultValue)this.value='';"
value="Ваш email-адрес:">
<input type="submit" name="subscribe" value="">
<center>
<p style="font-size:8pt;color:white">
<img src="lockss1.png" align="left" style="margin-right:3px">
Ваша информация защищена на 100%! Гарантированная защита от <strong>СПАМа</strong>!</p>
</center>
</div>
</form>
</div>
<!--Форма подписки конец-->
Изображения стрелок, бонуса (это может быть ваша книга, видеокурс и др.) подставите сами. Ниже я дам ссылку на исходники, там еще тоже приложены к коду комментарии.
Вот, что нужно изменить:
где id="subscr-block-3130" – идентификатор
формы;
http://fastzar.justclick.ru – адрес вашего магазина;
rid[0]=first – идентификатор вашей рассылки.
Вот исходники на подписки. Эти формы можно внедрить в любую часть сайта, а также вставить на специальную страницу подписки или как его еще называют "Сайт-воронка". Пример страницы-воронки можете посмотреть здесь.
Спасибо за внимание!
