Красивые формы подписки JustclickЗдравствуйте. В этой статье я хочу рассказать, как создать или переделать стандартную форму JustClick. Некоторые новички задаются вопросом «Зачем мне эта подписка, сайт есть и так нормально работает». Многие ищут работу в интернете, пытаются предложить свои услуги или товары, но упускают главный момент – это рассылка. Мало того, что сайт надо раскручивать, так надо еще иметь и дополнительный трафик: подписчики, RSS-лента, соцсети и другое. Это незаменимые элементы в онлайн-бизнесе. Сегодня мы поговорим о подписке на вашу рассылку и каким образом можно организовать красивые формы подписки. Как вы уже поняли, рассылка нужна для того, чтобы оповещать посетителей о ваших товарах, услугах, новостях на блоге и все то, что вам взбредет в голову. Вот такую форму подписки мы будем делать. Ее можно подкорректировать под любой сервис. 
Рассмотрим сервис JustClick. Войдите или если еще не зарегистрировались в сервис, зарегистрируйтесь. Создайте рассылку, сгенерируйте форму и в настройках отставьте 2 поля: Имя и электронка. Я не буду описывать, как нужно создавать рассылку сервисе, это темы отдельных постов. . Ну а кому влом разбираться, ниже находятся исходники. Для начала нужно создать рассылку и сгенерировать формы для этих рассылок. Согласитесь, полученный код содержит много хлама, а форма как была стандартная, без всяких дизайнерских штучек, так и осталась. Я не говорю, что я очень хороший web-дизайнер, но примитивную форму подписки создала, ее легко переделать под свой вкус и не содержит всякого «мусора». Вот, что получилось от JustClick. Листинг 2 <div
class="jc_subblock_0 jc_subblocktexture_0" id="subscr-block-3130"> <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> Приступаем к созданию форм. Скопируйте нижеприведенный код к себе в блокнот. Стили: Листинг 3 form{ 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 код: Листинг 3 <link
rel="stylesheet" href="styles.css" type="text/css" ><!--Подключаем стили--> <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> <!--Форма подписки конец--> Изображения стрелок, бонуса (это может быть ваша книга, видеокурс и др.) подставите сами. Ниже я дам ссылку на исходники, там еще тоже приложены к коду комментарии. Вот, что нужно изменить: Листинг
5 <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)"> где id="subscr-block-3130" – идентификатор
формы;
Вот исходники на подписки. Эти формы можно внедрить в любую часть сайта, а также вставить на специальную страницу подписки или как его еще называют "Сайт-воронка". Пример страницы-воронки можете посмотреть здесь. Спасибо за внимание!
 |
|
||||||||||||||||||||||||||
| ||||||||||||||||
© Fastzar.ru, 2024
 | ||||||||||||||||
