Как сделать форму подписки на сайт

Как сделать форму подписки на сайт форма подписки

Многие вебмастера хотели бы знать, как сделать свою форму подписки на сайт, чтобы она была красивая и привлекательная. Здесь подробная инструкция по редактированию кода формы подписки на примере сервисов Smartresponder и JustClick.

Есть еще одна причина, по которой следует сделать свою форму подписки — это скорость работы сайта. Если взять сервис Смартреспондер, то у него два генератора для создания формы подписки. В новом генераторе форма получается красивая, но у неё слишком «тяжелый» код, подразумевающий загрузку сторонних файлов css. А в старом — сгенерированная форма — по красоте, далека от совершенства.

Поэтому возьмём код нашей формы и отредактируем его, чтобы она была привлекательная, лёгкая для загрузки, а заодно добавим к форме «магнит для подписчиков». Магнит — это картинка с бесплатной книгой или курсом, которые вы предлагаете посетителям своего сайта в обмен на подписку.

Форма подписки для Smartresponder

Если разделить, полученный на сервисе Smartresponder, код формы подписки на 2 части, то это скрипт (<script>...</script>) и сама форма (<form>...</form>). Скрипт служит для проверки введённых пользователем данных, а сама форма прекрасно будет работать и без него. Скрипт мы рассматривать не будем, вы вообще можете его убрать, однако это нецелесообразно.

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

  1. uid - ваш личный идентификатор name=uid value="559314"
  2. did - идентификатор конкретной рассылки name="did[]" value="683586"
  3. tid - идентификатор канала name=tid value="4443294"

Все идентификаторы находятся в тегах <input> — не забудьте заменить их числовые значения на свои! Первых два, личный и рассылки, у вас будут точно, а идентификатор канала, только если вы его создавали. Все значения идентификаторов вы можете узнать в своём аккаунте, или создать форму в старом генераторе, а затем её отредактировать.

Что касается каналов, то их можно создать в «Статистика — Каналы подписчиков», а нужны они для отслеживания подписок на одну рассылку из разных источников. К примеру, у вас три сайта, а рассылка общая — создайте 3 канала:

создание канала

Первоначальный код формы подписки выглядит следующим образом:

