Собственная форма подписки сервиса Smartresponder

Сегодня снова столкнулся с жуткой формой сервиса Smartresponder. Иногда приходится устанавливать форму подписки от Smartresponder на клиентских сайтах.

Внутри сервиса есть два разных конструктора форм — старый и новый. Что-то мне кажется, что старый конструктор рассчитан на тех людей, которые хотят сами «застилить» свою форму подписки. Но на практике все куда сложнее. Как правило, даже со старым упрощенным вариантом формы у многих возникают сложности.

Старый генератор формы подписки Smartresponder:

В данном коде формы сервиса Smartresponder очень много лишнего.

<!-- 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" method="post" onsubmit="return SR_submit(this)"><input type=hidden name=version value="1"><input type=hidden name=tid value="0"><input type=hidden name=uid value="172418"><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><input type=hidden name="did[]" value="328936"></td></tr>
<tr><td style="font-family: Verdana; font-size: 8pt; color: #000000; font-weight: bold;" align="center">Ваш e-mail:&nbsp;<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">Ваше имя:&nbsp;<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/172418_1615933874_328936_1_verdana_16_ff0000_1eeeeee/counter.gif?1404136339672"></td></tr></table></td></tr></table></form>
<!-- SmartResponder.ru subscribe form code (end) -->

Новый генератор формы подписки Smartresponder:

В этом коде Smartresponder формочки также очень много ненужной нам информации.

<!-- SmartResponder.ru subscribe form code (begin) -->
<link rel="stylesheet" href="https://imgs.smartresponder.ru/e1bbeb24091b44f1f4048bbc87edacd11278fd23/">
<script type="text/javascript" src="https://imgs.smartresponder.ru/52568378bec6f68117c48f2f786db466014ee5a0/"></script>
<script type="text/javascript">
    _sr(function() {
        _sr('form[name="SR_form_1_24"]').find('div#sr-preload_').prop('id', 'sr-preload_1_24');
        _sr('#sr-preload_1_24').css({'width':parseInt(_sr('form[name="SR_form_1_24"]').width() + 'px'), 'height':parseInt(_sr('form[name="SR_form_1_24"]').height()) + 'px', 'line-height':parseInt(_sr('form[name="SR_form_1_24"]').height()) + 'px'}).show();
        if(_sr('form[name="SR_form_1_24"]').find('input[name="script_url_1_24"]').length) {
            _sr.ajax({
                url: _sr('input[name="script_url_1_24"]').val() + '/' + (typeof document.charset !== 'undefined' ? document.charset : document.characterSet),
                dataType: "script",
                success: function() {
                    _sr('#sr-preload_1_24').hide();
                }
            });
        }
    });
</script>
<div id="outer_alignment">
    <form class="sr-box" method="post" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_1_24" style="width: 299px; border: 1px solid rgb(200, 200, 200); margin-left: ; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
        <input type="text" name="field_name" class="sr-name">
        <div id="sr-preload_" style="display: none; background-color: #f6f6f6; opacity: 0.5; position: absolute; z-index: 100; text-align: center; font: bold 15px Arial;">Загрузка...</div>
        <ul class="sr-box-list"><li class="sr-1_24" style="text-align: center; border: 0px solid rgb(0, 0, 0); height: auto; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(251, 251, 251);"><label class="" style="font-family: arial; color: rgb(84, 93, 103); font-size: 18px; font-weight: bold; height: auto; line-height: 25px;">Подписка на рассылку</label><input type="hidden" name="element_header" value="" style="font-family: Arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; font-weight: normal; border: none; box-shadow: none; background-color: rgb(255, 255, 255);"></li><li class="sr-1_24" style="text-align: center; height: 50px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(251, 251, 251);"><label style="font-weight: normal; font-family: arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; display: none;" class="remove_labels"></label><input type="text" name="field_name_first" style="font-weight: normal; font-family: arial; color: rgb(200, 200, 200); font-size: 12px; font-style: normal; border: 1px solid rgb(200, 200, 200); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 35px; box-shadow: none; margin-top: 15px; background-image: none; background-color: rgb(255, 255, 255);" value="Ваше имя:"></li><li class="sr-1_24" style="text-align: center; height: 50px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(251, 251, 251);">
