Подарок
Приветствую Вас Гость RSS
Работа в интернете и финансовая свобода
Построй свой путь к финансовой свободе!
  • 1.jpg
    Изучив этот курс, Вы узнаете ровно пять секретов создания источника Пассивного Дохода. Этого достаточно, чтобы Вы определились - какой способ больше подходит лично для Вас. Узнать подробнее
  • 2.jpg
    Секреты практического SEO
    Скидка 13%
    Думаю, Вам не нужно объяснять, насколько важно для Вашего сайта иметь первые позиции в поисковых системах по ключевым для Вас запросам.
    Узнать подробнее
  • 3.jpg
    Акции, скидки, распродажи, купоны, возврат за покупку от 7% до 15%!
    И все от AliExpress!

    Узнать подробнее
  • 4.jpg
    Облачный майнинг Hashflare

    Зарабатывайте криптовалюту на удаленном использовании вычислительных мощностей >>


    Узнать подробнее
  • 5.jpg
    Online Школа RuElSoft
    - Автоматизация бизнеса
    - Бизнес инструменты
    - БЕСПЛАТНОЕ 4 дневное обучение >> Узнать подробнее

ВАШ ПОДАРОК

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!


Давайте дружить;)



Скрипты [8]Макеты сайта и его составляющие [2]

Программы и обучалки » Скрипты для сайта » Скрипты » Красивые формы подписки JustClick


Красивые формы подписки JustClick

15.09.2014, 22:55

Здравствуйте. В этой статье я хочу рассказать, как создать или переделать стандартную форму JustClick. Некоторые новички задаются вопросом «Зачем мне эта подписка, сайт есть и так нормально работает». Многие ищут работу в интернете, пытаются предложить свои услуги или товары, но упускают главный момент – это рассылка. Мало того, что сайт надо раскручивать, так надо еще иметь и дополнительный трафик: подписчики, RSS-лента, соцсети и другое. Это незаменимые элементы в онлайн-бизнесе. Сегодня мы поговорим о подписке на вашу рассылку и каким образом можно организовать красивые формы подписки. Как вы уже поняли, рассылка нужна для того, чтобы оповещать посетителей о ваших товарах, услугах, новостях на блоге и все то, что вам взбредет в голову.

Вот такую форму подписки мы будем делать. Ее можно подкорректировать под любой сервис.

thumblarge

Рассмотрим сервис JustClick.

Войдите или если еще не зарегистрировались в сервис, зарегистрируйтесь. Создайте рассылку, сгенерируйте форму и в настройках отставьте 2 поля: Имя и электронка. Я не буду описывать, как нужно создавать рассылку сервисе, это темы отдельных постов. .

Ну а кому влом разбираться, ниже находятся исходники.

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


Вот, что получилось от JustClick.


Листинг 1
Листинг 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>

Приступаем к созданию форм.

Скопируйте нижеприведенный код к себе в блокнот.


Стили:


Листинг 2
Листинг 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
Листинг 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" – идентификатор формы;
http://fastzar.justclick.ru – адрес вашего магазина;
rid[0]=first – идентификатор вашей рассылки.


Вот исходники на подписки. Эти формы можно внедрить в любую часть сайта, а также вставить на специальную страницу подписки или как его еще называют "Сайт-воронка". Пример страницы-воронки можете посмотреть здесь.

Спасибо за внимание!



Источник:  http://fastzar.ru
Категория: Скрипты | Теги: Скрипты
Просмотров: 1854 | Загрузок: 210

Похожие материалы:


    Как установить боковую панель социальных закладок?

    Как установить боковую панель социальных закл

    ЧИТАТЬ
    Для чего нужны мета-теги?

    Для чего нужны мета-теги?

    ЧИТАТЬ
    Как создать RSS-ленту для сайта?

    Как создать RSS-ленту для сайта?

    ЧИТАТЬ
    Как установить кнопки социальных сетей на сайт?

    Как установить кнопки социальных сетей на сай

    ЧИТАТЬ







Гарантированная защита от СПАМа!




Поделись с друзьями:



Уважаемые пользователи! Если Вы используете информацию с сайта, пожалуйста, ставьте ссылку на источник!


Читайте также:

Советы по работе с Forex
Как раскрутить интернет-магазин?
Что такое криптовалюта? Лучшие сервисы по добыче Биткоина
Пассивный доход и его секреты
Партнерские программы инфопродуктов
Самостоятельная раскрутка сайта с нуля
Лучшие сервисы по добыче Биткоина



Загрузка...


Если Вы нашли битую ссылку, пожалуйста, отпишите в комментарии!


Оставить комментарии:


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]





нет аватара




ОБ АВТОРЕ
TELEGRAM
FACEBOOK
ВКонтакте
МОЙ YOUTUBE
Я В INSTAGRAM
ПОЛУЧАТЬ НОВОСТИ САЙТА
RSS



Подписаться на E-mail:



Давайте дружить;)

РЕКЛАМА



СКИДКА 13%!!!
Кнопка сайта
Если Вам понравился данный материал, то можете рекомендовать его своим посетителям. Если Вы хотите обменяться с баннерами, пишите в форме Обратной Связи.

Работа в интернете и финансовая свобода

Код баннера
<a target="_blank" href="http://fastzar.ru" alt="Работа в интернете и финансовая свобода" title="Сайт Fastzar"><img src="http://fastzar.ru/baner/banner88x31.gif" alt="Работа в интернете и финансовая свобода"></a>
Для добавления сообщения авторизуйтесь

Вы хотите достичь финансовой независимости?
Узнайте все секреты построения успешного бизнеса в сети интернет!

Что такое инфобизнес и как он приносит деньги?

Как создать сайт и зачем он нужен в инфобизнесе?

Как зарабатывать в инфобизнесе большие деньги?

Что Вы получите:

очень полезные инфопродукты

права перепродажи на все инфопродукты

бесплатные уроки по созданию собственной системы продаж

только проверенные способы заработка в Интернете и Инфобизнесе

создание бесплатной рассылки

первый заработок в Интернете

а также Инфобизнес на автопилоте




Чтобы получить сборник, Просто введите Ваше Имя и E-mail в форму ниже и подтвердите свой e-mail, ссылка на скачивание будет выслана сразу же в письме.

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!

Оставить отзыв