Создаем форму подписки, как у известных брендов. Как привлечь и удержать подписчиков
, ). Часто читатели наших постов на Хабре воспринимают почтовые рассылки исключительно в разрезе нежелательного спама, то есть сообщений, которые пользователи получают, даже не подписавшись на это.
На самом же деле настоящая email-рассылка всегда создается для подписчиков , то есть людей, которые явно продемонстрировали заинтересованность в определенном контенте. И сегодня мы поговорим о том, как следует создавать онлайн-формы, с помощью которых люди подписываются на рассылку, полностью отдавая себе отчет в том, зачем они это делают.
При подготовке статьи использовались материалы Litmus и MailCharts.
Как не надо: ошибки при создании форм Прежде всего, разберем распространенные ошибки, которые компании допускают при создании форм для подписки на свои почтовые рассылки.Пользователь должен понимать, что сделал Не всегда компании уделяют большое внимание тому, что происходит сразу после того, как пользователь вбил свой почтовый адрес в соответствующее поле. Между тем, нужно дать человеку понять, что он только что сделал (подписался на рассылку). Сообщение с подтверждением должно быть понятным и не содержать ошибок верстки, как на примере ниже:Можно выйти из ситуации лучше - обновить саму форму и рассказать пользователю, что он подписался на рассылку. Более того, для его полного счастья можно также определить, каким почтовым сервисом он пользуется (Gmail. Mail.ru, почтой «Яндекса» и т.п.) и предложить ему открыть именно эту программу. На картинке ниже форма предложила перейти в Gmail:
Еще один пункт, который напрямую не относится к формам, но который нельзя не упомянуть.
Отписаться должно быть легко Каждый пользователь интернета сталкивался с ситуацией, при которой отписаться от почтовой рассылки довольно сложно. Причина не всегда в злой воле компании, создавшей ее, иногда речь о простой безалаберности. Бизнес может использовать разные почтовые программы и email-провайдеров для организации, скажем, автоматической рассылки о создании аккаунта и дайджеста с публикациями блога.Нужно каждый раз проверять, что процесс отписки от каждой из отправляемых рассылок является простым и интуитивно понятным. В противном случае пользователь будет иметь полное моральное право отметить письма, от которых непонятно как отписаться, в качестве спама.
Что нужно делать После разбора ошибок, логично рассмотреть то, как нужно действовать при создании формы для подписки на почтовую рассылку.Ну нужно бояться дополнительных полей В вебе принято стараться всеми силами снижать количество полей в формах - никто не любит их заполнять, а наличие большого количества обязательных полей напрягает пользователей. Однако в сфере email все немного отличается от принятых в вебе стандартов.Правда жизни заключается в том, что подписчики почтовой рассылки обладают определенными ожиданиями от поступающего к ним контента. И если эти ожидания не оправдаются, то как минимум четверть всех подписчиков отпишутся от рассылки.
Соответственно, чтобы отправлять людям подходящий контент, в некоторых случаях лучше все же задать пару вопросов об их интересах, даже если это и выльется в одно-два дополнительных поля в форме.
Иногда люди подписываются в погоне за «халявой» Бывают и ситуации, когда маркетологи привлекают подписчиков с помощью каких-либо скидок и предложений. Многие интернет-пользователи любят получать что-то осязаемое. Поэтому, если компания, к примеру, предложит будущему подписчику футболку, такая связь офлайна и онлайна обычно хорошо работает.
Кроме того, мало кто любит быть первопроходцем. Люди любят оказываться в хорошей компании, так что если в форме сразу будет представлена информация о количестве подписчиков рассылки. Данная форма социального доказательства очень хорошо работает. Ее используют как зарубежные компании, так и отечественные проекты. Ниже скриншот формы с сайта «Нетологии»:
Поэтому стоит делать форму ненавязчивой, но располагать ее в правильном месте. В качестве примера можно привести форму для сбора email-адресов проекта Unbounce - она расположена в верхней части страницы с блогом компании и жестко закреплена там, не перемещаясь при скролле.
На сегодня все, спасибо за внимание!
Приветствую вас уважаемые друзья, коллеги! Сегодня я научу вас тому, как сделать красивую форму подписки для своего сайта.
Не просто одну, форму подписки, а как делать разные формы подписки, очень красивые, с высокой конверсией, привлекающие внимание, приятные для глаз наших уважаемых посетителей…
С такими формами мы будем значительно выделяться из общей массы всей интернет толпы! Расскажу вам, в чем разница между обычными (стандартными) формами и формами, которые вы создадите после изучения моей статьи.
Среди вас наверняка есть те, у кого нет вообще формы подписки на сайте, не то что бы красивой, а вообще ни какой! И это очень печально, сейчас эпоха подписных баз, нужно обязательно иметь свою подписную базу (рассылку) и не просто что бы она была, а ее нужно постоянно увеличивать. В разы! Наличие подписной базы сейчас решает многое, это и есть ваш актив, то, что будет постоянно класть денюшку к вам в карман.
Формы подписки обязательно должны находиться на нашем сайте, в разных местах, на разных страницах. Расположение их должно зависеть от их видимости, доступности. Красивая и удобная форма подписки на вашу рассылку должна находиться на самом виду для посетителя! Не в коем случае не одна и не на одной, отдельной странице вашего блога. Чем проще подписаться, тем больше будет конверсия!
Как создать форму подписки (для новичков!)Статья будет большая, поэтому запаситесь терпением и интересом, вы многому научитесь!
На протяжении всей статьи мы будем работать только с одним сервисом e-mail рассылок – Smartresponder.ru
После того как вы создали свою собственную рассылку я покажу вам как создать для нее стандартную форму подписки для сайта.
Но сначала создадим канал для нашей будущей формы подписки, потом вы поймете зачем он нужен, я объясню!
Переходим на вкладку «Статистика» — «Каналы для форм подписки»
Название канала :
Здесь вы можете прописать название вашего канала в соответствии с тем, где будет использоваться форма подписки, зачем, почему и т.д. Все что захотите, пишите как вам угодно, суть в том, что бы вам было легче разобраться, где находиться та или иная форма подписки на вашем сайте или сайтах, или страницах курсов, книг и тому подобного! Просто сделайте так, потом все станет ясно…
Код канала :
Максимум 16 символов, только буквы латинского алфавита и цифры. Не придумывайте ничего секретного, это просто код канала, 4 символа вполне достаточно!
Нажимаем кнопку «Создать ». Отлично!
Теперь переходим на вкладку «ФОРМЫ » и выбираем пункт «Генератор форм подписки»
Попадаем на страницу генерации формы подписки
Данная страница разделена на три области (три блока), в первой непосредственно находиться генератор, во второй области, которая называется «Внешний вид формы» мы будем просматривать результат того что мы делаем, видеть форму. И в третьем, нижнем блоке будет находиться код нашей с вами вновь созданной формы подписки, который необходимо вставить в код шаблона нашего сайта!
Вот полный скриншот страницы генератора форм, нажмите на него, и он откроется на другой странице!
1. Здесь вы просто даете название форме подписки (как шаблону), например в зависимости от того внешнего вида, которые вы хотите для нее создать.
Приступаем к настройке формы подписки !
2. Выбираем рассылку, для которой непосредственно будет создана нами форма подписки для посетителя. В этом списке будут показаны все ваши рассылки, если у вас она одна, значит будет показана только одна. Выбираем ее и вперед!
3. Мы сразу создали канал, мы молодцы, хотя на первое время можно прекрасно обойтись без него, но я объясню вам, зачем это нужно.
Канал подписки необходим для того что бы отслеживать эффективность той или иной форм подписки. Все очень просто, у вас может быть две или три формы подписки для одной рассылки, расположенные в разных местах интернета, в том числе и на других ваших сайтах, но, повторюсь, все они будут собирать вам подписчиков в одну рассылку. Здесь то нам и пригодится использование разных каналов, то есть вы задаете всем формам подписок разные каналы и контролируете теперь, сколько подписчиков идет через ту или другую форму подписки. То есть один и тот же код созданной вами формы подписки, но с разными каналами в этом коде.
Итак, здесь нужно выбрать название канала, он у нас создан, выбираем и идем дальше.
4. Выбор полей формы
Не знаю для каких целей вам может понадобиться дополнительная информация о подписчике, например его пол, год рождения, но их мы добавлять в форму подписки не станем! Наша задача, предоставить подписчику простую форму подписки , всего лишь два поля (имя и e-mail).
Эти поля выбраны уже по умолчанию, поэтому идем дальше.
5. Здесь практически все относится ко внешнему виду формы подписки.
Если у вас будет несколько рассылок, то можно выбрать несколько и тогда они будут предоставлены на выбор подписчику в форме подписки .
Ну вот и все, стандартная форма подписки у нас готова!
В области «Внешний вид» мы видим все что создали.
На выходе, после того как мы создали форму подписки с помощью генератора мы получаем такой код:
//
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_]*@(+(*+)*\.)++$/)) { alert("Некорректный синтаксис email-адреса!"); f["field_email"].focus(); return false; } return true; }
// ]]>
|
Этот код мы будем мучить! А если быть точнее, ту его часть, которая находиться в теге
Объясню подробнее:
В начале и в конце кода нашей еще пока не очень красивой формы подписки расположено по тегу комментариев, то есть это такие специальные теги, в которых пользователь (вебмастер) может написать текст, который будет напоминать ему какую, например, роль этот код выполняет. Где его начало или конец, для чего служит этот код, можно пометить этими тегами части кода и т.д. Все что угодно! Вы можете написать в таком теге даже дату, когда вы вставили этот код в тело кода вашего шаблона (сайта). Например:
Любой текст заключенный в такой тег не будет виден посетителю вашего сайта при его просмотре! Но если вы напишите текст без такого тега, то этот текст обязательно где-нибудь вылезет и будет виден всем посетителям вашего сайта!
В коде нашей формы подписки , в самом начале вы увидите такой тег комментарий и в конце кода будет расположен такой тег — Они означают «Начало» и «Конец» кода формы подписки. Если вы отлично ориентируетесь в коде файлов шаблона вашего сайта и с легкостью вникаете в то, что там за что отвечает, то и без этих комментариев вы разберетесь что это именно код формы подписки, поэтому вы можете смело его удалить!
Теперь идем дальше! Первым элементом нашего кода формы подписки, после тега идет скрипт (javascript). Этот скрипт несет огромную пользу для нас и контролирует, например, правильно ли подписчик ввел данные в форму подписки, или например ввел ли он их вообще. Подскажет об ошибочно введенном e-mail адресе подписчика, если он введен им не корректно, к примеру без соб@чки!
Если удалить этот скрипт, то на внешний вид формы подписки это не коим образом не отразиться, вы также сможете ввести данные в поля формы и нажать кнопку «Отправить», даже если вы в поле e-mail адреса введете каракули, все равно вы будете перемещены на страницу сервиса Смартреспондера и будете идентифицированы им. Если данные будут введены верно, то подписка произойдет нормальным, обычным порядком. Но если ваш подписчик не верно укажет e-mail адрес, например забудет прописать соб@чку или точку где-нибудь, или вовсе забудет ввести имя или e-mail. В этом случае его уже ни что не сможет предупредить об ошибке ввода и подписчик будет перемещен на страницу сервиса Смартреспондера и там сможет ввести данные верно! Такая вот очень простая и полезная конструкция! Но это так, к сведению.
Переходим к следующей, самой важной части кода формы подписки , а именно к самой форме.
Вся остальная часть кода заключена в тег . В нем то и находятся все параметры, которые отвечают за внешний вид, а также идентификатор вашей рассылки и канала (код канала). Если такой вами создан и выбран в процессе генерации формы подписки.! Вот так!
Продвинутые пользователи давно уже научились менять эти параметры по своему вкусу, не прибегая к генератору форм подписки на сервисе Смарта, теперь этому научитесь и вы!
А теперь основная часть статьи!
Как сделать красивые формы подписки для сайтаИтак, берем код простой стандартной формы подписки от сервиса Smartresponder.ru:
Беру первый код, который отвечает за вывод надписи «Ваш e-mail: *»
Ваш e-mail: *
В этом коде вы можете изменить расположение этой надписи, сделать так что бы она отображалась слева, справа или по центру как это указано сейчас. Для этого вам необходимо изменит атрибут элемента align="left, center, right" . Можете изменить шрифт, это здесь, в элементе style="font-family: Verdana;" , размер шрифта, тоже в этом же элементе.
Следующий код, отвечает за вывод текстового поля для ввода адреса почты:
Здесь будет значительно красивее, если в элемент style добавить border: 1px solid #BBB; это создаст рамку вокруг поля. Можете изменить цвет или размер рамки!
Третий код, отвечает за вывод надписи «Ваше имя: *»
Ваше имя: *
Эту надпись можно отредактировать также как и в первом случае.
Сново код, который ввыводит текстовое поле:
Можете изменить это поле как и во втором случае.
Наконец добрались до кнопки формы:
Кнопка выглядит так потому что у нее есть свой собственный стиль. В теге input вы можете увидеть этот стиль: id="название_идентификатора_стиля" Стиль в файле style.css и имеет он следующие значения:
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;
Margin-left: 18px;
#название_идентификатора_стиля:hover {
Background: url("images/smrtbut04.png") no-repeat scroll left top transparent;
В коде формы подписки, в теге input тоже не забудьте указать этот стиль, так: id="название_идентификатора_стиля"
Берем код нашей формы подписки и перед ним прописываем тег div, вот так:
КОД ФОРМЫ ПОДПИСКИ
Теперь открываем файл стилей нашего шаблона style.css и в самом низу добавляем туда этот код:
Объясняю, название идентификатора у вас должно быть своим, например так в теге div и так #pic-009 {} в файле style.css . Правильно указывайте путь к вашему изображению. Элемент center отвечает за выравнивание картинки по центру, можете ввести left или right . Не забудьте изменить высоту в элементе height .
Можете вывести картинку с помощью тега img , но это немного по делитантски, я объяснил вам как лучше.
Таким простым способом вы можете разместить над формой подписки обложку книги или курса, вашу фотографию и т.д.
Как создать форму подписки на фоне изображения, картинкиБерем код нашей формы подписки и заключаем его в тег DIV вот так:
КОД ФОРМЫ ПОДПИСКИ
Видите разницу, до этого тег div находился над кодом формы подписки, а сейчас весь код формы подписки заключен между тегами div (первый открывающий, а в конце закрывающий).
Теперь добавляем в файл стилей style.css такой код:
#Название_идентификатора_стиля { background: url(pic/bottom-arrow.png) no-repeat top center; height: 100px; }
Точно также как и в предыдущем случае, указывайте все верно!
Где узнать номер своей рассылки smartpesponder (id рассылки и id канала)Давайте покажу вам где в коде формы подписки находятся id вашей рассылки и id канала.
Узнать id канала вы можете в «статистика» — «каналы для форм подписки»:
Друзья суть этого поста не в том что бы за вас сделать супер красивые формы подписки , например 100 штук и раздать вам код и показать как их у себя настроить, а в том что бы вы научились делать свои формы подписки другими, не такими как у всех! Я старался объяснить так что бы вы поняли как это нужно делать!
Графики море, недорогой, ее можно легко использовать в ваших формах подписки. Кнопки, фон, все это легко туда присобачить! Можно попробовать сделать это несколько раз и все станет ясно, чем постоянно покупать комплекты дорогой графики и еще и идти на фриланс для того что бы вам их сверстали!
Друзья, я стараюсь писать для вас интересно и подробно, ну и поэтому получается такой большой текст! Под ключевые запросы я его практически не затачивал, потому что пишу о том что думаю, сразу из головы, а не думаю как написать что бы вставить ключ! Сейчас уже начинаю подумывать о значительном расширении области контента моего любимого блога! Кстати, что вы скажете на этот счет? Нужно расширять? Или оставить пока так!
В следующей статье я расскажу о новом генераторе форм от сервиса Smartresponder.ru и постараюсь вам дать больше уже готовых вариантов. А также показать еще какие-нибудь хитрости с внешним видом форм подписок. Подписывайтесь на обновления!
На этом я заканчиваю и надеюсь что вы все таки почерпнете что нибудь полезное для себя из этого материала! Удачи, Пока!
Форма подписки на рассылку - это входные врата, через которые посетители сайта вливаются в email-маркетинг компании. Цвет, размер, расположение полей и кнопки «подписаться», а также сопутствующий текст влияют на количество подписчиков.
Жаль, что не бывает стопроцентно работающих рекомендаций вроде «сделайте здоровенную красную кнопку и будет вам миллионная подписная база». Даже самая прекрасная в мире форма подписки может слабо конвертировать. Потому что на решение человека оставить свой электронный адрес влияют и другие факторы. Например, интерес к компании и её продуктам, отзывы других людей о содержимом email-рассылки, качество трафика.
Проще всего создавать форму подписки, если перед глазами есть готовые образцы. Примеряешь их к своему проекту и видишь, каких текстов, стимулов и фишек не хватает для полной конверсии.
Сделайте красиво и заметноПодписка на рассылку - это обычно не то, ради чего человек заходит на сайт. Поэтому форма подписки не займёт центральное место на первом экране. В то же время должно быть легко найти поле, в которое вписать email, чтобы получать новости компании.
Подумайте, в каком месте сайта разместить форму. Например, ближе к середине или концу страницы. Так вы дадите пользователю время на то, чтобы прокрутить сайт и понять, куда он попал. И к моменту обнаружения формы подписки человек примет осознанное решение о том, хочет ли он в дальнейшем получать от вас какую-то информацию.
Если страницы сайта длинные, то несколько раз ненавязчиво напомните о возможности подписаться. Продублируйте одну и ту же форму подписки. Или, как вариант, пару раз разместите обычную форму, а ближе к футеру покажите всплывающее окошко с приглашением подписаться.
Электронные рассылки некоторых компаний - это самостоятельный ценный продукт, в который вкладывают силы писатели, дизайнеры и маркетологи. Если это про вас, то создайте отдельную страницу с описанием всех преимуществ email-рассылки.
Стимулируйте подписыватьсяНачните с самого важного: пригласите подписаться на email-рассылку и расскажите, о чём планируете писать. Сформулируйте этот текст в виде призыва к действию в одном-двух предложениях.
- «Подпишитесь на новости и акции “Горгаза”».
- «Узнайте, как строить муравьиные фермы из подручных материалов».
- «Оставьте электронный адрес и будьте в курсе модных новинок в магазине “Мебель”».
Раз есть призыв, то должен быть и стимул к выполнению целевого действия. Эти ребята, призыв со стимулом, хорошо работают в паре. Вначале вы зовёте в лес. И тут же обещаете малину вёдрами, белые грибы лукошками и прочие радости природного происхождения в конкретном количественном выражении.
Мотивируйте пользователей заполнить форму подписки - дайте взамен что-то полезное и бесплатное. Напишите как можно конкретнее, ради чего нужно оставить свой электронный адрес.
- «Скидка 15% на весь ассортимент штанов новым подписчикам электронной рассылки».
- «Подпишитесь и станьте участником розыгрыша трёх автомобилей».
- «Оставьте свой email и узнавайте о снижении цен на шубы из натурального меха».
Убедите пользователей, что вам можно доверять. Пусть они не боятся сообщить вам свои имена, электронные адреса и телефоны. Обещайте не спамить, укажите периодичность писем, покажите количество подписчиков и их отзывы.
Добавьте пару слов об авторах электронной рассылки. Ведь это конкретные люди с именами и фотографиями, к которым посетители сайта могут проникнуться доверием. Понятно, что за email-рассылку в компании отвечает интернет-маркетолог. Но он работает в команде с другими специалистами, каждый из которых консультирует по своей предметной области.
Многие вебмастера относятся скептически к организации подписки на обновления на сайте. Но тем не менее. Имея в подписчиках хотя бы 500 пользователей можно ждать, что 200 из них сделают переход с почтового ящика на сайт, что само по себе неплохо.
Разумеется, для того, чтобы сайт пользовался популярностью, необходимо вначале сделать его интересным и полезным для пользователя.
Существует много служб по созданию рассылок, но большинство из них либо платные, либо условно бесплатные.
В данной статье я хочу рассмотреть способ создания рассылки с помощью сервиса FeedBurner. Он принадлежит компании Гугл, и является полностью бесплатным.
Как на сайте сделать форму подписки с помощью FeedBurner: пошаговая инструкцияСначала необходимо зарегистрироваться в самом сервисе Feedburner, для этого нужно иметь почтовый ящик на Google . Зайдите в , и авторизуйтесь с помощью данных аккаунта Google.
Вас направит на страницу регистрации вашего фида. Не забудьте включить Русский язык, нажав вверху на вкладку Languages, рисунок 1.
рисунок 1
Введите полный адрес фида в RSS ленте. Если ваш сайт на wordpress, то что-то вроде (http://site.ru/feed/). Перед тем как вписать адрес, проверьте его, вставив в адресную строку браузера. Если при переходе загрузится ваша лента, то все верно. Нажимаем кнопку Next, рисунок 2.
рисунок 2
На следующей странице, жмём Next. Перед этим не забудьте сохранить адрес фида, он еще пригодится, смотрите рисунок 3.
рисунок 3
И на следующей странице, нажимаем Next, рисунок 4.
рисунок 4
Здесь отмечаем бесплатные услуги трекинга (уникальные клики, загрузки вложений и TotalStats), и жмём Next, рисунок 5.
рисунок 5
На этом этапе регистрация фида завершена. Чтобы настроить рассылку, нажимаем на вкладку «Публикуй», рисунок 6.
рисунок 6
Слева нажимаете на вкладку - «Подписки по электронной почте», рисунок 7.
рисунок 7
Активируйте страницу - «Подписки по электронной почте», рисунок 8
рисунок 8
У вас появится 4 вкладки, нажимаем на «Communication Preferences», смотрим рисунок 9. На открывшейся странице необходимо отредактировать 2 поля:
рисунок 9
В поле «Email Reply-To-Address» укажите адрес электронной почты Google. «Тело письма подтверждения» – текст указанный здесь будет отображаться в письме к подписчику, поэтому перепишите его под себя.
Пример текста:
Добрый день,
С Вашего почтового ящика была запрошена подписка на получение обновлений о новых публикациях на сайте «Вкусные рецепты».
Если это были Вы, пройдите, пожалуйста, по ссылке и подпишитесь на обновления:
${confirmlink}
Если ссылка по какой-либо причине не нажимается, скопируйте ее в окно вашего браузера и выполните переход, нажав «Enter».
рисунок 10
Далее нажимаем на вкладку - «Email Branding», смотрим рисунок 11. На загрузившейся странице можно отредактировать внешний вид письма, которое получит ваш подписчик. Здесь укажите название, тему письма, добавьте фото логотипа, выберите цвет и размер шрифта. Закончив, не забываем сохранить настройки.
рисунок 11
На вкладке «Delivery Options» укажите часовой пояс и время доставки электронных писем. Можно сделать как на рисунке, – сохраняем, смотри рисунок 12.
рисунок 12
Ну и, наконец, последнее, нажимаем на вкладку «PingShot». Здесь необходимо активировать функцию, чтобы интернет-службам приходили уведомления об изменениях в вашем RSS канале, рисунок 13.
рисунок 13
Итак, в Feedburner вы зарегистрировались, feed настроили, основной этап позади, остается настроить интерфейсную часть. Если вы делаете подписку под wordpress, могу предложить платный плагин с безграничными возможностями организации формы подписки как встроенной, так и всплывающей с потрясающим комплектом эффектов wp-subscribe-pro . Он уже куплен и выложен для общего пользования. Вы также можете использовать и бесплатные варианты, решение, конечно, за вами.
Существует и альтернативный вариант размещения формы, который предлагает Feedburner. для этого необходимо скопировать HTML код находящийся на вкладке «Публикуй» – Subscription Management (управление подпиской), смотрите рисунок 14.
рисунок 14
Этот HTML код также можно стилизовать по своему вкусу и вставить на свою страницу, а точнее в то место кода своей страницы, где бы вам хотелось отобразить непосредственно саму форму подписки.
Очень надеюсь, что данное пошаговое руководство смогло вам помочь сделать подписку на email на своем сайте, и тем самым привлечь дополнительный трафик.
UP 2017. Сервис Smartresponder больше не существует 🙁
Почтовые рассылки – дело нужное во всех смыслах. Насколько могу судить по доступной мне статистике, большинство особенно начинающих пользователей сегодня предпочитают не создавать закладки, а получать новости с любых сайтов на почту. Мне кажется, что этот способ получения информации вряд ли себя изживет. Он и старый как интернет, и удобный.
Что касается блогов на движке , то здесь возможности по созданию и ведению рассылки огромные. Кстати, вести рассылку на мыло выгодно не только для информационных блогов, типа моего, но и в особенности для сайтов интернет-магазинов, все зависит от креативности подхода.
Так вот, фреймворк WordPress в качестве основы для рассылок – непаханое поле, но здесь есть некоторые ограничения. Если блог/сайт имеет пару сотен посетителей, то и подписчиков, соответственно, немного, что логично. И любой из плагинов, на основе которых WordPress предлагает создать свою рассылку, будет работать надежно и беспроблемно.
Но как только блог обзаведется своей собственной базой подписчиков, станет более-менее популярным (имеется в виду – возрастет количество посетителей), то плагину рассылок (которые во множественном числе предлагает WordPress) придется создавать тысячи запросов к базе данных, нагружать сервер, тратить процессорные мощности – в общем, всяческим образом тормозить ресурс.
Такого «счастья» не нужно никому, и возникает проблема – как решить вопрос с рассылками на стороннем сервере? Декстопный вариант я тоже не рассматриваю, потому что постоянно «грузить» свой компьютер – это тоже не лучший вариант. Но желательно сделать так, чтобы всю нагрузку по почтовым рассылкам принимал на себя сторонний сервер, но при этом чтобы отправной точкой рассылки все же оставался наш сайт.
Решение есть и оно довольно простое – интернет просто кишит всякого рода сервисами рассылок, наперебой предлагающими свои услуги, но лидирующее место принадлежит . Вот им я и предлагаю воспользоваться, на сегодняшний день этот сервис самый крутой среди себе подобных. А ниже я немного познакомлю вас с этим сервисом, и расскажу как им пользоваться.
Знакомимся с рассылкой на Smartresponder– сервис весьма известный и очень функциональный, но если им не управлять должным образом, то он можно сказать в какой-то степени навязчивый. Что я имею в виду? Многие пользователи интернет подписываются на интересующие их новости, не глядя на то, что им предлагают, так сказать, в «довесок». А таким довеском могут быть совершенно ненужные вам рассылки. Но это — дело внимательности каждого подписчика. Наше же с вами дело – извлечь из рассылки Smartresponder максимальную пользу с минимальным вредом для себя, своих посетителей и подписчиков.
Один из известных способов – не просто пользоваться этим сервисом в предлагаемом стандартном режиме (как стороннюю рассылку), а установить форму рассылки на свой сайт или блог. И не просто установить, а сделать эту форму оригинальной, необычной, такой, которой нет ни у кого. Средствами самого Smartresponder это сделать не получится – у него есть несколько стандартных вариантов оформления формы рассылки, но не более, и здесь здорово не разгуляешься в смысле корректировки дизайна подписки. Вот часть эти форм подписок, которые можно брать бесплатно:
Как видите, в смысле предложений дизайна все довольно грустно – не для всякого сайта подойдет такое оформление, да и как я уже говорил, присутствует много ненужного в коде рассылки, например:
1. Первое – никому не нужно еще одно подключение — оно лишнее.
2. Много всевозможных дублирующих соединений, которые уже провел ваш WordPress. Например, определение кодировки.
3. Всякие формы в форме, div-ы и прочие элементы css, которые можно значительно сократить.
Другое дело – на основе этой самой стандартной рассылки создать свою форму, которая бы идеально вписывалась в дизайн нашего блога. Конечно, здесь нужны хотя бы минимальные знания CSS, и , но в крайнем случае уже можно немного раскошелиться на программиста. За такую работу возьмут копейки, зато какая польза будет.
И совершенно не нужно брать за скелет формы код из смартреспондера – он слишком изобилует всякими нубовскими наворотами, никому не нужными. Простой хороший код, хороший минимум нагрузки на БД и сервер, хорошее эффективное внешнее оформление – что еще нужно человеку, чтобы достойно встретить читателя?
Нажав на кнопку «Попробовать бесплатно» (показано выше), переходим на страницу регистрации. Здесь все банально – заполняете поля и попадаете на следующую страницу, где вам будет предложено изложить более подробную информацию о себе. Думаю, есть смысл правильно, не выдумывая, заполнить все поля – наши подписчики живые люди, и им будет приятно видеть, что с ними общается не выдуманный Вася Пупкин, а обычный живой человек. Заполнив все необходимые поля, вы перемещаетесь на страницу, где в верхнем меню увидите заветную кнопочку «Создать новую рассылку».
Создание своей рассылки и формы отправкиСобственно, форма отправки письма нам не нужна, если мы собрались ваять собственную – нам нужен только идентификатор, ради которого вся эта суета и затевалась. Поэтому продолжаем тем, что начинаем создавать новую рассылку с целью выудить из нее наш ID. Для этого в предлагаемой форме снова заполняем все, что нам предлагают заполнить (нужные поля отмечены звездочкой). Здесь, в принципе, название и описание рассылки не критично – эта информация предназначена только для нас. Остальное определяет периодичность выпуска рассылок, нашу подпись в письмах и наш почтовый адрес.
Теперь жмем «Создать новую рассылку», и ура! Мы стали счастливым обладателем новенькой, блестящей, набитой до отказа подписчиками рассылки на нашем блоге! Осталось дело за малым – выудить свой идентификатор из вновь созданной рассылки и начать создание своего собственного шедевра формы рассылки на его основе. Подведем промежуточные итоги – для чего все же нам нужен этот ID, если кто-то не понял?
1. Мы избавляемся от лишнего плагина рассылок, если он был, или предотвращаем его расходную и поэтому ненужную установку. А это – прямая экономия энергоресурсов нашего сайта
2. Мы получаем доступ к услугам стороннего сервиса, который безропотно выдержит все нагрузки, исходящие от нашей базы подписчиков, даже если их будет десятки тысяч.
3. Мы получаем возможность настроить свою собственную рассылку так, как нам удобно, и что еще более удобно – все это можно сделать на русском языке, в отличие от многих WordPress плагинов, не переведенных на русский язык и не собирающихся им обзаводиться.
4. Минимизируем и оптимизируем html и коды, что тоже есть хорошо.
А номер нашего идентификатора мы увидим здесь:
Это в меню «Рассылки» — «Списки рассылок». Теперь можно приступать к главному процессу. Собственно, я предложу пару форм, в которых будет работать все тот же идентификатор , но с возможностью их полной перестройки под ваши нужды. То есть, можно самостоятельно изменить внешний вид рассылки до неузнаваемости.
Собственная форма подпискиИтак, форма № 1. Вот ее код:
| [ php] < h3> Подпишись на новости блога: < forma onsubmit= "return SR_submit(this)" method= "post" action= 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" /> < div id= "optin" > < input type= "text" tabindex= "900" onblur= onfocus= 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" /> [ / 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 { border: 1px solid #CCCCCC; font- size: 15px; margin- bottom: 10px; padding: 8px 10px; width: 90 %; } #optin input, #optin_post input { 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] |
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 { border: 1px solid #CCCCCC; font-size: 15px; margin-bottom: 10px; padding: 8px 10px; width: 90%;} #optin input, #optin_post input { 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; }
А вот как она выглядит:
Здесь я специально показал самую простую форму рассылки, чтобы не забивать страницу лишним css кодом. Но для знающих людей здесь все должно быть понятно: можно менять все – размеры, цвет, добавлять необходимые поля, устанавливать тени и градиенты. Все в ваших руках. Самое главное – минимум кода и максимум эффективности. А для того, чтобы ваша рассылка работала по той схеме, которую вы определили в настройках Smartresponder, вам нужно сделать одно-единственное телодвижение – в строке кода прописать номер своего идентификатора вместо моего ID 668397. Теперь рассылка будет работать согласно установленного вами же графика.
А вот еще один пример формы № 2 – на базе рассылки от Feedburner, который уже понемногу начинает помирать. То есть, я просто взял ее внешний вид, а код оставил практически прежний, за небольшим исключением:
Здесь я тоже оформил все в минималистичном стиле, но при желании можно все это переделать на свой лад. Вот код самой формы рассылки:
| 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" /> < 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" /> [ / php] |
Введите свой электронный адрес и получите книгу в подарок:
