Форма подписки на сайт

форма подписки

Многие вебмастера хотели бы знать, как сделать свою форму подписки на сайт, чтобы она была красивая и привлекательная. Здесь подробная инструкция по редактированию кода формы подписки на примере сервисов 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.


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