Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
А в этой статье мы поговорим о том, как сделать форму подписки интересной и как удержать клиентов в случае отписки.
Форма подписки
Лучше всего расположить форму подписки отдельным блоком внизу страницы или в боковом меню, чтобы пользователь мог легко найти её. Можно приглашать подписаться во всплывающем окне, но используйте данный вариант аккуратно, чтобы не раздражать пользователей. В идеале следует показывать его только новым посетителям сайта.
Неудачный пример расположения формы в подвале сайта 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)
Недавно мне написала одна из моих подписчиц — женщина преклонного возраста и попросила помочь в одном вопросе, связанном с работой в онлайне. Не буду вдаваться в подробности того, что я сделал для нее, но я помог. И в ответ она написала мне, что теперь обязательно добьется лучших результатов в онлайне. Обязательно, потому что поверила в то, […]
Как большинство людей используют Инстаграм? Исключительно для того, чтобы выкладывать свои фотографии. Получается своеобразная ярмарка тщеславия. Если говорить метафорично, то типичной фотографией является что-то вроде этого: Но у Инстаграм (кто бы мог подумать!) есть «второе дно». Я про возможность настраивать в этой социальной сети таргетированную рекламу, которая будет показываться именно тем категориям людей, которым нам надо. […]
Дошли руки сделать обзор живого тренинга Инфотрафик и конверсия 2017, который я совсем недавно организовал и провел совместно с Александром Дырза. Это будет большая статья)) Итак — 25 — 28 ноября 2017 года. Москва, гостиничный комплекс Измайлово Альфа. Поехали! Классные ощущение, когда перед началом мероприятия люди начинают подтягиваться в зал. Ты встречаешь их и […]
Какие расходы в инфомаркетинге (инфобизнесе)
Не претендую на всеохватность. Некоторые расходы в эту статью я сознательно не включил, про некоторые просто забыл. Но основные моменты здесь отражены: На оборудование Сразу оговорюсь – покупать все это разом весьма накладно. Самый лучший выход – просто постепенно формировать свою домашнюю студию. И еще один момент – я не лучший специалист во всем этом, […]
Привет, друзья! Приготовила для вас простой и лаконичный шаблон страницы подписки в html-формате для загрузки на хостинг. И, конечно же, инструкцию по его редактированию.
Шаблон адаптивен под разные устройства, состоит из:
Заголовка и подзаголовка,
3D коробки инфопродукта для визуализации,
списка выгод (буллитов),
формы подписки – по емейл и через ВК,
подвала с важной информацией (ссылки на ваш сайт или группу ВК, политику конфиденциальности, соцсети).
Пример данного шаблона:
А здесь видеоурок по его редактированию:
Также размещаю текстовую инструкцию по редактированию ниже.
1) Сначала скачайте шаблон по ссылке.
2) Он запакован в архив, после скачивания его нужно распаковать в обычную папку. Кликаете по архиву правой кнопкой мыши и выбираете «Извлечь в текущую папку».
У вас на компьютере должен быть установлен архиватор!
Или двойным кликом мыши открываете архив и перетягиваете папку из архива на рабочий стол.
3) Сделайте копию папки с шаблоном. Зачем? Чтобы шаблон у вас остался, а с текущей копией вы продолжили работу по редактированию.
Нажмите по папке правой кнопкой мыши, выберите «Копировать».
Затем кликните по рабочему столу правой кнопкой мыши и выберите «Вставить».
4) Откройте двойным кликом мыши скопированную папку, внутри у вас будет два файла. Файл index.html и папка assets. Начнем с редактирования index.html – это и есть наш шаблон. А в папке assets нам понадобится только подпапка с картинками – images. Я покажу, как вам в ней заменить макет 3D коробки вашей обложкой продукта.
Другие папки трогать не надо – они отвечают за стили, скрипты и корректное отображение страницы на разных устройствах.
Для редактирования файла index.html понадобится скачать и установить бесплатный блокнот Notepad++.
Вот так выглядит его иконка.
После установки кликните правой кнопкой мыши по файлу index.html и выберите «Открыть в блокноте». Вы откроете код шаблона.
Что мы здесь редактируем?
Во-первых, заголовок (title), который отображается в браузере – просто напишите свой текст вместо текущего.
Показываю на примере своего словарика начинающего партнера.
Ниже идет кнопочка «ПОЛУЧИТЬ ДОСТУП», при нажатии на которую человека перекидывает в конец странички на форму подписки. Здесь вы можете написать свое название на кнопке вместо текущего.
Просто подставляете ваш текст вместо моего.
Здесь важно описать, какие ценности, пользу, выгоды получит подписчик от вашей бесплатности. И лучше всего это работает в виде вот такого списка – четко по пунктам.
По умолчанию в нем 4 пункта, если вам нужно больше, можно скопировать, к примеру, последний пункт, выделив соответствующую часть в коде. Что нужно выделить я показала на скриншоте, тут важно копировать внимательно!
нажимайте на скриншоты для увеличения
Таким образом, можно скопировать и добавить нужное вам количество пунктов.
Если, наоборот, нужно удалить пункт, то точно также выделяете блок, как на скриншоте:
И жмете на клавиатуре Delete. Лишний пробел в коде тоже можно удалить с помощью клавиши Backspace (Back).
Важно: эта часть работы с кодом посложнее, поэтому она больше не для новичков. 4 пункта в списке – оптимальные количество выгод на подписной, поэтому можете ничего не удалять и не добавлять в коде!
Теперь нам нужно заменить форму подписки. Здесь проще, так как часть кода, которую будем менять, помечена комментариями . Нам полностью нужно удалить содержимое между двумя комментариями и вставить код формы подписки от своего сервиса рассылок.
нажмите на скриншот для увеличения
В моем случае это Джастклик. Я предварительно создала форму подписки в разделе «CRM» – «Формы подписки».
Теперь просто копирую ее код для вставки на подписную страницу.
И вставляю вместо текущего кода – полностью выделяю этот фрагмент и сочетанием клавиш Ctrl+V вставляю код моей формы.
нажимайте на скриншоты для увеличения
Текст над формой «Введите свой email в форму ниже…» тоже можно заменить.
Важно: чтобы сохранять внесенные изменения, не забывайте периодически нажимать на иконку дискеты «Сохранить» в блокноте Notepad++.
А чтобы просматривать в браузере, как меняется ваша подписная – просто открывайте в папке файл index.html, дважды кликнув по нему левой кнопкой мыши (так вы открываете предпросмотр шаблона в браузере).
Также вы можете выбрать, в каком браузере открыть файл, если нажмете на него правой кнопкой мыши. Выберите «Открыть с помощью» и нажмите в списке по нужному браузеру (если у вас их несколько).
Дальше в коде шаблона идет кнопка подписки через ВК – в нее вы просто вставляете ссылку на подписку на вашу бесплатность через Вконтакте. К примеру, в Senler нужно предварительно создать группу подписчиков под эту бесплатность и скопировать ссылку подписки на группу.
Затем вставить ее в кнопку вместо значка # между кавычками. Надпись на кнопке, как и текст «Или получите материал во Вконтакте» вы тоже можете поменять.
Если вы хотите убрать подписку по ВК , выделите фрагмент кода, как я показала на скриншоте, и нажмите на клавиатуре Delete.
Теперь осталось отредактировать текст и ссылки в подвале сайта. Здесь обязательно оставляем Политику конфиденциальности. Как сделать политику для своего сайта я показала здесь.
И в самом низу вместо текста Ваши ФИО напишите свои данные.
А теперь заменим 3D обложку инфопродукта на подписной . Для этого вам понадобится создать вашу обложку. Если вы не знаете, как это сделать, то рекомендую
Размер итоговой картинки желательно уменьшить, так как при создании в рекомендуемом мной сервисе она получается большой (размер можно менять в любом редакторе изображений, в том числе онлайн). А формат картинки должен быть png.
Например, я уменьшила размер с 1500Х1500 пикселей вполовину.
Готовую картинку нужно поместить в папку images, которая находится папке assets – обязательно дав ей такое же название, как у текущей обложки – maket, а мою картинку удалить.
То есть вам нужно заменить текущую картинку вашей, но обязательно с таким же названием и форматом. Повторюсь, ваша картинка должна называться maket и формат у нее должен быть png!
Когда вы замените обложку продукта на вашу, но с таким же названием и форматом, то она поменяется и в шаблоне подписной.
Как добавить Яндекс.Метрику или код пикселя от Вконтакте на подписную?
Очень просто, Метрику или пиксель можно разместить в коде перед тегом< /head>, сделав пробел. Если размещаете и то, и то, можно сразу друг после друга.
Когда шаблон отредактирован – самое время отправить страницу подписки на хостинг, чтобы опубликовать ее в интернете.
