Красивая форма подписки для вашего сайта! Smartresponder.ru — сервис авторских рассылок!

Автор: Рустам Борисов
Рубрика: Email-маркетинг
Опубликовано:
просмотров: 20707

Приветствую вас уважаемые друзья, коллеги! Сегодня я научу вас тому, как сделать красивую форму подписки для своего сайта.

Как сделать красивую форму подписки для сайта!
Не просто одну, форму подписки, а как делать разные формы подписки, очень красивые, с высокой конверсией, привлекающие внимание, приятные для глаз наших уважаемых посетителей…

С такими формами мы будем значительно выделяться из общей массы всей интернет толпы! Расскажу вам, в чем разница между обычными (стандартными) формами и формами, которые вы создадите после изучения моей статьи.

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

Формы подписки обязательно должны находиться на нашем сайте, в разных местах, на разных страницах. Расположение их должно зависеть от их видимости, доступности. Красивая и удобная форма подписки на вашу рассылку должна находиться на самом виду для посетителя! Не в коем случае не одна и не на одной, отдельной странице вашего блога. Чем проще подписаться, тем больше будет конверсия!

Как создать форму подписки (для новичков!)

Статья будет большая, поэтому запаситесь терпением и интересом, вы многому научитесь!

На протяжении всей статьи мы будем работать только с одним сервисом e-mail рассылок – Smartresponder.ru

Для начала необходимо стать, автором рассылки зарегистрировавшись на Smartresponder.ru и создать рассылку, это тема другой статьи, иначе вы будете читать до утра! Или до вечера!

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

Но сначала создадим канал для нашей будущей формы подписки, потом вы поймете зачем он нужен, я объясню!

Переходим на вкладку «Статистика» — «Каналы для форм подписки»

Как создать канал рассылки!

Название канала:

Здесь вы можете прописать название вашего канала в соответствии с тем, где будет использоваться форма подписки, зачем, почему и т.д. Все что захотите, пишите как вам угодно, суть в том, что бы вам было легче разобраться, где находиться та или иная форма подписки на вашем сайте или сайтах, или страницах курсов, книг и тому подобного! Просто сделайте так, потом все станет ясно…

Код канала:

Максимум 16 символов, только буквы латинского алфавита и цифры. Не придумывайте ничего секретного, это просто код канала, 4 символа вполне достаточно!

Нажимаем кнопку «Создать». Отлично!

Теперь переходим на вкладку «ФОРМЫ» и выбираем пункт «Генератор форм подписки»

Как создать форму подписки на серевисе Смартреспондер.ру

Попадаем на страницу генерации формы подписки

Данная страница разделена на три области (три блока), в первой непосредственно находиться генератор, во второй области, которая называется «Внешний вид формы» мы будем просматривать результат того что мы делаем, видеть форму. И в третьем, нижнем блоке будет находиться код нашей с вами вновь созданной формы подписки, который необходимо вставить в код шаблона нашего сайта!

Вот полный скриншот страницы генератора форм, нажмите на него, и он откроется на другой странице!

Генератор форм подписки для сайта!

1. Здесь вы просто даете название форме подписки (как шаблону), например в зависимости от того внешнего вида, которые вы хотите для нее создать.

Ввели? Молодцы! Нажимаем сохранить!

Приступаем к настройке формы подписки!

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

3. Мы сразу создали канал, мы молодцы, хотя на первое время можно прекрасно обойтись без него, но я объясню вам, зачем это нужно.

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

Итак, здесь нужно выбрать название канала, он у нас создан, выбираем и идем дальше.

4. Выбор полей формы

Не знаю для каких целей вам может понадобиться дополнительная информация о подписчике, например его пол, год рождения, но их мы добавлять в форму подписки не станем! Наша задача, предоставить подписчику простую форму подписки, всего лишь два поля (имя и e-mail).

Эти поля выбраны уже по умолчанию, поэтому идем дальше.