<label style="font-weight: normal; font-family: arial; color: rgb(0, 0, 0); font-size: 12px; font-style: normal; display: none;" class="remove_labels"></label>
<input type="text" name="field_email" class="sr-required" style="font-weight: normal; font-family: arial; color: rgb(200, 200, 200); font-size: 12px; font-style: normal; border: 1px solid rgb(200, 200, 200); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; height: 35px; box-shadow: none; margin-top: 15px; background-image: none; background-color: rgb(255, 255, 255);" value="Ваш email-адрес:">
            </li><li class="sr-1_24" style="text-align: center; border: 0px; height: 65px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(251, 251, 251);">
            <table id="elem_table_subscribe" border="0" cellspacing="0" cellpadding="0" style="display: inline-table; border-collapse: separate; margin-top: 12px;"><tbody><tr><td id="elem_left_subscribe" valign="middle" style="width: 17px; height: 35px; background: url(https://imgs.smartresponder.ru/on/bb76f843df9be26bc9c673d51311b75f02a4a48d/) 0% 50% no-repeat transparent;"></td><td id="elem_container_subscribe" style="vertical-align: middle;"><input type="submit" name="subscribe" value="Подписаться" style="font-family: arial; color: rgb(255, 255, 255); font-size: 14px; font-weight: bold; border: 0px solid rgb(240, 240, 240); height: 35px; width: 100%; margin: 0px; padding: 0px 12px; box-shadow: none; background: url(https://imgs.smartresponder.ru/on/29cdddd2c7584ef90392a40e9f768a8629cd0337/) 0% 50% repeat transparent;"></td><td id="elem_right_subscribe" style="width: 17px; height: 35px; background: url(https://imgs.smartresponder.ru/on/246c141e33d5150d05cc1c6aaa8cf835f4387a36/) 0% 50% no-repeat transparent;"></td></tr></tbody></table></li><li class="sr-1_24" style="text-align: center; height: 50px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-color: rgb(251, 251, 251);"><label id="cnt" style="font-size: 12px; color: rgb(200, 200, 200); font-family: arial; font-weight: 400; font-style: normal; line-height: 60px;">Подписчиков  <img src="http://srclick.ru/dcounter/172418_1615933874_328936_1_verdana_10_ada6ad_0ffffff_right/counter.gif?1404139283"></label><input type="hidden" name="element_counter" value=""></li></ul>
        <input type="hidden" name="uid" value="172418">
    <input type="hidden" name="tid" value="0"><input type="hidden" name="lang" value="ru"><input type="hidden" name="did[]" value="328936"><input name="script_url_1_24" type="hidden" value="https://imgs.smartresponder.ru/on/6e7d54aeeac42d70e634c580f2d1395c1a8959f2/1_24"></form>
</div>
<!-- SmartResponder.ru subscribe form code (end) -->

На первый взгляд все очень сложно и непонятно, и как из этого всего вытащить саму форму без ужасных стилей и непонятного оформления, неясно. Поэтому в этой статье, я расскажу Вам, как сделать собственную форму подписки сервиса smartresponder.

Очищенный мною код формы подписки сервиса Smartresponder

Обратите внимания на скрипт в самом начале форм. В обеих формах он неидентичен и служит, как я понял, для проверки полей на что-то там: на правильность заполнения, валидность. В общем нам этот кусок нафиг не нужен, обойдемся без него.

Помучившись минут 15, я смог отделить параметры стандартной формы Smartresponder от остального хлама, и разобраться в том, какую смысловую нагрузку они несут, что делают. И вот, что получилось у меня:

<form action="http://smartresponder.ru/subscribe.html" method="post" name="SR_form" target="_blank">
<input type="hidden" name="version" value="1">
<input type="hidden" name="uid" value="172418">
<input type="hidden" name="did[]" value="328936">
<input type="hidden" name="tid" value="480396">
<input type="hidden" name="lang" value="ru_RU">
<div>
  <input type="email" name="field_email" placeholder="Адрес для подписки">
</div>
<div>
  <input type="text" name="field_name_first" placeholder="Ваше имя">
</div>
<div>
  <button type="submit" name="SR_submitButton">Подписаться</button>
</div>
</form>

