Как связать панель подписки с сервисом рассылок?

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В предыдущем уроке мы изучили, как можно сделать выезжающую панель подписки. Но, без привязки к сервису подписки, сама по себе панель будет совершенно бесполезным элементом страницы сайта. После интеграции с сервисом подписки, человек, который введёт своё имя и адрес электронной почты в отведённые для этого поля, соглашается в дальнейшем на вашу рассылку и получает то, что Вы ему предлагали. Рассмотрим привязку формы к самому распространённому сервису email-рассылок - Смартреспондер.

Прежде всего, нужно зарегистрироваться в сервисе Smartresponder.ru, если Вы этого прежде не сделали, и проплатить свой аккаунт, хотя бы на месяц. Подобного рода сервисы платные, но, в процессе работы они окупаются за счёт монетизации собранной вами базы подписчиков. Далее, нужно оформить свою рассылку, получить html-код сгенерированной формы и затем уже привязать нашу панель к этой рассылке.

Полностью описывать весь процесс регистрации и создания рассылки я не буду, так как нет смысла повторяться. Весь материал и конкретные объяснения есть на самом сервисе. Обратитесь к «базе знаний» сервиса, где Вы найдёте ответы на все ваши вопросы в текстовом и видео варианте (серия видеоуроков «Быстрый старт»).

Итак, будем считать, что в конечном итоге, рассылка у вас создана и Вы не хотите размещать стандартное окно подписки от сервиса Смартреспондер, а привязать к сервису нашу универсальную выплывающую панель.

Процесс привязки панели

В этой процедуре нет ничего сложного, просто нужно стандартный код панели (из раздела "Шаг 3" на открывшейся по ссылке странице) дополнить элементами кода формы сервиса Смартреспондер. Для этого нужно скопировать и сохранить в отдельном текстовом документе код формы от Смартреспондера. Хочу отметить, что нужно брать код СТАРОЙ формы, так как с ней проще разобраться и данный урок «заточен» под неё.

Как делать панель мы учились на предыдущем уроке и сейчас нужно просто продолжить эту работу и связать её с сервисом рассылок.

Откройте текстовой документ с кодом формы Смартреспондера. Он начинается скриптом проверки правильности заполнения полей, который нужно скопировать и вставить, желательно в head вашей страницы:

<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>

Внизу в таблице представлен HTML-код уже РАБОЧЕЙ панели со всеми вставленными элементами. Я просто выбирал, копировал и вставлял эти элементы, которые отмечены красным цветом, из HTML-кода формы сгенерированной Смартреспондером, в код нашей панели:

<div id="bottomPanel">
 <div id="bottomPanelConteiner">
 <a class="close" href="#"></a>
 <img src="images/logo.png" id="bottomPanelLogo">
 <form name="SR_form" target="_blank" action="//smartresponder.ru/subscribe.html" method="post" onsubmit="return SR_submit(this)">
 <span class="title">новые видеоуроки  <span>бесплатно!</span></span>
 <input type=hidden name="did[]" value="202124">
 <input type=hidden name=version value="1">
 <input type=hidden name=tid value="0">
 <input type=hidden name=uid value="63387">
 <input type=hidden name=lang value="ru"> 
 <input class="placeholder" type="text" name="field_name_first" name="field_name_first" placeholder="Введите ваше имя">
 <input class="placeholder" type="text" name="field_email" name="field_email" placeholder="Введите ваш email">
 <button type="submit" name="SR_submitButton">Подписаться</button>
 </form>
 </div>
 </div>
 <img id="showBottomPanel" src="images/showBottomPanel.png" alt="">

 

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

<input type=hidden name="did[]" value="202124">
<input type=hidden name=version value="1">
<input type=hidden name=tid value="0">
<input type=hidden name=uid value="63387">
<input type=hidden name=lang value="ru">
Можно заменить как отдельно наборы цифр, так и строки целиком. И это всё, что от Вас требуется! Всё должно изумительно работать!

Далее, нужно проверить работу панели. Попробуйте нажать кнопку «Подписаться» при незаполненных полях - скрипт должен выдать предупреждение. Аналогичные предупреждения Вы получите при незаполнении одного из полей. Значит всё в порядке!

Заполните правильно все поля и нажмите кнопку «Подписаться» - должна открыться страница сайта Smartresponder.ru: «Вы подписываете адрес такой-то на рассылки» и тема вашей рассылки или бонуса. Значит Вы всё сделали правильно, ваша панель подписки привязана к Смартреспондеру и работает! Подпишите самого себя на свою рассылку (для проверки), затем удалите из своего аккаунта в Смартреспондере.

Вот и всё! Будьте счастливы и здоровы! До новых встреч и уроков. Ваш L.M.