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

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

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

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-й варинт .

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

Форма подписки

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

Неудачный пример расположения формы в подвале сайта Yves Rocher

Удачный пример расположения формы подписки от Mokselle

Основные элементы, которые должна содержать форма подписки:

Поля ввода . Оптимально спросить имя и email. Можно ограничиться одной почтой, но тогда вы лишаетесь возможности отправлять персонализированные письма.

Слишком много лишних полей (нашли в блоге UniSender)



Достаточно полей ввода в форме от Ecco



Отсутствие информации в форме от Quelle

Понятный график писем на сайте Фотосклад

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

Слишком общий текст на сайте 123.ru

Привлекательный текст от Nike



Также можно дарить подарки: скидку, бонусный материал, демо-версию сервиса и т.д. Пример текста от Enjoyme:



Или, если у вас сайт по продаже услуг, то можно подарить мини-аудит от эксперта (пример от Urban Decay):



Не ясно что за письма будут приходить в форме от Лакодом





Дополнительно не забываем, что форма должна быть заметна (но в то же время сочетаться с дизайном сайта).

Форма теряется (сайт Lamoda)



Форма - часть дизайна на сайте Adidas



И ещё несколько креативных форм подписки для вдохновения.

Милый джедай от Seonews:



Яркое всплывающее окно от Quelle:



Милое предложение стать друзьями от Kiehls:

Страница подписки

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

Итак, что же на ней должно находиться:

Пример хорошего заголовка от Нетологии



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



Ёмкие описание рассылок на сайте Ленты.ru



Преимущества или причина подписки . Так же, как и для формы, на странице подписки нужно показать зачем пользователю нужна рассылка. Можно не выделять отдельным блоком, а объединить с описанием рассылки.

Преимущества незаметны в неструктурированном тексте (на сайте Ural Airlines)



Маркированный список легко воспринимается (компания H&M)



Если вы дарите подарок за подписку, то лучше показать это в первом экране, например, в заголовке (на сайте Lamoda):



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

Примеры писем . Если в форме подписки достаточно добавить ссылку на пример письма, то тут удобнее показать его сразу. А еще лучше - разместить несколько писем.





Без фотографий информация теряется (на сайте Ipa-Zakon)



Фотографии сотрудников располагают к подписке (Сервис 1PS)

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

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

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

Что такое подписка и рассылка?

Итак, начнем с определений. Подписка - это добровольное согласие пользователя на получение им характера от лица ресурса. В таких письмах (а шлются они по электронной почте) администрация сайта, как уже отмечалось, может публиковать новости портала, какие-то акции (если речь идет об интернет-магазине), информацию о конкурсах (например, тех, которые проводятся на блоге). Подписавшись, человек оставляет свой адрес и, фактически, дает знак, что он готов прочесть письмо, присланное ему с того или иного сайта. Организуется подписка за счет специальной формы. Ее размещают на видном месте интернет-странички; такая форма может иметь разный но суть ее всегда одинакова - собрать адрес почты и передать его на сервер. Иногда подписка на рассылку для сайта также содержит поле «Имя».

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

Фактически рассылка следует за подпиской: на собранные с помощью формы адреса электронной почты администратор сайта (при помощи специальных инструментов) делает рассылку с информацией о своем сайте. Так и работает подписка на новости сайта.

Зачем это нужно?

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

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

Способы организации подписки на рассылку

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

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

Схема работы формы подписки

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

Схема работы такой подписки очень проста: в страницу сайта вставляется HTML-форма для которая передает данные скрипту. Тот, в свою очередь, исполняет условие, которое оканчивается записью адреса пользователя в текстовый файл или отправкой его данных на другой сервис (в зависимости от пожеланий администратора). Самым сложным в этой связке можно назвать работу PHP-скрипта, поскольку HTML-форма предельно проста, а вот у скрипта могут возникнуть какие-то проблемы, например, неправильно установленная кодировка. Если вы не владеете базовыми навыками программирования, рекомендуем попросить кого-то помочь с этим вопросом.

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

Ищем сервисы для создания подписки

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

Те проекты, что упомянуты выше, занимаются следующим: первый позволяет грамотно вести список Емейл-адресов пользователей и рассылать сообщения на них с определенной периодичностью (платно). Второй имеет несколько иную направленность: с его помощью вы сможете собрать нужные адреса, но отправить на них сможете уведомления с новостями со своего блога. Таким образом, первый сервис - это, скорее, рекламный инструмент, тогда как второй - возможность «подкармливать» подписчиков свежим контентом.

Создаем форму подписки своими руками

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

• Шаг 1 . Создаете PHP-скрипт обработки полученных данных (имени и адреса почты пользователя) и помещаете его в корень своего сайта. Если не знаете языка программирования - рекомендуем обратиться к фрилансеру, такое решение вам набросают за символическую плату.
• Шаг 2 . Необходимо интегрировать скрипт с HTML-страницей. Это делается просто: от вас нужны лишь базовые знания языка разметки HTML и немного усердия. Для того чтобы все получилось, надо создать оформить ее визуально (CSS в помощь) и соединить со скриптом: прописать отправку данных (post) на ваш PHP-файл.
• Шаг 3 . В него входит настройка скрипта обработки данных. В нем нужно, помимо самого кода, прописать информацию по поводу того, в какой файл будут отправляться полученные сведения. По сути, скрипт подписки для сайта готов. Сделать его реально за пару-тройку часов для новичка, и за полчаса (и быстрее) - в том случае, если у вас есть подобный опыт.

Рассылка по базе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Под занавес:

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

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

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

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

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

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

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

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

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

Привет дорогие читатели сайт. Решил я серьезно заняться своей подписной базой, а то как-то несерьезно вести блог уже более 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 .

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