5. Здесь практически все относится ко внешнему виду формы подписки.

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

Ну вот и все, стандартная форма подписки у нас готова!

В области «Внешний вид» мы видим все что создали.

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

<!-- SmartResponder.ru subscribe form code (begin) --><script type="text/javascript" language="javascript">// <![CDATA[
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"]) &#038;&#038; f["field_email"].value.replace(/^[ ]+/, '').replace(/[ ]+$/, '').length < 1 || (SR_focus = f["field_name_first"]) &#038;&#038; 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;" action="http://smartresponder.ru/subscribe.html" method="post" name="SR_form" onsubmit="return SR_submit(this)" target="_blank"><input type="hidden" name="version" value="1" /><input type="hidden" name="tid" value="0" /><input type="hidden" name="uid" value="139778" /><input type="hidden" name="lang" value="ru" />
<table style="margin: 0 auto;" width="240">
<tbody>
<tr>
<td style="padding: 5px;" align="center">
<table cellspacing="1" cellpadding="2" align="center">
<tbody>
<tr>
<td><input type="hidden" name="did[]" value="149165" /></td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt; color: #595959; font-weight: bold;" align="center">Ваш e-mail: <span style="color: #ff0000;"><strong>*</strong></span></td>
</tr>
<tr>
<td align="center"><input style="font-family: Verdana; font-size: 14pt; padding: 2px; margin: 7px; border: 1px solid #BBBBBB; color: #000000;" type="text" name="field_email" value="" size="20" /></td>
</tr>
<tr>
<td style="font-family: Verdana; font-size: 10pt; color: #595959; font-weight: bold;" align="center">Ваше имя: <span style="color: #ff0000;"><strong>*</strong></span></td>
</tr>
<tr>
<td align="center"><input style="font-family: Verdana; font-size: 14pt; padding: 2px; margin: 7px; border: 1px solid #BBBBBB; color: #000000;" type="text" name="field_name_first" value="" size="20" /></td>
</tr>
<tr>
<td align="center"><input id="smart_submit" style="font-family: Verdana; font-size: 14pt; margin: 3px;" type="submit" name="SR_submitButton" value="Подписаться!" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form><!-- SmartResponder.ru subscribe form code (end) -->

Этот код мы будем мучить! А если быть точнее, ту его часть, которая находиться в теге <form>

Объясню подробнее:

В начале и в конце кода нашей еще пока не очень красивой формы подписки расположено по тегу комментариев, то есть это такие специальные теги, в которых пользователь (вебмастер) может написать текст, который будет напоминать ему какую, например, роль этот код выполняет. Где его начало или конец, для чего служит этот код, можно пометить этими тегами части кода и т.д. Все что угодно! Вы можете написать в таком теге даже дату, когда вы вставили этот код в тело кода вашего шаблона (сайта). Например: <!-- 1.01.2013 / 14:00 / Ну, на хрена я так нажрался! -->

Любой текст заключенный в такой тег не будет виден посетителю вашего сайта при его просмотре! Но если вы напишите текст без такого тега, то этот текст обязательно где-нибудь вылезет и будет виден всем посетителям вашего сайта!

В коде нашей формы подписки, в самом начале вы увидите такой тег комментарий <!-- SmartResponder.ru subscribe form code (begin) --> и в конце кода будет расположен такой тег <!-- SmartResponder.ru subscribe form code (end) --> — Они означают «Начало» и «Конец» кода формы подписки. Если вы отлично ориентируетесь в коде файлов шаблона вашего сайта и с легкостью вникаете в то, что там за что отвечает, то и без этих комментариев вы разберетесь что это именно код формы подписки, поэтому вы можете смело его удалить!

Теперь идем дальше! Первым элементом нашего кода формы подписки, после тега <!-- SmartResponder.ru subscribe form code (begin) --> идет скрипт (javascript). Этот скрипт несет огромную пользу для нас и контролирует, например, правильно ли подписчик ввел данные в форму подписки, или например ввел ли он их вообще. Подскажет об ошибочно введенном e-mail адресе подписчика, если он введен им не корректно, к примеру без соб@чки!

