Элитные подписные формы для блога или подписной страницы (2019)

Элитные подписные формы для блога или подписной страницы

ОБНОВЛЕНО: 2019

Как Вы считаете, нужно ли делать подписные формы на блоге красивыми и заметными, если человек активно занимается инфобизнесом? Важно ли инфобизнесмену понимать, что красивое притягивает, а также учитывать, что непринужденная динамика — это фактор привлечения естественного внимания?

Факт таков, что подписная форма сама по себе подразумевает действие. Сложно добиться действия со стороны потенциального подписчика, если форма незаметная, коряво исполнена и вместо призывного (рекламного) текста (заголовок, подзаголовок, пули) на ней только набившее оскомину: «Книга бесплатно в подарок».

Ближе к делу... Решил за Вас две проблемы:
1) спроектировал несколько вариантов шаблонов подписных форм для личного использования;
2) эстетичный подход и эффективное решение, нацеленное на конкретный результат (при помощи дизайна добиться захвата внимания потенциального подписчика).

Формы динамичны и приковывают внимание:


Дизайн формы отвечает лишь за 50% продвижения к цели, для 100% результата необходимо выполнить 4 основные задачи:
1) привлечь внимание;
2) вызвать интерес;
3) захватить внимание и побудить к действию;
4) обеспечить выполнение определенного действия (ввести личные данные, нажать на кнопку).

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

Формы не должны быть формальными, т.е., простыми инпутами на белом фоне, хотя в этом нет ничего плохого. Также они не должны быть помпезно-навязчивыми, поскольку это, хоть и естественно привлечет внимание, но и отпугнет.
Если говорить о дизайне подписных форм более детально, то, несомненно, нужно начать с колористики. Цвета, тона, полутона — должны соответствовать колористике самого сайта, поскольку пестрый сайт — это не профессионально, а скорее по-детски... Конечно, в этом нет ничего плохого, если сайт детской тематики.

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

Немаловажные факторы, конечно, сам текст в форме и фото товара, а также соответствие того и другого колористике и стилистике формы (да и самому сайту). Подписная форма — это элемент дизайна сайта, поэтому и шрифт и картинки должны ему соответствовать.
Можно и поэкспериментировать, главное, чтобы человек понимал, что при нажатии кнопки он получит Вашу бесплатность, а не «развод» (например партнерский линк), т.е, переход на чужой сайт.

Подписная форма — это как билет к решению проблемы,

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

Кратко о формах, которые я сделал именно для Вас:

Два авторских дизайна + два дополнительных варианта для выбора;

Каждая форма настроена для: SendPulse, GetResponse и FalconSender.

простота установки + видеоинструкция для ясности.


 СКАЧАТЬ


КАК установить:

1. | Скачиваем .zip архив
(в котором папка «eof-free_files»)

2. | Открываем файл EliteOptinForms_free.css

В папке находится файл «EliteOptinForms_free.css», в нем Вам нужно указать правильный путь к картинке (фон подписной формы). Для первой формы это 38 строка, для второй формы — 63 строка, для третьей — 91 строка, а для четвертой — 116 строка. Открывайте файл в программе NotePad++, или Brackets (mac)

ВАЖНО! Если устанавливаете на WordPress(или на любую другую CMS систему), то я рекомендую указывать полный путь к файлам, т.е. начиная с http/https.

3. | Копируем код выбранного варианта:

Ниже, в каждом варианте я выделил зеленым места, где Вам нужно указать правильный путь к CSS файлу и картинке. И тут мы указываем полный путь к файлам, т.е. начиная с http/https (если устанавливаете на блог).

ДИЗАЙН 1.

<!--===== Elite Opt-in Form 2.0 (FREE version) =====-->
<div id="elite_optin_form_free" class="elite_optin_form_free_01">
    <style type="text/css">@import url('eof-free_files/EliteOptinForms_free.css');</style>
<!-- ЗАГОЛОВОК -->
<div class="priziv1">Как Я Заработал $57045 на YouTube!</div>
<!-- КАРТИНКА -->
<img class="eof_free_kartinka" src="eof-free_files/images/kartinka1.png" alt="" title="">
<!-- ПРИЗЫВ под картинкой -->
<div class="priziv2">Узнайте как у меня это получилось хоть прямо сейчас:</div>
<div class="eof_free_form_bg">
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" />
<input type="submit" value="Узнать СЕЙЧАС ➤" />
</form>
<!-- / ФОРМА -->
</div>
<!-- ВСТАВЬТЕ вместо # свою URL ссылку  -->
<div class="eof-free_confident"><a href="#">Конфиденциальность</a> | НЕТ спаму</div>
</div>
<!--===== / Elite Opt-in Form 2.0 (FREE version) =====-->

ДИЗАЙН 2.

<!--===== Elite Opt-in Form 2.0 (FREE version) =====-->
<div id="elite_optin_form_free" class="elite_optin_form_free_02">
    <style type="text/css">@import url('eof-free_files/EliteOptinForms_free.css');</style>
<!-- ЗАГОЛОВОК -->
<div class="priziv1">Как Я Заработал $57045 на YouTube!</div>
<div class="priziv2">БЕСПЛАТНЫЙ видеокурс со всеми ниндзя-секретами.</div>
<!-- КАРТИНКА -->
<img class="eof_free_kartinka" src="eof-free_files/images/kartinka2.jpg" alt="" title="">
<div class="eof_free_form_bg">
<div class="priziv3">Введите необходимые данные внизу, чтобы узнать как:</div>
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" />
<input type="submit" value="Узнать СЕЙЧАС ➤" />
</form>
<!-- / ФОРМА -->
</div>
<!-- ВСТАВЬТЕ вместо # свою URL ссылку  -->
<div class="eof-free_confident"><a href="#">Конфиденциальность</a> | НЕТ спаму</div>
</div>
<!--===== / Elite Opt-in Form 2.0 (FREE version) =====-->

ДИЗАЙН 3.

<!--===== Elite Opt-in Form 2.0 (FREE version) =====-->
<div id="elite_optin_form_free" class="elite_optin_form_free_03">
    <style type="text/css">@import url('eof-free_files/EliteOptinForms_free.css');</style>
<!-- ЗАГОЛОВОК -->
<div class="priziv1">Как Я Заработала $57045 на YouTube!</div>
<!-- КАРТИНКА -->
<img class="eof_free_kartinka" src="eof-free_files/images/kartinka1.png" alt="" title="">
<!-- ПРИЗЫВ под картинкой -->
<div class="priziv2">Узнайте как у меня это получилось хоть прямо сейчас:</div>
<div class="eof_free_form_bg">
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" />
<input type="submit" value="Узнать СЕЙЧАС ➤" />
</form>
<!-- / ФОРМА -->
</div>
<!-- ВСТАВЬТЕ вместо # свою URL ссылку  -->
<div class="eof-free_confident"><a href="#">Конфиденциальность</a> | НЕТ спаму</div>
</div>
<!--===== / Elite Opt-in Form 2.0 (FREE version) =====-->

ДИЗАЙН 4.

<!--=== Elite Opt-in Form 2.0 (FREE version) ===-->
<div id="elite_optin_form_free" class="elite_optin_form_free_04">
    <style type="text/css">@import url('eof-free_files/EliteOptinForms_free.css');</style>
<!-- ЗАГОЛОВОК -->
<div class="priziv1">Как Я Заработала $57045 на YouTube!</div>
<div class="priziv2">БЕСПЛАТНЫЙ видеокурс со всеми ниндзя-секретами.</div>
<!-- КАРТИНКА -->
<img class="eof_free_kartinka" src="eof-free_files/images/kartinka2.jpg" alt="" title="">
<div class="eof_free_form_bg">
<div class="priziv3">Введите необходимые данные внизу, чтобы узнать как:</div>
<!-- ФОРМА -->
<form>
<input class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" />
<input class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" />
<input type="submit" value="Узнать СЕЙЧАС ➤" />
</form>
<!-- / ФОРМА -->
</div>
<!-- ВСТАВЬТЕ вместо # свою URL ссылку  -->
<div class="eof-free_confident"><a href="#">Конфиденциальность</a> | НЕТ спаму</div>
</div>
<!--===== / Elite Opt-in Form 2.0 (FREE version) =====-->

ПОДКЛЮЧАЕМ форму:

КАК подключить SendPulse тут:

Создать код формы подписки в сервисе: SendPulse

ИНСТРУКЦИЯ подключения: КАК подключить SendPulse

<!-- ======= SendPulse ======= -->
<!-- Как подключить? Смотрите видеоинструкцию: https://sergeychunkevich.com/SendPulse-video -->
<div class="sp-form sp-form-regular sp-form-embed"> 
<div class="sp-message"><div></div></div>
<div id="droppableArea" class="sp-element-container ui-sortable ui-droppable">
<!-- Имя -->
<div class="rubizproject-optin_input" sp-id="0000000000000000">
<input type="text" sp-type="input" name="sform[00000000]" class="rubizproject-optin_name" placeholder="Введите Ваше Имя" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%7D" spellcheck="false" autocorrect="off" required="required">
</div>
<!-- Email -->
<div class="rubizproject-optin_input" sp-id="0000000000000000">
<input type="email" sp-type="email" name="sform[email]" class="rubizproject-optin_email" placeholder="Введите Ваш Email" sp-tips="%7B%22required%22%3A%22%D0%9E%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D0%BF%D0%BE%D0%BB%D0%B5%22%2C%22wrong%22%3A%22%D0%9D%D0%B5%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20email-%D0%B0%D0%B4%D1%80%D0%B5%D1%81%22%7D" spellcheck="false" autocorrect="off" required="required">
</div>
</div>
<!-- Кнопка -->
<div class="rubizproject-optin_button" sp-id="0000000000000000">
<button id="0000000000000000" class="sp-button">Получить прямо СЕЙЧАС ➤</button>
</div>
</div>
<script type="text/javascript" src="//cdn.sendpulse.com/apps/fc3/build/default-handler.js"></script>
<!-- ======= / SendPulse ======= -->

КАК подключить GetResponse тут:

Создать код формы подписки в сервисе: GetResponse

ИНСТРУКЦИЯ подключения: КАК подключить GetResponse

<!-- ======= GetResponse ======= -->
<!-- Как подключить? Смотрите видеоинструкцию: https://sergeychunkevich.com/GetResponse-video -->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<!-- Имя -->
<input class="rubizproject-optin_name" type="text" name="first_name" placeholder="Введите Ваше Имя" autocomplete="name" x-autocompletetype="name" spellcheck="false" autocapitalize="off" autocorrect="off"/><br/>
<!-- Email -->
<input class="rubizproject-optin_email" type="text" name="email" placeholder="Введите Ваш E-Mail"  autocomplete="email" x-autocompletetype="email" spellcheck="false" autocapitalize="off" autocorrect="off"/><br/>
<!-- ID Кампании (вставьте вместо пяти звездочек ниже) -->
<input type="hidden" name="campaign_token" value="*****" />
<!-- Страница благодарности (по желанию) -->
<input type="hidden" name="thankyou_url" value=""/>
<!-- Обязательная строка, если страница благодарности активна -->
<input type="hidden" name="forward_data" value="" />
<!-- Кнопка подписаться -->
<input type="submit" value="Получить прямо СЕЙЧАС ➤"/>
</form>
<!-- ======= / GetResponse ======= -->

КАК подключить FalconSender тут:

Создать код формы подписки в сервисе: FalconSender

ИНСТРУКЦИЯ подключения: КАК подключить FalconSender

<!--======= FalconSender =======-->
<!-- Как подключить? Смотрите инструкцию: https://sergeychunkevich.com/FalconSender-instruction -->
<form method="post" action="https://falconsender.ru/subscribe.html" >
<div class="rbp-input">
<!-- Имя -->
<input name="field_name_first" class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" autocomplete="off" required />
<!-- Email -->
<input name="field_email" class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" autocomplete="off" required />
<!-- Кнопка подписаться -->
<input type="submit" value="Получить прямо СЕЙЧАС ➤" />
<!-- ВСТАВЬТЕ СЮДА ТРИ ИНПУТА -->
</div>
</form>
<!--======= / FalconSender =======-->

У Вас другой сервис? Нет проблем! Напишите мне, и решим проблему вместе :)


Поделиться или сохранить:
  • 18
    Shares

Также интересно…

Добавить комментарий ВКонтакте


37 комментариев

  1. Сергей приветствую, почему в комплекте с формами нет шаблонов для Justclick?

  2. Антон:

    Сергей, в первую очередь спасибо за ваш труд! Всегда с удовольствием читаю ваши редкие письма:)

  3. Спасибо большое, Сергей! Отличный подарок к Новому году.

    С Наступающим Вас, Волшебного Нового года!

  4. Алексей:

    Сергей, спасибо большое за интересные и полезные сведения. Буду применять Ваши уроки на практике

  5. Татьяна:

    Простота, элегантность... У Вас свой, неповторимый стиль. Я в восторге! Кстати, Ваших подписных форм в И-нете довольно много. Огромная Вам благодарность.

    С праздниками Вас, ВСЕХ БЛАГ!!!

    С глубоким уважением и признательностью.

  6. Валерий:

    Сергей С Наступающим!!!

    Отличная работа

    Классное видео

    Проф озвучка

    С пожеланием всех благ в Новом году!

    Творческого подъема, финансового роста!!!

  7. Валерий:

    Не с того адреса заехал))

  8. Сергей, с Наступающим Новым Годом!

    Спасибо за Ваш профессионализм. Отличные формы подписки. Да все классно сделано — и страницы и формы, особенно на фоне того, что всякая фигня продается за деньги.

  9. Сергей, спасибо за отличные страницы и за то, что делаешь рунет лучше! Такие страницы действительно хочется лизнуть! С наступающим и новых успехов в 2014 году!

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

    • Да-да, Сергей, со звуком так уж получилось...Я только потом заметил, когда записал все видео, отредактировал и закачал на ютуб. В программе вроде звучало прилично...Опыт получен. Учту это дело на будущее.

  11. Виктория:

    Сергей, живое видео в нижнем углу экрана очень сильно отвлекает от урока. Ваша мужская харизма просто зашкаливает все мыслимые нормы. 🙂

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

    1. Вначале идёт Ваше видео-обращение к слушателям в живую.

    2. Затем запись экрана монитора, то есть сам видео урок, плюс просто приятный закадровый голос.

    Но это только моё женское мнение. Так как лично мне пришлось просматривать видео дважды.

    Первый раз я просто слушала и любовалась диктором.

    И уже только при втором просмотре я пыталась вникнуть в сам видеоматериал, прикрыв живое видео листочком бумаги. 🙂

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

    • 🙂 Видео со мною создает «эффект присутствия», что обычно воспринимается очень позитивно. Согласен, может и отвлекать — но быстро привыкаешь, да и само видео приобретает доверительность, за чем следует и само доверие со стороны зрителя.

      • Виктория:

        Да, действительно, после пятого просмотра я совершенно привыкла 🙂

        Меня немного расстраивает то, что Ваша форма не проходит проверку на валидаторе: validator.w3.org/unicorn/

        • 🙂 Виктория, а Вы гляньте на ошибки, которые показывает валидатор.

          И еще, Виктория,

          запасайтесь своим любимым лакомством,

          заварите себе свой любимый напиток,

          усядьтесь в кресле по удобнее и прочтите это:

          Нужна ли HTML-валидация?!

          думаю эта статья Вам будет очень интересна.

  12. Вика:

    Здравствуйте, Сергей!

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

    Заранее спасибо!

    • Вика:

      Извините, ошибка! Так записывают урОки многие инфобизнесмены.

    • Вика, именно так я и делал, только я не с макбука, а с имака записывал. Делается это в программе ScreenFlow. Включите программу и выберите записывать видео так же и с камеры. Программа записывает весь экран, а после можно настроить как пожелаете: и само видео с камеры(размеры, фильтры), и место записи.

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

      Есть много и других программ, которые так же могут записать видео с камеры, но все же эта программа стоит своих 70 евро.

  13. Александр:

    Сергей приветствую! Большое спасибо за обновление буду использовать.

    Отдельное спасибо за видио.

    Сергей С Наступающим !!!

  14. Tina:

    Сергей, приветствую!

    Благодарю за подарок!

    Как всегда — качественно, доступно, понятно!

  15. Tina:

    Сергей, с НАСТУПАЮЩИМ!

    Творческих успехов!

  16. Установил Squeeze Page Lite 2.1 Dark — и отредактировал, всё вышло

    Есть вопрос

    Человек на первой странице подписался, со второй получил спасибо, в третьей идут копки для скачивания

    Подскажите, как сделать, чтобы эти кнопки заработали

    Сейчас при нажатии они отсылают сами на себя

    В подписи ссылка на страницу подписки (сделано ещё не всё)

    • Здравствуйте, Сергей!

      Все на самом деле просто.

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

      [sourcecode language="plain"]

      <a href="#">Скачать Материал</a>

      [/sourcecode]

      Как Вы заметили, то линк в этом случае решетка «#», т.е. нажимая на кнопку вас перенаправляет на главную — так обычно делают веб-дизайнеры.

      Чтобы привязать материал к кнопке, нужно указать прямой линк(вместо решетки) к файлу:

      [sourcecode language="plain"]

      <a href="download-folder/ЛюбойФайл.zip">Скачать Материал</a>

      [/sourcecode]

      • Спасибо за ответ. Действительно просто, когда известно.

        Squeeze Page Lite 2.1 Dark установил на JustClick

        Ситуация такая:

        Когда повторно подписываюсь на первой странице, то:

        1)в случае, если нет ссылки (ставлю при получении кода от JustClick) на вторую страницу со «спасибо», тогда JustClick выдаёт оповещение — «вы повторно подписываетесь» и дальше никуда не перенаправляет

        2)в случае, если ссылка есть на страницу «спасибо», то никакого предупреждения не выводится, показывается страница со «спасибо», но на почту подписчика ничего не приходит

        Вопрос: Как поступить?

        Отказаться от страницы со «спасибо»

        Либо я чего-то не донастроил

        p.s.

        Если бы в комментариях у вас была бы форма с « Уведомить меня в случае ответа на мой комментарий», это было бы хорошо

        • Сергей, ситуация в 1-м случае не совсем понятна. Если вы проверяли по своему e-mail, то ответ JustClick очевиден.

          А по 2-й, вы активировали серию писем в автоматическую рассылку на JustClick? Проверьте. Если вы создали рассылку, но не включили ее в неразрывную серию, по подписчикам ничего не будет уходить.

  17. Регина:

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

    • Регина, пришлите мне линк на Ваш сайт используя баннер слева(на моем сайте). Я гляну в код, а потом напишу Вам, что именно необходимо сделать. Идет? ...Или пришлите мне ссылку на архив с сайтом, где уже установлена обложка.

  18. Александр:

    Просто суперские подписные формы! Опять меня выручает Ваш труд! Огромное спасибо за Ваш труд!

  19. Сергей, огромное вам спасибо!

    Формы очень красивые, и на видео все просто и доходчиво объясняете. Подключила вашу форму, протестировала подписку — не нарадуюсь!

    Единственное: после отправки формы (нажатия на кнопку) не очишщаются поля формы, это немного странно с точки зрения пользователя.

    Но может позже постараюсь разобраться с этим.

    Еще раз спасибо!

  20. Андрей Илюшечкин:

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

  21. Михаил:

    sergeychunkevich.com/eof-free/ — форма подписки ведёт на Смартреспондер, то есть, не работает.

    • Михаил, спасибо, что напомнили. Я сейчас ВСЕ свои материалы переделываю (громадная работа), а про этот сайт забыл (их у меня много :)). Как только, так сразу оповещу всех.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Есть вопросы?