<!-- SmartResponder.ru subscribe form code (begin) --><script language="javascript" type="text/javascript"> function SR_IsListSelected(el) { for (var i = 0; i < el.length; i ++) if (el[i].selected || el[i].checked) return i; return -1; } function SR_trim(f) { return f.toString().replace(/^[ ]+/, '').replace(/[ ]+$/, ''); } function SR_submit(f) { f["field_email"].value = SR_trim(f["field_email"].value); f["field_name_first"].value = SR_trim(f["field_name_first"].value); if ((SR_focus = f["field_email"]) && f["field_email"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1 || (SR_focus = f["field_name_first"]) && f["field_name_first"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1) { alert("Укажите значения всех обязательных для заполнения полей (помечены звездочкой)"); SR_focus.focus(); return false; } if (!f["field_email"].value.match(/^[\+A-Za-z0-9][\+A-Za-z0-9\._-][\+A-Za-z0-9_]@([A-Za-z0-9]+([A-Za-z0-9-][A-Za-z0-9]+)\.)+[A-Za-z]+$/)) { alert("Некорректный синтаксис email-адреса!"); f["field_email"].focus(); return false; } return true; } </script> <form style="margin: 0; padding: 0;" name="SR_form" target="_blank" action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" onsubmit="return SR_submit(this)"><input type=hidden name=version value="1"><input type=hidden name=tid value="4443294"><input type=hidden name=uid value="559314"><input type=hidden name=lang value="ru"> <table width="240"> <tr><td style="padding: 5px; border: 1px solid #ff0000;background-color: #eeeeee;" align=center><table cellspacing=1 cellpadding=2 align=center> <tr><td align=center><a target="_blank" href="http://smartresponder.ru?ref=regg" class=classic><b><font color="#0000ff">SmartResponder.ru</font></b></a></td></tr> <tr><td><input type=hidden name="did[]" value="723012"></td></tr> <tr><td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;" align="center">Ваш e-mail: <font color="#ff0000"><b></b></font></td></tr> <tr><td align="center"><input type=text size="20" style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff; " name="field_email" value=""></td></tr> <tr><td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;" align="center">Ваше имя: <font color="#ff0000"><b></b></font></td></tr> <tr><td align="center"><input type=text size="20" style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #ffffff; " name="field_name_first" value=""></td></tr> <tr><td align="center"><input name="SR_submitButton" type=submit style="font-family: Verdana; font-size: 8pt; color: #000000; background-color: #f0f0c0; font-weight: bold;" value="Подписаться"></td></tr> </table><table cellspacing=1 cellpadding=1 align=center style="margin: 5 0 5 0"><tr valign=middle><td><span style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;">Подписчиков:</span></td><td><img alt="" title="" style="vertical-align: middle; margin: 0; padding: 0" src="http://srclick.ru/dcounter/559314_1700995648_723012_1_verdana_16_ff0000_1eeeeee/counter.gif?1407838842839"></td></tr></table></td></tr></table></form><!-- SmartResponder.ru subscribe form code (end) -->

Визуально это смотрится так, — форма подписки на второй картинке — то, что мы будем делать:

старая подписная формасвоя форма подписки

Название наших полей «Имя» и «Email» в этом примере у нас вынесены отдельно, а в следующем примере (в форме подписки для JustClick), мы сделаем их внутри поля. Я, конечно, не буду демонстрировать множество вариантов кода, вы просто сможете скомбинировать нужный вам вариант.

Код css, заключённый в <style>...</style>, поместите в ваш css-файл. Чтобы кнопка была с градиентом, используйте однопиксельное изображение, здесь — высотой 40px, и поменяйте «Название_Изображения»:

<style type="text/css"> table.podpiska{margin:0 auto} td{background-color:#fff} table.podpiska td.bord{border:2px solid #eee;border-radius:4px;box-shadow:0 1px 2px #999} .button-form{background:#68c6dd url(Название_Изображения.png) repeat-x;width:100%;height:40px;border-radius:4px;box-shadow:3px 3px 6px #ccc;color:#fff;font-size:14px;font-weight:700} input[type=submit]:hover{color:#e7e7e7} </style> <div style="width:240px;margin:0 auto"><p style="font-weight:700;font-size:12px;text-align:center">«Создание сайта от начала и до конца», 2014</p><p style="text-align:center"><img src="Картинка_Магнит.png" width="160" height="200" alt=""></p> <!-- СКРИПТ --> <form name="SR_form" action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank" onsubmit="return SR_submit(this)"> <table class="podpiska" cellspacing=10px cellpadding=0> <tbody> <tr> <td align="left"><label>Имя:</label></td> <td align="left" class="bord"><input type="text" name="field_name_first"></td> </tr> <tr> <td align="left"><label>E-mail:</label></td> <td align="left" class="bord"><input type="text" name="field_email"></td> </tr> <tr> <td colspan="2" align="center"> <input type="hidden" name="version" value="1"> <input type="hidden" name="uid" value="559314"> <input type="hidden" name="did[]" value="683586"> <input type="hidden" name="tid" value="4443294"> <input type="hidden" name="lang" value="ru"> <input class="button-form" type="submit" value="ПОЛУЧИТЬ"> </td></tr></tbody></table></form> </div>

Чтобы добавить картинку (магнит подписчика) c текстом, мы поместили весь код формы в тег <div>...</div>. Если у вас «нелады» с css, то поясняю, что нужно изменить: общую ширину блока 240px — на свою; размер картинки 160х200 и её название «Картинка_Магнит» — на своё. И не забудьте заменить значения идентификаторов "uid", "did[]" и "tid"!

Подписная форма для JustClick

На этом сайте находятся справочники HTML и CSS, в которых вы сможете уточнить назначение интересующих вас элементов. Если вы поняли механизм замены, то сможете редактировать подписные формы и с других сервисов рассылки. А сейчас сделаем форму подписки для рассылки на JustClick, которая будет выглядеть таким образом:

подписная форма джастклик

Отличие этой формы в том, что название полей находятся внутри них самих. Такой вариант формы вы сможете использовать для Смартреспондер или любого другого сервиса. Проделайте с кодом те же манипуляции, что в первом примере — код из <style>...</style> поместите в css-файл, поменяйте в нём высоту и «Название_Изображения» — это фоновое изображение для кнопки:

<style type="text/css"> table.podpishis{margin:auto} .button{background:#666 url(Название_Изображения.png) 0 -89px repeat-x;width:100%;height:33px;border-radius:4px;color:#eee;text-transform:uppercase} input[type=submit]:hover{color:#fff} </style> <div style="width:240px;margin:0 auto"> <p style="text-align:center"><img src="Картинка_Магнит.png" width="180" height="200" alt="">«Создание сайта от начала и до конца», 2014</p> <form action="http://javakurs.justclick.ru/subscribe/process/?rid[0]=first&doneurl2=http%3A%2F%2Fbook-sam.ru" method="post" target="_blank" id="subscr-form-2649" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"> <table class="podpishis" border="0" cellspacing="10" cellpadding="0"> <tr> <td align="center"><input name="lead_name" type="text" onblur='if(this.value=="") this.value="Ваше имя"' onfocus='if(this.value=="Ваше имя") this.value=""' value="Ваше имя"/></td> </tr> <tr> <td align="center"><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 align="center"><input name="lead_subscribe" type="submit" value="получить" class="button"/></td> </tr> </table> <script language="JavaScript" src="http://javakurs.justclick.ru/media/subscribe/helper2.js.php"></script><script language="JavaScript">jc_setfrmfld()</script></form> </div>

В остальном коде измените название картинки-магнита, её размер 180х200 и общую ширину блока, если нужно. Информация, идентифицирующая вас с формой, находится в <form action="..." — вместо троеточия, где rid[0]=... — это ваша рассылка (группа подписчиков). В подписной форме сервиса JustClick обязательными являются два поля с именами: lead_name и lead_email.


Обзор сервисов рассылки — сравнение по цене и опциям

О партнёрках

Книга по партнёркам

получить

Сайт с нуля

Сайт с нуля

получить

Курсы по созданию сайтов

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

Продвижение партнёрских продуктов

Продвижение партнёрских продуктов

хостинги

Выбор хостинга

Курсы Евгения Попова

Все курсы Евгения Попова

Продвижение статьями

Продвижение статьями с вечными ссылками

Видеокурсы Photoshop

Видеокурсы по Photoshop

Конструктор сайтов на русском

Конструктор сайтов на русском языке

Партнёрки инфопродуктов

Лучшие партнёрки инфопродуктов

Рассылка и набор подписчиков

Рассылка и набор подписчиков

Инфобизнес

Инфобизнес в деталях

Вёрстка сайта

Вёрстка HTML5

Как сделать форму подписки на сайт 402
Как сделать форму подписки на сайт 138
Как сделать форму подписки на сайт 77
Как сделать форму подписки на сайт 271
Как сделать форму подписки на сайт 23
Как сделать форму подписки на сайт 488
Как сделать форму подписки на сайт 150
Как сделать форму подписки на сайт 206
Как сделать форму подписки на сайт 746
Как сделать форму подписки на сайт 342
Как сделать форму подписки на сайт 291
Как сделать форму подписки на сайт 862
Как сделать форму подписки на сайт 588
Как сделать форму подписки на сайт 990
Как сделать форму подписки на сайт 928
Как сделать форму подписки на сайт 60
Как сделать форму подписки на сайт 410
Как сделать форму подписки на сайт 3
Как сделать форму подписки на сайт 383

Похожие записи:

  • Платье из сарафана своими руками
  • Поздравления с днем рождения для родителей девочки одного года
  • Как сшить конверт для сна
  • Как сделать такой же шаблон для сайта
  • Строительства крыши своим руками