Если удалить этот скрипт, то на внешний вид формы подписки это не коим образом не отразиться, вы также сможете ввести данные в поля формы и нажать кнопку «Отправить», даже если вы в поле e-mail адреса введете каракули, все равно вы будете перемещены на страницу сервиса Смартреспондера и будете идентифицированы им. Если данные будут введены верно, то подписка произойдет нормальным, обычным порядком. Но если ваш подписчик не верно укажет e-mail адрес, например забудет прописать соб@чку или точку где-нибудь, или вовсе забудет ввести имя или e-mail. В этом случае его уже ни что не сможет предупредить об ошибке ввода и подписчик будет перемещен на страницу сервиса Смартреспондера и там сможет ввести данные верно! Такая вот очень простая и полезная конструкция! Но это так, к сведению.

Переходим к следующей, самой важной части кода формы подписки, а именно к самой форме.

Вся остальная часть кода заключена в тег <form> :) </form>. В нем то и находятся все параметры, которые отвечают за внешний вид, а также идентификатор вашей рассылки и канала (код канала). Если такой вами создан и выбран в процессе генерации формы подписки.! Вот так!

Продвинутые пользователи давно уже научились менять эти параметры по своему вкусу, не прибегая к генератору форм подписки на сервисе Смарта, теперь этому научитесь и вы!

А теперь основная часть статьи!

Как сделать красивые формы подписки для сайта

Итак, берем код простой стандартной формы подписки от сервиса Smartresponder.ru:

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

Беру первый код, который отвечает за вывод надписи «Ваш e-mail: *»

Ваш e-mail: <span style="color: #ff0000;"><strong>*</strong></span>

В этом коде вы можете изменить расположение этой надписи, сделать так что бы она отображалась слева, справа или по центру как это указано сейчас. Для этого вам необходимо изменит атрибут элемента align="left, center, right". Можете изменить шрифт, это здесь, в элементе style="font-family: Verdana;", размер шрифта, тоже в этом же элементе.

Следующий код, отвечает за вывод текстового поля для ввода адреса почты:

<input style="font-family: Verdana; font-size: 14pt; padding: 2px; margin: 7px; border: 1px solid #BBBBBB; color: #000000;" type="text" name="field_email" value="" size="20" />

Здесь будет значительно красивее, если в элемент style добавить border: 1px solid #BBB; это создаст рамку вокруг поля. Можете изменить цвет или размер рамки!

Третий код, отвечает за вывод надписи «Ваше имя: *»

Ваше имя: <span style="color: #ff0000;"><strong>*</strong></span>

Эту надпись можно отредактировать также как и в первом случае.

Сново код , который ввыводит текстовое поле:

<input style="font-family: Verdana; font-size: 14pt; padding: 2px; margin: 7px; border: 1px solid #BBBBBB; color: #000000;" type="text" name="field_name_first" value="" size="20" />

Можете изменить это поле как и во втором случае.

Наконец добрались до кнопки формы:

<input id="smart_submit" style="font-family: Verdana; font-size: 14pt; margin: 3px;" type="submit" name="SR_submitButton" value="Подписаться!" />

Кнопка выглядит так потому что у нее есть свой собственный стиль. В теге input вы можете увидеть этот стиль: id="название_идентификатора_стиля" Стиль в файле style.css и имеет он следующие значения:

#название_идентификатора_стиля {

width: 162px;

height: 42px;

padding: 0 10px;

margin-left: 5px;

border: 1px solid #fffffd;

border-radius: none;

box-shadow: 0 0 5px #999997;

background-color: #fbfbfb;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ededed);