Стоить сразу обратить внимание на следующие «Инпуты»:

<input type="hidden" name="version" value="1"> — просто версия (можете поставить в кавычках любимое свое число, я же просто удаляю);
<input type="hidden" name="uid" value="172418"> — ID Вашего аккаунта;
<input type="hidden" name="did[]" value="328936"> — ID Вашей рассылки;
<input type="hidden" name="tid" value="480396"> — канал подписки, связанный с формой;
<input type="hidden" name="lang" value="ru_RU"> — язык «русский».

Тип «hidden» атрибута «type» нам говорит, о том, что это скрытые поля формы. Используются они для того, чтобы незаметно подставлять данные для пользователя с помощью js или php. Чтобы в дальнейшем получать их с помощью $_POST или $_GET в обработчике с другими полями форм. $_POST или $_GET указывается в теге <form>.

Теперь сортируем все так, чтобы было, как говорится по Фэн-Шуй. :-) И получаем такую вот не замудренную форму подписки smartresponder, которую можно установить и застилить на любом сайте, в любое время, даже когда smartresponder обновит свои формы.

<form action="http://smartresponder.ru/subscribe.html" method="post" name="SR_form" target="_blank">
  <input type="hidden" name="uid" value="172418">
  <input type="hidden" name="did[]" value="328936">
  <input type="hidden" name="tid" value="480396">
  <input type="hidden" name="lang" value="ru_RU">
  <div>
    <input type="email" name="field_email" placeholder="Адрес для подписки">
  </div>
  <div>
    <input type="text" name="field_name_first" placeholder="Ваше имя">
  </div>
  <div>
   <button type="submit" name="SR_submitButton">Подписаться</button>
  </div>
</form>

А Вы, на своих сайтах, какую форму подписки предпочитаете? Smartresponder или может FeedBurner или может что нибудь иное?

Похожие заметки
Последние заметки
Если вам понравилась статья, вы можете подписаться на RSS или e-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (доставка от SmartResponder):

14 комментариев

  1. Илья,
    1

    И зачем писать тут коды, если их нельзя скопировать?

  2. Евгений Москаленко,
    2

    Илья, почему же? Все прекрасно копируется. Выбираете весь код, нажимаете правой кнопочкой мышки и выбираете «копировать».

    Отправил код на Ваш почтовый адрес.

  3. Марина,
    3

    нужно было установитьь форму подписки от Smartresponder на клиентских сайтах, долго ломала над этим голову. Хорошо скопировала уже почищенный код, теперь все работает без проблем

  4. Роман,
    4

    Полезная форма подписки, хотелось бы узнать, какой визуальный вид она будет иметь. Если можно сделайте скриншот и дополните статью. Заранее благодарен. И еще вопрос: в какой части сайта лучше всего размещать форму подписки?

  5. Евгений Москаленко,
    5

    Форма полностью очищена от всех мусорных тегов и стилей сервиса Smartresponder. То есть выглядеть оно не как не будет, просто поля формы и кнопка.

    Размещать форму подписки необходимо индивидуально для каждого сайта. Главное, чтобы она была всегда на виду.

  6. Зоя,
    6

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

  7. Евгений Москаленко,
    7

    Зоя, так сходу не ответишь куда лучше ставить форму smartresponder.

    Для каждого сайта по разному. Где-то она работает лучше в сайдбаре, а у кого-то в шапке. У всех по разному: надо ставить, тестировать и экспериментировать.

  8. Катерина,
    8

    Евгений, здравствуйте!

    Попробовала вставить ваш код формы :) мило, но слишком просто, подскажите как в этот код дописать цвет вокруг и сделать чтобы отображалась цифра подписчиков.

    Спасибо.

  9. Евгений Москаленко,
    9

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

  10. seoonly.ru,
    10

    Форма у них отлично вписывается в любой дизайн

  11. Александр,
    11

    Полезная статья! помогли разобраться) и немного усовершенствовал код:

    как Вам?

  12. Александр,
    12

    а код и не отобразился в коменте)

  13. Андрей,
    13

    Благодарю! Осталось CSS подправить под дизайн ))

  14. Alexander,
    14

    Круто! Спасибо большое! А то уж очень грязный код был.

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