Элитные подписные формы для блога или подписной страницы (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

<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>
        
        <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>

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

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

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

<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/>
    
    <input class="rubizproject-optin_email" type="text" name="email" placeholder="Введите Ваш E-Mail"  autocomplete="email" x-autocompletetype="email" spellcheck="false" autocapitalize="off" autocorrect="off"/><br/>
    
    <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>

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

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

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

<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 />
        
        <input name="field_email" class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" autocomplete="off" required />
        
        <input type="submit" value="Получить прямо СЕЙЧАС ➤" />
        
        
        
    div>
form>

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

Создать код формы подписки в сервисе: Как подключить MassDelivery

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

<form method="post" action="https://massdelivery.ru/subscribe.html" >
<div class="rbp-input">

<input name="field_name_first" class="rubizproject-optin_name" type="text" placeholder="Введите Ваше Имя" autocomplete="off" required />

<input name="field_email" class="rubizproject-optin_email" type="text" placeholder="Введите Ваш Email" autocomplete="off" required />

<input type="submit" value="Получить прямо СЕЙЧАС ➤" />



div>
form>