background-image: -moz-linear-gradient(top,white 0,#EDEDED 100%);

background-image: -ms-linear-gradient(top,white 0,#EDEDED 100%);

background-image: -o-linear-gradient(top,white 0,#EDEDED 100%);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#EDEDED));

background-image: -webkit-linear-gradient(top,white 0,#EDEDED 100%);

background-image: linear-gradient(to bottom,white 0,#EDEDED 100%);

cursor: pointer;

color: #545454;

}

#название_идентификатора_стиля:hover { border: 1px solid #999997; }

Можете скопировать и добавить себе такой же стиль, в файл style.css, только обязательно назовите его! И пропишите в тег input> кода кнопки, вашей формы подписки. Любую кнопку можно здесь создать! Нужна графика и несколько приемов.

Например вот еще кнопка с графикой, то есть два изображения. При наведении курсора на кнопку, одно изображение сменяется другим:

Вот код такой кнопочки (стиль, который нужно добавить в style.css):

#название_идентификатора_стиля {

background: url("images/smrtbut03.png") no-repeat scroll left top transparent;

border: medium none;

cursor: pointer;

height: 47px;

margin-left: 18px;

width: 305px;

}

#название_идентификатора_стиля:hover {

background: url("images/smrtbut04.png") no-repeat scroll left top transparent;

}

В коде формы подписки, в теге input тоже не забудьте указать этот стиль, так: id="название_идентификатора_стиля"

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

Берем код нашей формы подписки и перед ним прописываем тег div, вот так:

<div id="название_идентификатора_стиля"></div>
КОД ФОРМЫ ПОДПИСКИ

Теперь открываем файл стилей нашего шаблона style.css и в самом низу добавляем туда этот код:

#Название_идентификатора_стиля { background: url(pic/bottom-arrow.png) no-repeat top center; height: 100px; }

Объясняю, название идентификатора у вас должно быть своим, например так <div id="pic-009"> в теге div и так #pic-009 {} в файле style.css. Правильно указывайте путь к вашему изображению. Элемент center отвечает за выравнивание картинки по центру, можете ввести left или right. Не забудьте изменить высоту в элементе height.

Можете вывести картинку с помощью тега img, но это немного по делитантски, я объяснил вам как лучше.

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

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

Как создать форму подписки на фоне изображения, картинки

Берем код нашей формы подписки и заключаем его в тег DIV вот так:

<div id="название_идентификатора_стиля">КОД ФОРМЫ ПОДПИСКИ</div>

Видите разницу, до этого тег div находился над кодом формы подписки, а сейчас весь код формы подписки заключен между тегами div (первый открывающий, а в конце закрывающий).

Теперь добавляем в файл стилей style.css такой код:

#Название_идентификатора_стиля { background: url(pic/bottom-arrow.png) no-repeat top center; height: 100px; }

Точно также как и в предыдущем случае, указывайте все верно!

Где узнать номер своей рассылки smartpesponder (id рассылки и id канала)

Давайте покажу вам где в коде формы подписки находятся id вашей рассылки и id канала.

Что бы узнать ваш id рассылки необходимо зайти в ваш список рассылок и там будет указан ваш did:

Узнать id канала вы можете в «статистика» — «каналы для форм подписки»:

Друзья суть этого поста не в том что бы за вас сделать супер красивые формы подписки, например 100 штук и раздать вам код и показать как их у себя настроить, а в том что бы вы научились делать свои формы подписки другими, не такими как у всех! Я старался объяснить так что бы вы поняли как это нужно делать!

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

Друзья, я стараюсь писать для вас интересно и подробно, ну и поэтому получается такой большой текст! Под ключевые запросы я его практически не затачивал, потому что пишу о том что думаю, сразу из головы, а не думаю как написать что бы вставить ключ! Сейчас уже начинаю подумывать о значительном расширении области контента моего любимого блога! Кстати, что вы скажете на этот счет? Нужно расширять? Или оставить пока так!

В следующей статье я расскажу о новом генераторе форм от сервиса Smartresponder.ru и постараюсь вам дать больше уже готовых вариантов. А также показать еще какие-нибудь хитрости с внешним видом форм подписок. Подписывайтесь на обновления!

На этом я заканчиваю и надеюсь что вы все таки почерпнете что нибудь полезное для себя из этого материала! Удачи, Пока!

С уважением, Борисов Рустам.

Подпишись на обновления!
  1. Рустам Борисов

    Уехал в Мурманск! Приеду, отвечу на любые ваши вопросы ;-)

  2. razbirishka

    Большое спасибо за урок. Как раз вовремя. [good]

    • Рустам Борисов

      Большое, пожалуйста!

  3. Александр

    Ну и не совсем она красивая и получилась)) Уж извините Рустам)

    • Рустам Борисов

      Какая? )) да это не пример [:))] извиняться то не за что ;-)

  4. razbirishka

    Рустам, а как сделать такую, чтобы картинки вставлялись над каждой гафой формы? [:-|]

    • Рустам Борисов

      http://deffekt.ru/wp-content/themes/deffekt/images/2012-img.png

      Откройте изображение, попробуйте разобраться!

      Сегодня WordPress обновился и у меня из консоли на комментарии не ответить. Косяк какой-то движка. Позже напишу об этом подробно! ;-)

  5. Надежда

    Отлично. Спасибо,Рустам. Я подписалась на рассылку. Форма на сайте интересная и вписывается в дизайн. Если задаться целью,то по этому уроку можно сделать форму, под дизайн любого сайта.

    • Рустам Борисов

      Да, еще постараюсь позже по подробнее все объяснить, а то многие все равно не поняли! Плюс нужно примеры какие-то показать. Сделаю [:-|]

  6. Альбина

    Рустам, подписалась на ваш блог.
    Мне нужна длинная форма подписки , горизонтальная, как у вас в статье. Чтобы вставить в конце каждой записи. В смарте можно сделать такую? [:-))]

    • Рустам Борисов

      Привет, спасибо, нет в смарте не сделать! Нужно немного код изменить! Напишите мне на почту, я помогу. ;-)

  7. Seoexam

    Думаю мне еще рано пользоваться этим сервисом. Да и денег нет платить за него.

    • Рустам Борисов

      Привет! Зачем платить, до 1000 подписчиков бесплатно, затем подписной лист будет сам за себя платить. Ни в коем случае не рано, наоборот нужно начинать вести рассылку прямо сейчас и не тянуть с этим не минуты!

  8. Галина

    Cпасибо за проделанную работу. К сожалению, моя рассылка на другом сервисе, так что у меня не получилась красивая форма. [:-|]

  9. Вячеслав

    пригодилось!

    • Рустам Борисов

      На здоровье! Хороший у тебя сайт, я в Joomla тоже кое что понимаю! )

  10. Татьяна

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

    • Рустам Борисов

      Татьяна, привет! Сделать картинку фоном того блока, в котором будет размещена форма подписки! Добавляйтесь вконтакте помогу разобраться! ;-)

  11. Евгений

    Спасибо за хорошую внятную статью!!

    • Рустам Борисов

      Евгений, спасибо за отзыв! :)

  12. zmoe

    Спасибо за полезный материал, все у меня есть на сайте, а вот нормальной формы подписки нет. Буду делать завтра [good]

  13. ZGD

    А как вставить в эту форму собственную кнопку «подписаться»? Не ту, что ставиться по умолчанию, а свою собственную?

  14. Роман

    Еле разобрался в этих кодах, спасибо. [good]

  15. Екатерина

    Большое спасибо за код и объяснение, а то ещё только начинающая, если, что буду ещё обращатьтся, хорошо? ;-)

    • Рустам Борисов

      Пожалуйста, хорошо!

Оставить свой комментарий
:) :-D ;-) :-| [star] [good] [flower] [present] [:-))] [:))] [:--_)] [:-|]

Subscribe without commenting