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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма подписки на рассылку - это входные врата, через которые посетители сайта вливаются в email-маркетинг компании. Цвет, размер, расположение полей и кнопки «подписаться», а также сопутствующий текст влияют на количество подписчиков.

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

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

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

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

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

Электронные рассылки некоторых компаний - это самостоятельный ценный продукт, в который вкладывают силы писатели, дизайнеры и маркетологи. Если это про вас, то создайте отдельную страницу с описанием всех преимуществ email-рассылки.

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

• «Подпишитесь на новости и акции “Горгаза”».
• «Узнайте, как строить муравьиные фермы из подручных материалов».
• «Оставьте электронный адрес и будьте в курсе модных новинок в магазине “Мебель”».

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

Мотивируйте пользователей заполнить форму подписки - дайте взамен что-то полезное и бесплатное. Напишите как можно конкретнее, ради чего нужно оставить свой электронный адрес.

• «Скидка 15% на весь ассортимент штанов новым подписчикам электронной рассылки».
• «Подпишитесь и станьте участником розыгрыша трёх автомобилей».
• «Оставьте свой email и узнавайте о снижении цен на шубы из натурального меха».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На протяжении всей статьи мы будем работать только с одним сервисом 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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Первое – никому не нужно еще одно подключение — оно лишнее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подпишись на новости блога:

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

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

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

Введите свой электронный адрес и получите книгу в подарок: