Если у вас есть сайт, вы наверняка озабочены тем, чтобы ваши посетители могли получать новости, обновления и предложения самыми разными путями - через социальные сети, RSS, почту и так далее. Во всех случаях на пути пользователя стоит процесс подписки - и если в социальных сетях он упрощён максимально, то подписка на email-рассылку очень часто грешит ненужными сложностями. Поэтому мы решили посвятить очередную статью в нашем блоге юзабилити процесса подписки на вашу рассылку. На основе опыта UniSender мы расскажем о том, как упростить жизнь себе и вашему посетителю. Для начала разберём несколько грубых ошибок на следующем примере:
Итак, что мы видим:
Правильные ответы:
1. Поблагодарите – это ок, в примере это есть. Хотя можно говорить и менее канцелярским языком.
2. Скажите, от кого придёт письмо – в данном случае, лучше указать, с какого ящика оно придёт.
3. Покажите, на какой ящик отправлено письмо!
Благодаря этому не нужно просить клиента вводить ящик два раза – он может увидеть, что послал письмо не туда в случае, если не получит письма с подтверждением регистрации. В противном случае, не получив подтверждения и не имея возможности ходить по вашему сайту клиент уйдёт. Пример:
Благодарим вас за регистрацию. Письмо с подтверждением направлено на почтовый ящик %email-адрес%.
4. Скажите, что делать, если письмо не пришло!
Как правило, письмо с подтверждением регистрации может не прийти по двум причинам. Первая – у вас не работает механизм. Поэтому «если письмо не пришло – напишите нам» актуальная фраза. Однако не стоит с ней торопиться, так как чаще письмо падает в спам, поэтому сначала напишите – «Если вы не видите письма в папке входящих, проверьте папку «спам». Чтобы в дальнейшем письма от нас приходили к вам корректно, пожалуйста, добавьте в список контактов.» Вот после таких слов уже уместно добавить, что если письмо не пришло никуда, - «напишите нам».
В письме подтверждения регистрации вы можете сразу использовать как правильный почтовый ящик (вместо noreply принято использовать ящики, на которые в дальнейшем клиент сможет написать вашему CRM), также можно поместить и шапку корпоративного письма.
Welcome email Как правило, после того, как регистрация подтверждена, подписчику отправляется Welcome Email и подписчик ставится в соответствующую цепочку. В Welcome email вы можете дать ссылку, которая отправит клиента на управление его подписками, рассказать о возможностях, которые он получил, зарегистрировавшись на вашем сайте, вручить ключи от продукта и многое другое. Страница управления подписками На эту страницу клиент может попасть по ссылке из вашего Welcome email, а также в том случае, если кликнет на ссылку, которая обязательно должна быть в каждом вашем письме – это возможность отписаться или настройка уведомлений. Выглядеть это может так:
Отсюда клиент попадает в свой уютный аккаунт, где у него появляется возможность настроить параметры подписки. Можно добавить сюда настройку частоты отправки ваших новостей и уведомлений, а также возможность смены пароля от аккаунта и – поле «удалить аккаунт».
Таким образом, мы с вами рассмотрели, как можно продуманно сделать процесс подписки и управления аккаунтом так, чтобы он был максимально удобен для клиента и – вместе с тем – не привёл вас к потере лида. Мы привели здесь как можно больше вариантов и шагов, но те, которые вы выберете конкретно для вашего сайта - зависят от его тематики и целей. Так, для продающего сайта в эту стандартную цепочку нужно будет включить различные маркетинговые манипуляции. Для подписки на новые посты на новостном ресурсе можно значительно сократить количество шагов – взять адрес почты на сайте и включить возможность настройки аккаунта в следующее письмо рассылки. Тогда выглядеть весь процесс будет так:
Надеемся, наша инструкция была полезна для вас, и вы используете её для улучшения процесса подписки на ваши рассылки через сайт. Конечно, существуют ситуации, когда вам просто говорят как делать, и применить на практике хорошие в общем-то советы, приведённые в этой статье вам просто не дадут. В этом случае, если у вас конечно нет возможности или желания сменить работу, вы можете оставить процесс подписки таким, какой он у вас есть сейчас, даже если он вас не удовлетворяет. После чего посмотрите статистику - каков процесс отказов, сколько человек пришло на сайт и не зарегистрировалось, и - главное - сколько начало регистрироваться, но не завершило регистрацию. Таким образом, у вас появится фактическая аргументация по поводу того, что текущий процесс подписки на почтовые рассылки не работает. И возможно, вам удастся настроить этот процесс лучше.
О том, как грамотно организовать процесс отписки, мы напишем через неделю.
Для многих сайтов форма подписки стала неотъемлемой частью регистрации на сайте, а то и её заменой. Подписчикам это на руку, ведь данные можно заполнить всего раз и без проблем просматривать закрытые разделы сайта или получать выгодные предложения, быть постоянно в курсе ваших событий и обновлений.
Секреты создания эффективной формы подписки на рассылкуКрасивая и заметная форма подписки на сайт увеличит шансы на получение дополнительных контактов. С прискорбием замечу, что на многих отечественных сайтах форма сбора контактов надёжно спрятана и найти её не так-то просто, хотя она заслуживает самого видного места. Посетитель не должен блуждать по страницам, разыскивая её. Важно размещать форму не только на главной странице, но и ещё на нескольких, как напоминание о возможности подписаться на email-рассылку.
Два важных аспекта формы подписки для сайта:
- содержание
- дизайн
Наверняка, вы задаетесь вопросом, как сделать форму подписки на сайте? Итак, вот несколько советов по оформлению, которые можно попробовать, чтобы привлечь внимание посетителей к вашей форме.
Местонахождение формы подписки на рассылкуФорма подписки должна быть частью дизайна сайта, но выделяться на общем фоне так, чтобы это было гармонично и со вкусом. Форма регистрации не должна быть сложной задачей для подписчиков. Вот три заповеди для форм подписки, которые будут с большей вероятностью конвертировать посетителей в подписчиков:
- Делайте форму заметной
Чтобы посетители заполнили форму, важно, чтобы они её заметили на сайте. Если ваша форма подписки легко пропускается посетителям - вы бросаете деньги на ветер.
- Выделяйте форму подписки
Добавьте её в некий визуальный контейнер, выделив, как отдельное окно:
- Добавляйте направляющие
Обратите внимание на стрелки, указывающие на форму - люди подсознательно идут по следу. Также можно использовать образы людей со взглядом, направленным на форму подписки. Исследования THiNK Eye Tracking показали, что направленный взгляд на продукт, на 84% увеличивает шанс, что люди заметят его на странице, так почему бы это не использовать для формы?
- Делайте формы "сквозными"
- Используйте несколько форм
Если же вы используете всплывающие формы подписки, то убедитесь, что в футере есть ваши контакты, ссылки социальных сетей и строка подписки. Чтобы те, кто дочитает до конца, могли связаться с вами любым удобным способом, в том числе - подписаться на рассылку.
Описание в формеКлиентам не всегда охота отдавать свой адрес для сторонних рассылок и важно дать понять, что им это выгодно. Не обязательно расписывать все плюсы вашей рассылки, достаточно уместить всё в одно предложение. «Бесплатных», «уникальных» и «ограниченных» рассылок в сети тьма, поэтому прежде всего на том, что будет полезно для ваших клиентов.
- Контрастные призывы к действию на кнопке и в заголовке формы
- Не слишком ограничивайте
Надписи вроде: «Вы можете ввести пароль от 6 до 12 символов. Обязательно используя цифры и буквы, но без символов: %,*,?,&, №, # и т.д.» отталкивают. У пользователей может быть любимый придуманный пароль, который он использует на всех сайтах, чего ради теперь менять его и запоминать новый? Кроме того, сложная для понимания система паролей раздражает и может вызывать постоянные ошибки при заполнении.
Пускай клиенты вводят пароль, какой удобно им. Это же касается телефонных номеров, которые часто разбивают на 2-3 блока.
- Прекратите использовать капчи
Капчи стали настоящей головной болью для пользователей, а также убийцей значительной доли конверсии. Если картинка плохо отображается и клиент раз за разом ошибается при вводе - он может просто отказаться от подписки.
Обратите внимание, что здесь странного?
Да, поле расползлось по всей форме, а то и дальше. Хорошо продуманная форма должна быть с ровными, чёткими полями, а в идеале должен соответствовать длине этих полей или быть немного больше. Как пример:
Убедитесь, что ваша кнопка CTA достаточно большая и заметная. Выравнивание полей существенно не повлияет на конверсию, но может улучшить общую привлекательность формы.
Просмотрите свою форму, как лучше будут реагировать пользователи: когда надписи слева от полей заполнения, над полями или в самой строчке. Выберите тот вариант, который привлекает больше подписчиков.
Не заставляйте вводить одну и ту же информацию дважды. Если адрес доставки и адрес платежа находится в одном и том же месте - можно просто поставить флажок, а не повторно вводить данные. Довольно неудачный вариант:
Можно было просто отметить, на что подписываешься, а не вводить четыре раза свой email. Вряд ли один и тот же человек будет подписывать выбранные разделы на разные ящики.
- Делайте пошаговые формы
Можете разбивать форму подписки на новостную рассылку на 2-3 последовательных блока для удобства заполнения и визуального восприятия. Например, в интернет-магазине "Дочки-Сыночки" так выглядит первый шаг:
И, уже непосредственно с полем для емейла, второй.
Если вам не хватит двух шагов и потребуются дополнительные данные - рассмотрите возможность добавления страницы профиля на сайте, где пользователи смогут добавить информацию или изменить свои предпочтения.
- Давайте ссылку на политику конфиденциальности
Конечно, такой вариант слишком громоздкий, но тоже имеет право на жизнь. Клиент видит, что за спам отправители будут нести ответственность.
- Разделяйте по интересам
Чтобы сразу "на входе" вовлечь подписчика - попробуйте использовать . В зависимости от предпочтений подписчика ему и будут отправляться письма только выбранной тематики.
- Тестируйте форму подписки
Возможно, что-то в вашей форме будет не так, как вы задумали. Для любого сайта важно всё время экспериментировать с формой подписки и анализировать результаты. Только так вы узнаете, что лучше работает конкретно для вашего сайта. Периодически меняйте местонахождение формы подписки на сайте и смотрите, какой вариант приносит больше результата.
Используйте интерактивные формы, меняйте предложения.
И ещё:- Размещайте на сайт полезный контент. Чтобы не пропустить ваши обновления, клиенты сами будут подписываться на рассылки.
Указывайте в описании, что данные о подписчиках не продаются и вы не занимаетесь спам-рассылками, а отправляете только тематические материалы, от которых легко отписаться.
Акцентируйте на том, что подписчики будут получать информацию раньше тех, кто не подписан. Указывайте периодичность или дату последней рассылки.
Делайте дизайн простым и интуитивно понятным. Не загружайте форму длинными описаниями достоинств вашей рассылки - достаточно нескольких основных пунктов.
Отправляйте оптимизированное и классное приветственное письмо, которое будут получать новички. Это не способствует росту базы, но предотвращает её уменьшение.
Делайте лёгким возвращение после процесса подписки на сайт. Посетители могут захотеть попасть на другие страницы, чтобы изучить их более детально.
Чем проще и в то же время убедительнее будет ваша подписная форма - тем больше посетителей сайта обратят на неё внимание и захотят подписаться, а следовательно и вырастет база подписчиков. Форма подписки на рассылку сайта должна быть заметной, и со вкусом выделяться на общем фоне.
P.S . Если вам понадобится помощь в создании классного email письма - оставляйте и мы вам подготовим красивый, современный шаблон письма в вашем аккаунте eSputnik абсолютно бесплатно ;)
UP 2017. Сервис Smartresponder больше не существует 🙁
Почтовые рассылки – дело нужное во всех смыслах. Насколько могу судить по доступной мне статистике, большинство особенно начинающих пользователей сегодня предпочитают не создавать закладки, а получать новости с любых сайтов на почту. Мне кажется, что этот способ получения информации вряд ли себя изживет. Он и старый как интернет, и удобный.
Что касается блогов на движке , то здесь возможности по созданию и ведению рассылки огромные. Кстати, вести рассылку на мыло выгодно не только для информационных блогов, типа моего, но и в особенности для сайтов интернет-магазинов, все зависит от креативности подхода.
Так вот, фреймворк WordPress в качестве основы для рассылок – непаханое поле, но здесь есть некоторые ограничения. Если блог/сайт имеет пару сотен посетителей, то и подписчиков, соответственно, немного, что логично. И любой из плагинов, на основе которых WordPress предлагает создать свою рассылку, будет работать надежно и беспроблемно.
Но как только блог обзаведется своей собственной базой подписчиков, станет более-менее популярным (имеется в виду – возрастет количество посетителей), то плагину рассылок (которые во множественном числе предлагает WordPress) придется создавать тысячи запросов к базе данных, нагружать сервер, тратить процессорные мощности – в общем, всяческим образом тормозить ресурс.
Такого «счастья» не нужно никому, и возникает проблема – как решить вопрос с рассылками на стороннем сервере? Декстопный вариант я тоже не рассматриваю, потому что постоянно «грузить» свой компьютер – это тоже не лучший вариант. Но желательно сделать так, чтобы всю нагрузку по почтовым рассылкам принимал на себя сторонний сервер, но при этом чтобы отправной точкой рассылки все же оставался наш сайт.
Решение есть и оно довольно простое – интернет просто кишит всякого рода сервисами рассылок, наперебой предлагающими свои услуги, но лидирующее место принадлежит . Вот им я и предлагаю воспользоваться, на сегодняшний день этот сервис самый крутой среди себе подобных. А ниже я немного познакомлю вас с этим сервисом, и расскажу как им пользоваться.
Знакомимся с рассылкой на Smartresponder– сервис весьма известный и очень функциональный, но если им не управлять должным образом, то он можно сказать в какой-то степени навязчивый. Что я имею в виду? Многие пользователи интернет подписываются на интересующие их новости, не глядя на то, что им предлагают, так сказать, в «довесок». А таким довеском могут быть совершенно ненужные вам рассылки. Но это — дело внимательности каждого подписчика. Наше же с вами дело – извлечь из рассылки Smartresponder максимальную пользу с минимальным вредом для себя, своих посетителей и подписчиков.
Один из известных способов – не просто пользоваться этим сервисом в предлагаемом стандартном режиме (как стороннюю рассылку), а установить форму рассылки на свой сайт или блог. И не просто установить, а сделать эту форму оригинальной, необычной, такой, которой нет ни у кого. Средствами самого Smartresponder это сделать не получится – у него есть несколько стандартных вариантов оформления формы рассылки, но не более, и здесь здорово не разгуляешься в смысле корректировки дизайна подписки. Вот часть эти форм подписок, которые можно брать бесплатно:
Как видите, в смысле предложений дизайна все довольно грустно – не для всякого сайта подойдет такое оформление, да и как я уже говорил, присутствует много ненужного в коде рассылки, например:
1. Первое – никому не нужно еще одно подключение — оно лишнее.
2. Много всевозможных дублирующих соединений, которые уже провел ваш WordPress. Например, определение кодировки.
3. Всякие формы в форме, div-ы и прочие элементы css, которые можно значительно сократить.
Другое дело – на основе этой самой стандартной рассылки создать свою форму, которая бы идеально вписывалась в дизайн нашего блога. Конечно, здесь нужны хотя бы минимальные знания CSS, и , но в крайнем случае уже можно немного раскошелиться на программиста. За такую работу возьмут копейки, зато какая польза будет.
И совершенно не нужно брать за скелет формы код из смартреспондера – он слишком изобилует всякими нубовскими наворотами, никому не нужными. Простой хороший код, хороший минимум нагрузки на БД и сервер, хорошее эффективное внешнее оформление – что еще нужно человеку, чтобы достойно встретить читателя?
Нажав на кнопку «Попробовать бесплатно» (показано выше), переходим на страницу регистрации. Здесь все банально – заполняете поля и попадаете на следующую страницу, где вам будет предложено изложить более подробную информацию о себе. Думаю, есть смысл правильно, не выдумывая, заполнить все поля – наши подписчики живые люди, и им будет приятно видеть, что с ними общается не выдуманный Вася Пупкин, а обычный живой человек. Заполнив все необходимые поля, вы перемещаетесь на страницу, где в верхнем меню увидите заветную кнопочку «Создать новую рассылку».
Создание своей рассылки и формы отправкиСобственно, форма отправки письма нам не нужна, если мы собрались ваять собственную – нам нужен только идентификатор, ради которого вся эта суета и затевалась. Поэтому продолжаем тем, что начинаем создавать новую рассылку с целью выудить из нее наш ID. Для этого в предлагаемой форме снова заполняем все, что нам предлагают заполнить (нужные поля отмечены звездочкой). Здесь, в принципе, название и описание рассылки не критично – эта информация предназначена только для нас. Остальное определяет периодичность выпуска рассылок, нашу подпись в письмах и наш почтовый адрес.
Теперь жмем «Создать новую рассылку», и ура! Мы стали счастливым обладателем новенькой, блестящей, набитой до отказа подписчиками рассылки на нашем блоге! Осталось дело за малым – выудить свой идентификатор из вновь созданной рассылки и начать создание своего собственного шедевра формы рассылки на его основе. Подведем промежуточные итоги – для чего все же нам нужен этот ID, если кто-то не понял?
1. Мы избавляемся от лишнего плагина рассылок, если он был, или предотвращаем его расходную и поэтому ненужную установку. А это – прямая экономия энергоресурсов нашего сайта
2. Мы получаем доступ к услугам стороннего сервиса, который безропотно выдержит все нагрузки, исходящие от нашей базы подписчиков, даже если их будет десятки тысяч.
3. Мы получаем возможность настроить свою собственную рассылку так, как нам удобно, и что еще более удобно – все это можно сделать на русском языке, в отличие от многих WordPress плагинов, не переведенных на русский язык и не собирающихся им обзаводиться.
4. Минимизируем и оптимизируем html и коды, что тоже есть хорошо.
А номер нашего идентификатора мы увидим здесь:
Это в меню «Рассылки» — «Списки рассылок». Теперь можно приступать к главному процессу. Собственно, я предложу пару форм, в которых будет работать все тот же идентификатор , но с возможностью их полной перестройки под ваши нужды. То есть, можно самостоятельно изменить внешний вид рассылки до неузнаваемости.
Собственная форма подпискиИтак, форма № 1. Вот ее код:
| [ php] < h3> Подпишись на новости блога: < forma onsubmit= "return SR_submit(this)" method= "post" action= target= "_blank" name= "SR_form_2_61" > < input type= "hidden" value= "1" name= "version" /> < input type= "hidden" value= "0" name= "tid" /> < input type= "hidden" value= "" name= "uid" /> < input type= "hidden" value= "ru" name= "lang" /> < input type= "hidden" value= "000000" name= "did" /> < div id= "optin" > < input type= "text" tabindex= "900" onblur= onfocus= value= "Ваше Имя" class = "name" name= "field_name_first" /> < input type= "text" tabindex= "901" onblur= "if(this.value=="")this.value=this.defaultValue;" onfocus= "if(this.value==this.defaultValue)this.value="";" value= "Ваш E-Mail" class = "email" name= "field_email" /> < input type= "submit" value= "Хочу получать новости!" name= "SR_submitButton" /> [ / php] |
Подпишись на новости блога:
Как видим, ничего лишнего по сравнению с сотнями строк в смартреспондере. Стили мы зададим тоже свои:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | [ php] 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; } [ / php] |
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, который уже понемногу начинает помирать. То есть, я просто взял ее внешний вид, а код оставил практически прежний, за небольшим исключением:
Здесь я тоже оформил все в минималистичном стиле, но при желании можно все это переделать на свой лад. Вот код самой формы рассылки:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | [ php] < div id= "donate" >< strong> Введите свой электронный адрес и получите книгу в подарок: < forma onsubmit= "return SR_submit(this)" method= "post" action= "http://smartresponder.ru/subscribe.html" target= "_blank" name= "SR_form_2_61" > < input type= "hidden" value= "1" name= "version" /> < input type= "hidden" value= "0" name= "tid" /> < input type= "hidden" value= "" name= "uid" /> < input type= "hidden" value= "ru" name= "lang" /> < input type= "hidden" value= "000000" name= "did" /> < div id= "optin" > < input type= "text" tabindex= "901" onblur= "if(this.value=="")this.value=this.defaultValue;" onfocus= "if(this.value==this.defaultValue)this.value="";" value= "Ваш E-Mail" class = "email" name= "field_email" /> < input type= "submit" value= "Подписаться по e-mail на последние новости сайта" name= "SR_submitButton" /> [ / php] |
Введите свой электронный адрес и получите книгу в подарок:
Приветствую вас уважаемые друзья, коллеги! Сегодня я научу вас тому, как сделать красивую форму подписки для своего сайта.
Не просто одну, форму подписки, а как делать разные формы подписки, очень красивые, с высокой конверсией, привлекающие внимание, приятные для глаз наших уважаемых посетителей…
С такими формами мы будем значительно выделяться из общей массы всей интернет толпы! Расскажу вам, в чем разница между обычными (стандартными) формами и формами, которые вы создадите после изучения моей статьи.
Среди вас наверняка есть те, у кого нет вообще формы подписки на сайте, не то что бы красивой, а вообще ни какой! И это очень печально, сейчас эпоха подписных баз, нужно обязательно иметь свою подписную базу (рассылку) и не просто что бы она была, а ее нужно постоянно увеличивать. В разы! Наличие подписной базы сейчас решает многое, это и есть ваш актив, то, что будет постоянно класть денюшку к вам в карман.
Формы подписки обязательно должны находиться на нашем сайте, в разных местах, на разных страницах. Расположение их должно зависеть от их видимости, доступности. Красивая и удобная форма подписки на вашу рассылку должна находиться на самом виду для посетителя! Не в коем случае не одна и не на одной, отдельной странице вашего блога. Чем проще подписаться, тем больше будет конверсия!
Как создать форму подписки (для новичков!)Статья будет большая, поэтому запаситесь терпением и интересом, вы многому научитесь!
На протяжении всей статьи мы будем работать только с одним сервисом 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; }
Точно также как и в предыдущем случае, указывайте все верно!
Где узнать номер своей рассылки smartpesponder (id рассылки и id канала)Давайте покажу вам где в коде формы подписки находятся id вашей рассылки и id канала.
Узнать id канала вы можете в «статистика» — «каналы для форм подписки»:
Друзья суть этого поста не в том что бы за вас сделать супер красивые формы подписки , например 100 штук и раздать вам код и показать как их у себя настроить, а в том что бы вы научились делать свои формы подписки другими, не такими как у всех! Я старался объяснить так что бы вы поняли как это нужно делать!
Графики море, недорогой, ее можно легко использовать в ваших формах подписки. Кнопки, фон, все это легко туда присобачить! Можно попробовать сделать это несколько раз и все станет ясно, чем постоянно покупать комплекты дорогой графики и еще и идти на фриланс для того что бы вам их сверстали!
Друзья, я стараюсь писать для вас интересно и подробно, ну и поэтому получается такой большой текст! Под ключевые запросы я его практически не затачивал, потому что пишу о том что думаю, сразу из головы, а не думаю как написать что бы вставить ключ! Сейчас уже начинаю подумывать о значительном расширении области контента моего любимого блога! Кстати, что вы скажете на этот счет? Нужно расширять? Или оставить пока так!
В следующей статье я расскажу о новом генераторе форм от сервиса Smartresponder.ru и постараюсь вам дать больше уже готовых вариантов. А также показать еще какие-нибудь хитрости с внешним видом форм подписок. Подписывайтесь на обновления!
На этом я заканчиваю и надеюсь что вы все таки почерпнете что нибудь полезное для себя из этого материала! Удачи, Пока!
Здесь вы можете скачать уникальные шаблоны для Blogger . Темы данной подборки отличаются более продвинутой SEO оптимизацией .
Языки : Английский, Русский.
Типы : Новостные, Журнальные, Блог, Минимализм, Портфолио, Одностраничные, Галерея, Grid "сетка", Интернет магазин, Визитки, Корпоративные сайты.
Тематики : Спорт, Фотографии, Игры, Кулинария, Стиль и мода, Женские, Детские, Автомобили, Здоровье, Путешествия, Туризм, Дизайн, Ремонт домов, Интерьер, Природа, Животные, Танцы, Видео, Музыка, Политика, Экономика, Бизнес, Форекс, Искусство, Картинки, Обои, Заработок, Недвижимость, Рыбалка, Охота, Софт, Программное обеспечение, Игровые приложения Android.
Технологии : Jquery, AMP, Bootstrap, Ajax, Javascript, Адаптивный дизайн.
Лучшие шаблоны blogger, выбор пользователей
UberSpot отличное решение для тех, кому важен красивый дизайн, SEO оптимизация и эффективный функционал. В этой теме вы найдете ряд крутых и продуктивных новинок, например новый виджет Инстаграма, Карты сайта, Публикаций, Комментариев и др.. Так же вы сможете воспользоваться двумя разными типами макетов.
Unstoppable "Покоритель ниш". Это идеальное решение для однотематических сайтов и блогов. Задумка при создании темы была в том, чтобы реализовать бесконечную навигацию, передвижение по которой смогут отслеживать поисковые системы. Таким образом новая система навигации в отличии от предыдущих не просто увеличит поведенческий фактор, но и в полной мере отобразит его, что повлечет за собой рост позиций сайта в поиске.
Сконструирован на базе новых Тем Блоггер из серии (СNES). Способен решать много поставленных задач. Можете использовать его со всеми виджетами, или частично, как персональный информационный блог. Скорость загрузки страниц приятно удивит.
BlogBoard один из лучших гридеров в 2018 году. Совмещает сразу несколько стилей. Можно использовать под блог-интернет магазин. Он отлично справится с презентацией ваших навыков и услуг так что подойдет и для портфолио.
Dionis обладает упрощенным типом подачи сообщений. Подойдет для любых ниш и историй. Из фишек можно выделить красивый preloader (анимационная картинка перед загрузкой главной страницы), рекомендуемые сообщения всплывают с правой стороны при скроллинге страницы.
Это быстрая и гибкая модель, которая впитала в себя несколько дополнений из социальных сетей. Отличный вариант для тех кто ценит свое время. Переведен на русский язык.
Mistik обладает четырьмя разными стилями. Вы можете выбрать себе тот, который вам больше всего приглянется. Легкая настройка меню, цветовых гамм и остальных элементов, позволяют создать свой уникальный дизайн.
NewsB - это легкая, новостная тема, с комбинированной цветовой гаммой, простыми и в тот же момент стильными виджетами, созданными для различных тематик и категорий контента. NewsB полностью адаптивный и без проблем поддерживается всеми современными браузерами. Полная версия включает новейшие на сегодняшний день блогеровские SEO настройки, что позволит вашему сайту поднять свой рейтинг в поисковых системах еще выше.
Minima Mag - это современный новостной шаблон, с адаптивным дизайном, быстрой загрузкой сообщений, стильными гаджетами и конечно же с чистым дизайном в котором плавно сочетаются три цвета, что в итоге делает Minima Mag опрятным и элегантным.
Потрясающая тема с классическим стилем, предназначенная для женских сайтов и блогов. Avicia это профессиональная тема с элегантным и современным дизайном, которая способна вдохновлять и передавать читателям только положительными эмоциями.
Dream Press, входит в число лучших тем blogger. В нем вы увидите современный, элегантный, стильный и простой дизайн. В целом, все эти качества помогут удержать читателя на сайте.
Единственное, что вам нужно знать об ExGPress это то, что он обладает самым удобным функционалом, под стать социальной сети, что обеспечит вашему сайту большой процент возвращений. Ко всему можно добавить SEO оптимизацию, высокую скорость загрузки и большой запас места для гаджетов и рекламы. ExGPress прорабатывался специально для комфортного просмотра контента и наилучшего взаимодействия с поисковыми системами, именно это делает его одним из лучших шаблонов для blogger на сегодняшний день. На днях добавили ему новую функцию, плавающие сайдбары, при прокрутке страницы вниз или вверх сайдбары с виджетами перемещаются вслед за скроллингом.
Grid Line это современный и стильный шаблон для blogspot. Все его элементы тщательно отобраны, оптимизированы и выстроены таким способом, чтобы максимально сконцентрировать внимание читателя на контенте. Grid Line был создан не только для успешного продвижения вашего веб-ресурса в поисковых системах, но и для того, чтобы поднимать настроение его пользователям и читателям.