Как привлечь и удержать подписчиков. Подробный разбор страниц подписки и отписки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Два важных аспекта формы подписки для сайта:

• содержание
• дизайн

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

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

• Делайте форму заметной

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

• Выделяйте форму подписки

Добавьте её в некий визуальный контейнер, выделив, как отдельное окно:

• Добавляйте направляющие

Обратите внимание на стрелки, указывающие на форму - люди подсознательно идут по следу. Также можно использовать образы людей со взглядом, направленным на форму подписки. Исследования THiNK Eye Tracking показали, что направленный взгляд на продукт, на 84% увеличивает шанс, что люди заметят его на странице, так почему бы это не использовать для формы?

• Делайте формы "сквозными"

• Используйте несколько форм

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

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

• Контрастные призывы к действию на кнопке и в заголовке формы

• Не слишком ограничивайте

Надписи вроде: «Вы можете ввести пароль от 6 до 12 символов. Обязательно используя цифры и буквы, но без символов: %,*,?,&, №, # и т.д.» отталкивают. У пользователей может быть любимый придуманный пароль, который он использует на всех сайтах, чего ради теперь менять его и запоминать новый? Кроме того, сложная для понимания система паролей раздражает и может вызывать постоянные ошибки при заполнении.

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

• Прекратите использовать капчи

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

Обратите внимание, что здесь странного?

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

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

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

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

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

• Делайте пошаговые формы

Можете разбивать форму подписки на новостную рассылку на 2-3 последовательных блока для удобства заполнения и визуального восприятия. Например, в интернет-магазине "Дочки-Сыночки" так выглядит первый шаг:

И, уже непосредственно с полем для емейла, второй.

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

• Давайте ссылку на политику конфиденциальности

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

• Разделяйте по интересам

Чтобы сразу "на входе" вовлечь подписчика - попробуйте использовать . В зависимости от предпочтений подписчика ему и будут отправляться письма только выбранной тематики.

• Тестируйте форму подписки

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

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

• Размещайте на сайт полезный контент. Чтобы не пропустить ваши обновления, клиенты сами будут подписываться на рассылки.

Указывайте в описании, что данные о подписчиках не продаются и вы не занимаетесь спам-рассылками, а отправляете только тематические материалы, от которых легко отписаться.

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

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

Отправляйте оптимизированное и классное приветственное письмо, которое будут получать новички. Это не способствует росту базы, но предотвращает её уменьшение.

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

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

P.S . Если вам понадобится помощь в создании классного email письма - оставляйте и мы вам подготовим красивый, современный шаблон письма в вашем аккаунте eSputnik абсолютно бесплатно ;)

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

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

Неудачный пример расположения формы в подвале сайта 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)

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

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

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

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

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

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

На протяжении всей статьи мы будем работать только с одним сервисом 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 и постараюсь вам дать больше уже готовых вариантов. А также показать еще какие-нибудь хитрости с внешним видом форм подписок. Подписывайтесь на обновления!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Под занавес:

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

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

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

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

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

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

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

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

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