Делаем свою уникальную форму подписки на Smartresponder

Категории: Другое

UP 2017. Сервис Smartresponder больше не существует 🙁

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

smartresponder

Что касается блогов на движке WordPress, то здесь возможности по созданию и ведению рассылки огромные. Кстати, вести рассылку на мыло выгодно не только для информационных блогов, типа моего, но и в особенности для сайтов интернет-магазинов, все зависит от креативности подхода.

Так вот, фреймворк WordPress в качестве основы для рассылок – непаханое поле, но здесь есть некоторые ограничения. Если блог/сайт имеет пару сотен посетителей, то и подписчиков, соответственно, немного, что логично. И любой из плагинов, на основе которых WordPress предлагает создать свою рассылку, будет работать надежно и беспроблемно.

Но как только блог обзаведется своей собственной базой подписчиков, станет более-менее популярным (имеется в виду – возрастет количество посетителей), то плагину рассылок (которые во множественном числе предлагает WordPress) придется создавать тысячи запросов к базе данных, нагружать сервер, тратить процессорные мощности – в общем, всяческим образом тормозить ресурс.

Такого «счастья» не нужно никому, и возникает проблема – как решить вопрос с рассылками на стороннем сервере? Декстопный вариант я тоже не рассматриваю, потому что постоянно «грузить» свой компьютер – это тоже не лучший вариант. Но желательно сделать так, чтобы всю нагрузку по почтовым рассылкам принимал на себя сторонний сервер, но при этом чтобы отправной точкой рассылки все же оставался наш сайт.

Решение есть и оно довольно простое – интернет просто кишит всякого рода сервисами рассылок, наперебой предлагающими свои услуги, но лидирующее место принадлежит Smartresponder. Вот им я и предлагаю воспользоваться, на сегодняшний день этот сервис самый крутой среди себе подобных. А ниже я немного познакомлю вас с этим сервисом, и расскажу как им пользоваться.

Знакомимся с рассылкой на Smartresponder

Smartresponder – сервис весьма известный и очень функциональный, но если им не управлять должным образом, то он можно сказать в какой-то степени навязчивый. Что я имею в виду? Многие пользователи интернет подписываются на интересующие их новости, не глядя на то, что им предлагают, так сказать, в «довесок». А таким довеском могут быть совершенно ненужные вам рассылки. Но это — дело внимательности каждого подписчика. Наше же с вами дело – извлечь из рассылки Smartresponder максимальную пользу с минимальным вредом для себя, своих посетителей и подписчиков.

smartresponder

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

smartresponder

Как видите, в смысле предложений дизайна все довольно грустно – не для всякого сайта подойдет такое оформление, да и как я уже говорил, присутствует много ненужного в коде рассылки, например:

1. Первое – никому не нужно еще одно подключение <script type="text/javascript"> — оно лишнее.

2. Много всевозможных дублирующих соединений, которые уже провел ваш WordPress. Например, определение кодировки.

3. Всякие формы в форме, div-ы и прочие элементы css, которые можно значительно сократить.

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

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

Для создания своей формы рассылки на базе Smartresponder нужно одно – получить и узнать свой ID в этом сервисе, чтобы, используя его в своей форме, привлекать подписчиков на блог/сайт. А для этого сначала регистрируемся:

smartresponder

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

Создание своей рассылки и формы отправки

Собственно, форма отправки письма нам не нужна, если мы собрались ваять собственную – нам нужен только идентификатор, ради которого вся эта суета и затевалась. Поэтому продолжаем тем, что начинаем создавать новую рассылку с целью выудить из нее наш ID. Для этого в предлагаемой форме снова заполняем все, что нам предлагают заполнить (нужные поля отмечены звездочкой). Здесь, в принципе, название и описание рассылки не критично – эта информация предназначена только для нас. Остальное определяет периодичность выпуска рассылок, нашу подпись в письмах и наш почтовый адрес.

smartresponder

Теперь жмем «Создать новую рассылку», и ура! Мы стали счастливым обладателем новенькой, блестящей, набитой до отказа подписчиками рассылки на нашем блоге! Осталось дело за малым – выудить свой идентификатор из вновь созданной рассылки и начать создание своего собственного шедевра формы рассылки на его основе. Подведем промежуточные итоги – для чего все же нам нужен этот ID, если кто-то не понял?

1. Мы избавляемся от лишнего плагина рассылок, если он был, или предотвращаем его расходную и поэтому ненужную установку. А это – прямая экономия энергоресурсов нашего сайта

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

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

4. Минимизируем и оптимизируем html и css коды, что тоже есть хорошо.

А номер нашего идентификатора мы увидим здесь:

smartresponder

Это в меню «Рассылки» — «Списки рассылок». Теперь можно приступать к главному процессу. Собственно, я предложу пару форм, в которых будет работать все тот же идентификатор Smartresponder, но с возможностью их полной перестройки под ваши нужды. То есть, можно самостоятельно изменить внешний вид рассылки до неузнаваемости.

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

Итак, форма № 1. Вот ее код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[php]
<h3>Подпишись на новости блога:</h3>
<forma onsubmit="return SR_submit(this)" method="post" action="http://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_2_61">  
<input type="hidden" value="1" name="version"/>
<input type="hidden" value="0" name="tid"/>
<input type="hidden" value="" name="uid"/>
<input type="hidden" value="ru" name="lang"/>
<input type="hidden" value="000000" name="did[668397]"/>
<div id="optin">
    <input type="text" tabindex="900" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Ваше Имя" class="name" name="field_name_first"/>
    <input type="text" tabindex="901" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Ваш E-Mail" class="email" name="field_email"/>
    <input type="submit" value="Хочу получать новости!" name="SR_submitButton"/>
</div>   
</forma> 
[/php]

Как видим, ничего лишнего по сравнению с сотнями строк в смартреспондере. Стили мы зададим тоже свои:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[php]
form{width: 300px; border: 1px solid rgb(200, 200, 200);
 margin-left: ; border-radius: 0px;}
#optin {padding:10px 25px;
    text-align: center;
    background-color: #f9f9f9;
    width: 250px;
}
#optin input[type="text"] {
    border: 1px solid #CCCCCC;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 8px 10px;
    width: 90%;}
#optin input[type="submit"], #optin_post input[type="submit"] {
    background-color: #1C5D28;
    background-repeat: repeat-x;
    border: 1px solid #137725;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 15px;
    text-shadow: -1px -1px #1C5D28;
}
[/php]

А вот как она выглядит:

smartresponder

Здесь я специально показал самую простую форму рассылки, чтобы не забивать страницу лишним css кодом. Но для знающих людей здесь все должно быть понятно: можно менять все – размеры, цвет, добавлять необходимые поля, устанавливать тени и градиенты. Все в ваших руках. Самое главное – минимум кода и максимум эффективности. А для того, чтобы ваша рассылка работала по той схеме, которую вы определили в настройках Smartresponder, вам нужно сделать одно-единственное телодвижение – в строке <input type="hidden" value="000000" name="did[668397]"> кода прописать номер своего идентификатора вместо моего ID 668397. Теперь рассылка будет работать согласно установленного вами же графика.

А вот еще один пример формы № 2 – на базе рассылки от Feedburner, который уже понемногу начинает помирать. То есть, я просто взял ее внешний вид, а код оставил практически прежний, за небольшим исключением:

smartresponder

Здесь я тоже оформил все в минималистичном стиле, но при желании можно все это переделать на свой лад. Вот код самой формы рассылки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[php]
<div id="donate"><strong>Введите свой электронный адрес и получите книгу в подарок:  
<forma onsubmit="return SR_submit(this)" method="post" action="http://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_2_61">  
<input type="hidden" value="1" name="version"/>
<input type="hidden" value="0" name="tid"/>
<input type="hidden" value="" name="uid"/>
<input type="hidden" value="ru" name="lang"/>
<input type="hidden" value="000000" name="did[668397]"/>
<div id="optin">
    <input type="text" tabindex="901" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Ваш E-Mail" class="email" name="field_email"/>
    <input type="submit" value="Подписаться по e-mail на последние новости сайта" name="SR_submitButton"/>
</div>   
</forma>
 </strong></div>   
 [/php]

А вот оформление ее стилей:

1
2
3
4
5
6
7
[php]
#donate {width: 928px}
#donate .donate_link {width: 940px}
#donate .donate_link a img,#donate_full .donate_link img {margin: 0 5px 10px 0}
-webkit-border-radius: 5px;
border: 1px solid #c7c7c8;
[/php]

Как и в первом случае, я не стал делать много наворотов – просто показал, что форму можно изменять, как вам захочется. Форму можно вставить в сайдбар (sidebar.php) или в одиночную запись (single.php) – все зависит от вашего желания. Чтобы эта форма заработала, не нужно устанавливать никаких дополнительных плагинов типа EXEC PHP – все будет функционировать сразу и без ошибок. CSS код желательно интегрировать в свой файл css блога, чтобы не создавать лишних перенаправлений.

Собственно, в примерах так и сделано – формам присвоены свои классы (forma и donate), а в css прописаны их значения. Из этих кодов форм видно, что настроить их не представляет особой сложности, а плюсы использования собственной формы подписки сервиса Smartresponder очевидны – их я перечислил выше.



  • Большое спасибо! Давно искал такую инструкцию, применю универсальный второй способ

Подпишитесь на рассылку блога
max1net.com: