Создаем форму подписки, как у известных брендов. Страница управления подписками

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

Итак, что мы видим:

1. Необходимость заполнить три поля – никнейм, почта и пароль. Зачем никнейм, если вместо него может использоваться почта? Если упрощать, то от этого поля надо избавиться. Предложите заполнить его позже.
2. Капча – велика вероятность что на вас просто плюнут. Особенно если капча не введётся с первого раза, что по причине рассеянности людей может случаться достаточно часто. Да и от кого вы в данном случае защищаетесь? Особенно хорошо получается, когда вводишь неправильно капчу, и на новом заходе тебе предлагают ещё раз заодно заполнить поле пароля, например. Легче действительно уйти на другой сайт.
3. Заранее поставленная галочка «Я хочу получать рассылку» в ряде стран расценивается как нарушение анти-спам законодательства. Мы уже писали об этом ранее . И хотя в России это не нарушает закон, но выглядит всё равно достаточно убого – даже если вы таким принудительным способом заставите клиента подписаться, он отправит ваше письмо в спам при первой же рассылке.
4. На всякий случай – не просите клиента ввести пароль или почтовый ящик два раза. Это утомительно и не нужно – вы сейчас в этом убедитесь.
5. Ставить галочку «Я согласен с соглашением о конфиденциальности» не обязательно – можно просто написать «нажимая кнопку регистрации, вы соглашаетесь с нашей политикой конфиденциальности <ссылка>». Однако без политики конфиденциальности не обойтись – сделайте такую страничку на сайте сразу.
6. Если клиент что-то ввёл неправильно, не сбрасывайте остальные поля, например, поле пароля – это пагубная практика. Напишите красными буковками что и где нужно поправить, но оставьте на месте всё, что клиент уже ввёл – это верно для любой системы сбора данных.

Thank you page

Правильные ответы:

1. Поблагодарите – это ок, в примере это есть. Хотя можно говорить и менее канцелярским языком.

2. Скажите, от кого придёт письмо – в данном случае, лучше указать, с какого ящика оно придёт.

3. Покажите, на какой ящик отправлено письмо!
Благодаря этому не нужно просить клиента вводить ящик два раза – он может увидеть, что послал письмо не туда в случае, если не получит письма с подтверждением регистрации. В противном случае, не получив подтверждения и не имея возможности ходить по вашему сайту клиент уйдёт. Пример:

Благодарим вас за регистрацию. Письмо с подтверждением направлено на почтовый ящик %email-адрес%.

4. Скажите, что делать, если письмо не пришло!
Как правило, письмо с подтверждением регистрации может не прийти по двум причинам. Первая – у вас не работает механизм. Поэтому «если письмо не пришло – напишите нам» актуальная фраза. Однако не стоит с ней торопиться, так как чаще письмо падает в спам, поэтому сначала напишите – «Если вы не видите письма в папке входящих, проверьте папку «спам». Чтобы в дальнейшем письма от нас приходили к вам корректно, пожалуйста, добавьте <ОТПРАВИТЕЛЬ> в список контактов.» Вот после таких слов уже уместно добавить, что если письмо не пришло никуда, - «напишите нам».

Возможность пользоваться вашим сайтом должна даваться сразу

Письмо подтверждения регистрации

1. Информация о том, почему вы получили это письмо: потому что вы или кто-то другой зарегистрировался на сайте <САЙТ>
2. Ссылка для подтверждения регистрации, которая сопровождается двумя фразами. Первая говорит о том, что «для того, чтобы завершить регистрацию – пройдите по ссылке». А вторая – «если ссылка по какой-то причине не нажимается, скопируйте её и вставьте в окно браузера». Внимание! Продумайте страницу, которую клиент увидит после того, как пройдёт по ссылке. Стандартно это фраза «Спасибо, ваш почтовый адрес подтвержден».
3. Сообщение о том, что «если вы получили это письмо по ошибке, вам не нужно предпринимать каких-либо действий». Плюс вы можете добавить ещё несколько слов, которые могут успокоить клиента.

В письме подтверждения регистрации вы можете сразу использовать как правильный почтовый ящик (вместо noreply принято использовать ящики, на которые в дальнейшем клиент сможет написать вашему CRM), также можно поместить и шапку корпоративного письма.

Welcome email

Страница управления подписками

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

Таким образом, мы с вами рассмотрели, как можно продуманно сделать процесс подписки и управления аккаунтом так, чтобы он был максимально удобен для клиента и – вместе с тем – не привёл вас к потере лида. Мы привели здесь как можно больше вариантов и шагов, но те, которые вы выберете конкретно для вашего сайта - зависят от его тематики и целей. Так, для продающего сайта в эту стандартную цепочку нужно будет включить различные маркетинговые манипуляции. Для подписки на новые посты на новостном ресурсе можно значительно сократить количество шагов – взять адрес почты на сайте и включить возможность настройки аккаунта в следующее письмо рассылки. Тогда выглядеть весь процесс будет так:

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

О том, как грамотно организовать процесс отписки, мы напишем через неделю.

Привет дорогие читатели сайт. Решил я серьезно заняться своей подписной базой, а то как-то несерьезно вести блог уже более 2-х лет, а иметь всего 200 подписчиков по RSS и около 700 по каналу SmartResponder, даже цели я на этот год ставил немного другие.

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

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

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

Трафик из поисковиков характерен тем, что он направлен именно на поиск цели посетителя, которая заставила его оказаться на страницах вашего ресурса.

Отыскав нужную для себя информацию, с 90% вероятностью такой посетитель закроет страницу сайта и уйдет, дальше бродить по ТОП выдаче Яндекса или Гугла.

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

Вот тут и играет очень важную роль красивая форма подписки на сайте, реализованная как через (feedburner.google.com ), так и SmartResponder.

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

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

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

Сегодня вы находитесь в ТОПе, а завтра уже в жопе на последних местах выдачи. Зато подписчики от вас никуда не денутся, только если вы сами их не распугаете.

Итак, прежде чем мы приступим к созданию чудо формы, у вас должны быть заведены аккаунты в feedburner.google.com (RSS) или SmartResponder.

Если не знаете, как это сделать вам мои статьи в помощь « » и « ».

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

Вторая форма находится в сайдбаре в самом верху.

Приведу вам пример, как я создал первый вид подписки, за вывод которой отвечает сервис Feedburner (RSS), несколько кнопок социальных сетей и стили шаблона wordpress.

После того, как на сервисе Feedburner вы зажгли фид, переходите во вкладку «Публикуй», а затем выбираете раздел «Подписки по электронной почте».

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

Я скопировал этот код себе в и немного его отредактировал, вот что у меня в итоге получилось.

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

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

Для этого заключаем весь полученный ранее код в любой «класс» , например «subscribe» . Конструктивно это должно выглядеть вот так:

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

Про код социальных кнопок я рассказывал в статье « » Там почитаете, как зарегистрироваться в этих сервисах и получить код кнопок вывода.

Subscribe { background: linear-gradient(to bottom, #FFFFFF 0px, #E8EFF5 100%) transparent; border: 1px solid #DCE0E3; border-radius: 5px; color: #4B5F74; font-size: 13px; height: 124px; line-height: 36px; margin: 0px 10px 10px; text-align: center; }

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

Готовые шаблоны формы подписки

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

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

Последняя новость

Пару дней назад наконец-то пришел мой первый чек от Google Adsense. К нам в Беларусь он летел чуть больше одного месяца, уверен что еще столько придется потратить на его обналичивание.

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

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

Настроим форму подписки нашего сервиса рассылки совершенно адаптивной и валидной!

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

Конечно, в выборе каждый волен! и об этом сегодня говорить не станем. А вот как настроить и адаптировать, чтобы форма подписки на сайт обновления была красивой и, что важнее, валидной, — подробно разберёмся. 1- большинство форм подписки имеют невалидный код, и более того с множеством лишней атрибутики — вот весь этот код и приведём в порядок: (так возможно настроить форму любого сервиса рассылок)

Разделы статьи:

форма подписки на сайт

…предоставляемая сервисами, зачастую имеет очень невалидный код…

Но это совершенно не говорит о некачественных услугах…

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

…примерно так будет выглядеть классическая форма подписки, которую предлагают сервисы:

продолжить чтение о

Как видите форма пописки не совсем симпатичная) или совсем не симпатичная — мне этот дизайн окна не нравится! и более того, во некоторых сервисах — оно не адаптивное … сами знаете что это значит в наш век-то адаптации…))

А значит вопрос: как сделать так, чтобы

форма подписки на рассылку была красивой и валидной

остаётся весьма актуален! А раз так, давайте адаптацией и займёмся…

Спешу уверить: в нашей предстоящей правке страшного ничего нет, кроме того, что придётся немного поработать — функциональную составляющую кода трогать не станем (не рекомендуется), а разберёмся с тем:

как настроить форму подписки — input строки html

…в этих примерах в основном и скрываются закавыки.

Ноне рассмотрим пример такого сервиса как автовебофис https://autoweboffice.com/ ибо в его форме подписки присутствуют два окошка (так было некогда и в смарте): формочка ввода емейла и имени — это полезнее в плане изучения…

…и я этот сервис немного изучил, посмотрел код, и, на основе своего смартовского, причесал и автовебовский до приличного, — теперь делюсь решением.

сам им пользоваться пока что не стал… ибо не совсем разобрался с сеткой оплаты (мутно там как-то) или я что не понял)) — возможно в скором времени перейду.

…тем, кто заметит шутку в форме подписки — приз!!

Под занавес:

…что вам нужно было сделать…

1 — прописать имена селекторов в html коде, и как следствие удалить ненужные строчные стили цсс (к этому же, почистить код от излишней инпут атрибутики).

2 — прописать в своих css стилях шаблона предложенный мною код.

3 — тестировать, подстраивая…

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

Но!! если вдруг организовались трудности, обращайтесь…

…или пишите в комментариях.

На этом моя повесть нынче решительно окончена...!

!..подписываясь на обновления сайт -
...расстаёмся с невежеством..!

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

Для того, чтобы сделать подписку на обновления сайта , надо воспользоваться одним из двух вариантов:

1. Воспользоваться каким-нибудь сторонним сервисом . Могу порекомендовать feedburner.google.com . Это наиболее простой способ, но, правда, Вы будете зависеть от стороннего сервиса, вдобавок, в каждое письмо будут вставляться чужие ссылки, что не очень хорошо.
2. Сделать собственную подписку на сайте . Этот способ более трудоёмкий, но зато абсолютно всё под Вашим контролем. Что отправлять, как отправлять, куда отправлять - всё решаете Вы. Вот об этом способе я и расскажу ниже немного подробнее.

Сразу отмечу, что первый способ значительно популярнее, поскольку он простой и надёжный. А второй будет достаточно тяжёлым в реализации и достаточно крупным, поэтому кратко буду описывать основные проблемы и алгоритм работы.

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

Теперь давайте создадим таблицу подписчиков со следующими полями:

• id - уникальный идентификатор подписчика.
• name - имя подписчика.

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

И теперь необходимо создать таблицу, которая позволит решить проблему с ограничением количества отправляемых писем:

• id - уникальный идентификатор последней рассылки.
• post_id - уникальный идентификатор статьи (или поста) на сайте, о котором рассылается уведомление.
• subscriber_id - уникальный идентификатор последнего подписчика, которому был отправлен выпуск.
• end - закончена рассылка или нет.

Думаю, что с формой подписки и её обраткой Вы справитесь (если нет, то используйте 1-й вариант подписки на обновления , либо изучайте основы PHP ).

$db = new mysqli("localhost", "root", "", "mydb"); // Подключаемся к базе данных
$result_set = $db->query("SELECT * FROM `subscribe` WHERE `end`="0" LIMIT 1"); // Получаем 1 неоконченную рассылку
$last_subscribe = $result_set->fetch_assoc(); // Преобразуем result_set в массив
/* Если все рассылки уже отправлены, то смотрим: нет ли новых статей на сайте */
if ($result_set->num_rows == 0) {
$result_set = $db->query("SELECT * FROM `posts` WHERE `id`>"".$last_subscribe["post_id"]."" LIMIT 1");
if ($result_set->num_rows == 0) exit; // Если ничего нового нет, то просто выходим
$post = $result_set->fetch_assoc(); // Получаем данные о новой статье
$db->query("INSERT INTO `subscribe` (`post_id`, `subscriber_id`, `end`) VALUES ("".$post["id"]."", "0", "0")"); // Добавляем в очередь новую рассылку
exit; // Выходим, а через 10 минут данный скрипт будет снова запущен, и уже пойдёт непосредственно рассылка писем
}
$last_id = $last_subscribe["subscriber_id"]; // Получаем id подписчика, которому было отправлено письмо в последний раз
$result_set = $db->query("SELECT * FROM `subscribers` WHERE `id`>$last_id");
$count = 0;
while (($row = $result_set->fetch_assoc()) !== false) {
$subscriber_id = $row["id"];
/* Здесь код для отправки письма через функцию mail() */
$count++;
if ($count == 10) {
$db->query("UPDATE `subscribe` SET `subscriber_id`="$subscriber_id" WHERE `id`="".$last_subscribe["id"]."""); // Обновляем информацию о последнем подписчике, которому было отправлено письмо
break; // Выходим после 10-ти отправлений
}
}
if ($result_set->num_rows <= 10) $db->query("UPDATE `subscribe` SET `end`="1" WHERE `id`=""".$last_subscribe["id"].""""); // Всё отправлено
?>

Данный скрипт достаточно сложный, но реализует он очень простую вещь, которую кратко можно записать так: отправляем письма не более 10-ти подписчикам, а если всё разослано, то при наличии новых статей на сайте, добавляем их в очередь рассылки .

Ещё раз повторяю, что данный способ рассчитан уже не новичков в PHP и MySQL , поэтому если Вам просто нужна самая обычная подписка на сайте, то используйте сторонние сервисы. А если у Вас уже есть нормальный опыт, и Вы хотите полностью контролировать все процессы рассылки обновлений сайта, то используйте 2-й варинт .

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

Во-первых, можно купить подписную базу. Вам не придётся создавать никаких форм – у вас уже будет то количество подписчиков, за которое вы заплатите. Удобно? Да. Работает? Нет.

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

Во-вторых, можно самому собрать такую базу. Например, из людей, которые выкладывают адреса своих почтовых ящиков в открытый доступ. Это сложно, но зато вы будете иметь хотя бы какое-то представление о вашей аудитории.

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

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

Чтобы создать идеальную форму, нужно знать всего несколько принципов:

1. В форме должен быть призыв к действию;
2. Чем меньше полей, тем лучше.

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

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

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

В западном англоязычном инфобизнесе пошёл тренд вообще оставлять одно поле – емейл. Да, персонализация уменьшается, но люди там обленились (или деградировали) настолько, что своё имя лень вписывать.

Можно ли самому создать форму подписки?

Можно. Этот процесс не занимает много времени и не требует огромных познаний в программировании. Достаточно знать html и, желательно, css на базовом уровне. Если вы не хотите вникать во всё это, просто продолжите читать со следующего подзаголовка.

Для начала нужно вписать тэг