Форма подписки на блог
Форма подписки на блог

Форма подписки на блог

Александр Каратаев 14.11.2013 Полезное 14 комментариев 529 Просмотров

Различные сервисы рассылок предлагают свои встроенные конструкторы форм. И, на мой взгляд, все они не лишены недостатков. Например, FeedBurner просто и безо всяких излишеств предлагает некий код формы, вид которого ну совершенно не презентабелен. Тут лучше использовать простую ссылку, по ней хоть страница вменяемая открывается.

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

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

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

О том, как можно привязать свою форму к сервису подписки я и расскажу в этой статье.

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

Например:
Что такое html формы и зачем они нужны, Справочник по HTML, вики, HTML формы ну и т.д...

Предполагается, что мы это все уже знаем и сразу приступим к сути вопроса.

Для простоты восприятия сначала давайте взглянем на чистый и пустой код формы:

<form>
<input type="text" name="name_" value="" />
<input type="text" name="email_" value="" />
<input type="submit" value="Получать" />
</form>

Как видим - форма, два текстовых поля и кнопка отправки... Понятно, что такая форма никуда ничего не отправит - это лишь остов формы, который можно прикрутить к чему угодно. Но привязывать будем чуть позже, а пока давайте сотворим красивую форму по своему вкусу и желанию.  Те, кто знаком с основами CSS, могут это сделать ручками, прописав необходимые стили для всех элементов формы, а кто не хочет утруждать себя подобными вещами, могут воспользоваться различными программами или онлайн сервисами (их есть в Сети). Например, вот такой: Form builder.
Там, что называется, интуитивно понятный интерфейс... 🙂

Например, я нарисовал вот такую форму:

Форма подписки
Форма подписки

Скачиваем стили и код формы.

Стили можно конечно-же прописать в основном файле стилей блога (style.css в папке Вашей темы), но я бы не советовал это делать - незачем дергать свою тему всуе... На мой взгляд лучше разместить стили на странице с формой. Если по правилам, то между тегами <head>...</head>, но можно и непосредственно перед кодом формы.

Короче, делаете так, как Вам удобнее, да и форму рисуете такую, какую надо именно Вам!

У меня стиль получился вот такой:

[spoiler]
<style>
 .form-container {
 border: 1px solid #f2e3d2;
 background: #5177b8;
 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#5177b8));
 background: -webkit-linear-gradient(top, #ffffff, #5177b8);
 background: -moz-linear-gradient(top, #ffffff, #5177b8);
 background: -ms-linear-gradient(top, #ffffff, #5177b8);
 background: -o-linear-gradient(top, #ffffff, #5177b8);
 background-image: -ms-linear-gradient(top, #ffffff 0%, #5177b8 100%);
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
 font-family: 'Helvetica Neue',Helvetica,sans-serif;
 text-decoration: none;
 vertical-align: middle;
 min-width:200px;
 padding:20px;
 width:200px;
 }
 .form-field {
 border: 1px solid #867dba;
 background: #cfd3e8;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 color: #4d4a46;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 padding:8px;
 margin-bottom:20px;
 width:190px;
 }
 .form-field:focus {
 background: #fff;
 color: #06092e;
 }
 .form-container h2 {
 text-shadow: #fdf2e4 0 1px 0;
 font-size:18px;
 margin: 0 0 10px 0;
 font-weight:bold;
 text-align:center;
 }
 .form-title {
 margin-bottom:10px;
 color: #351799;
 text-shadow: #fdf2e4 0 1px 0;
 }
 .submit-container {
 margin:8px 0;
 text-align:right;
 }
 .submit-button {
 border: 1px solid #0e1670;
 background: #3936a3;
 background: -webkit-gradient(linear, left top, left bottom, from(#888de3), to(#3936a3));
 background: -webkit-linear-gradient(top, #888de3, #3936a3);
 background: -moz-linear-gradient(top, #888de3, #3936a3);
 background: -ms-linear-gradient(top, #888de3, #3936a3);
 background: -o-linear-gradient(top, #888de3, #3936a3);
 background-image: -ms-linear-gradient(top, #888de3 0%, #3936a3 100%);
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
 text-shadow: #0c1252 0 1px 0;
 color: #fff;
 font-family: helvetica, serif;
 padding: 8.5px 18px;
 font-size: 14px;
 text-decoration: none;
 vertical-align: middle;
 }
 .submit-button:hover {
 border: 1px solid #bfbfd6;
 text-shadow: #0c1252 0 1px 0;
 background: #05178a;
 background: -webkit-gradient(linear, left top, left bottom, from(#5a5abf), to(#05178a));
 background: -webkit-linear-gradient(top, #5a5abf, #05178a);
 background: -moz-linear-gradient(top, #5a5abf, #05178a);
 background: -ms-linear-gradient(top, #5a5abf, #05178a);
 background: -o-linear-gradient(top, #5a5abf, #05178a);
 background-image: -ms-linear-gradient(top, #5a5abf 0%, #05178a 100%);
 color: #fff;
 }
 .submit-button:active {
 text-shadow: #140c52 0 1px 0;
 border: 1px solid #725de8;
 background: #bdc6de;
 background: -webkit-gradient(linear, left top, left bottom, from(#7fa0e0), to(#05178a));
 background: -webkit-linear-gradient(top, #7fa0e0, #bdc6de);
 background: -moz-linear-gradient(top, #7fa0e0, #bdc6de);
 background: -ms-linear-gradient(top, #7fa0e0, #bdc6de);
 background: -o-linear-gradient(top, #7fa0e0, #bdc6de);
 background-image: -ms-linear-gradient(top, #7fa0e0 0%, #bdc6de 100%);
 color: #fff;
 }
 </style>
[/spoiler] И соответственно, код формы:
<form class="form-container">
 <div class="form-title"><h2>Хочу новости блога</h2></div>
 <div class="form-title">Ваше имя</div>
 <input class="form-field" type="text" name="firstname" /><br />
 <div class="form-title">Ваш Email</div>
 <input class="form-field" type="text" name="email" /><br />
 <div class="submit-container">
 <input class="submit-button" type="submit" value="Submit" />
 </div>
 </form>

Как видите, код немногим отличается от того пустого кода формы, который я показывал в самом начале. Но зато все элементы привязаны к определенным стилям оформления из нашей таблицы стилей! За это отвечает атрибут class="...", прописанный в тегах элементов формы.

Теперь эту красоту надо привязать к какому-нибудь подписному сервису.

Ну и давайте попробуем. Привязывать будем к сервису SmartResponder, хотя тут нет никакой принципиальной разницы.

Для того, чтобы форма обращалась к конкретному сервису необходимо указать в теге <FORM> соответствующие параметры:

  • method - способ передачи данных, как правило это "post" или "get";
  • action - адрес сервиса обработки данных формы;
  • name - имя формы, параметр в данном конкретном случае, необязательный, но иногда бывает нужен, так что оставим это параметр тоже.

И второе важное условие -  в тегах «<input type="text"» надо обязательно правильно указать имя элемента «name="..."», так-как на стороне сервиса значение поля считывается именно по имени поля.

Где взять все эти нужные значения? Да на самом-же SmartResponder! Заходим, создаем форму, копируем код себе в текстовый редактор. Код довольно объемный, но пусть это Вас не смущает. мы возьмём оттуда только нужные нам значения о которых я писал выше.

Итак, ищем в этом коде тег <form> и из него вытягиваем (копируем в свою форму) только

method="post"

action=""

target="_blank"

name="SR_form_1_10"

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

<form method="post" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_1_10">
 <div><h2>Хочу новости блога</h2></div>
 <div>Ваше имя</div>
 <input type="text" name="firstname" /><br />
 <div>Ваш Email</div>
 <input type="text" name="email" /><br />
 <div>
 <input type="submit" value="Submit" />
 </div>
 </form>
Имя формы у Вас скорее всего будет другим, но в данном случае это не имеет никакого значения!

Теперь определимся с полями...

Как я уже говорил, тут важно только правильно прописать имена этих полей. Их тоже берём из кода SmartResponder... В результате форма с правильными атрибутами тега <form> и именами полей примет такой вид:

<form class="form-container" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_158352_59">
 <div class="form-title"><h2>Хочу новости блога</h2></div>
 <div class="form-title">Ваше имя</div>
 <input class="form-field" type="text" name="field_name_first" /><br />
 <div class="form-title">Ваш Email</div>
 <input class="form-field" type="text" name="field_email" /><br />
 <div class="submit-container">
 <input class="submit-button" type="submit" value="Получать" />
 </div>
 </form>

И теперь последний важный штрих!

Каждый из рассылочных сервисов в коде формы содержит некие скрытые поля.  Они имеют атрибут type="hidden", ну и, конечно-же, содержат имя поля и его значение. Например:

<input type="hidden" name="uid" value="320190">

Такие поля нужны для передачи служебной информации - привязке формы к конкретной рассылке, языковой настройке и т.д...

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

Находим их в коде SmartResponder и добавляем в свой код.

И вот окончательный листинг получившейся формы:

<form action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_158352_59">
<div><h2>Хочу новости блога</h2></div>
<div>Ваше имя</div>
<input type="text" name="field_name_first" /><br />
<div>Ваш Email</div>
<input type="text" name="field_email" /><br />
<div>
<input type="submit" value="Получать" />
</div>
<input type="hidden" name="uid" value="320190">
<input type="hidden" name="did[]" value="381926">
<input type="hidden" name="tid" value="0">
<input type="hidden" name="lang" value="ru">
</form>
Не копируйте значения скрытых полей с моего образца, иначе Ваша форма будет подписывать на мой блог!

Хотя... если Вы настаиваете... 😉

Итак, подведём итоги. Если не принимать во внимание длинную писанину, то суть всего сводится к следующему:

Создаем свою красивую форму, переносим в неё параметры и атрибуты, как самой формы, так и её элементов с любого рассылочного сервиса. В качестве примера я приводил SmartResponder, но вот моя реальная форма привязана к Uni Sender.

Здесь нет никакой принципиальной разницы!

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

Вот, собственно и вся премудрость...

Удачи Вам и до встречи на моём блоге!

Просмотров: 42

Материалы по теме:

servis email - Форма подписки на блог
Smartresponder кинул-выбираем сервис email рассылок

Смотрите также

WordPress изображения. Как избавиться от лишних…

WordPress изображения. Как избавиться от лишних…

Изображения WordPress, пожалуй, самая неудачная часть реализации этого, в общем-то, неплохого движка. Я уже писал …

Видео с YouTube без чёрных рамок

Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко! YouTube настолько прочно вошёл в нашу жизнь, что сложно представить …

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

  1. Светлана
    19.06.2014 в 20:42

    Кажется, сама нашла то, что в письме вас просила прислать. Вернусь сюда и на странички из “Материалов по теме”. Спасибо.

    Ответить
  2. Михаил
    24.10.2016 в 22:35

    Саш, попытался подписаться с нового емейла вот что пишет:

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

    Ответить
    • Александр Каратаев
      26.10.2016 в 13:55

      Миша, привет… Это же старая совсем статья. Вот здесь я рассказываю про новую форму и там есть возможность скачать оба варианта. Или я чего-то не понял?

      Ответить
      • Михаил
        26.10.2016 в 15:06

        Саш, я имел в виду форму подписки. Ну, саму форму то, я у тебя уже взял из Firebug, а вот, сама подписка не работает. Веришь, нет, я в унисендере совсем заплутал, голова кругом… Помощь нужна.

        Кстати, сейчас очень актуальный момент создать пошаговый пост об освоении унисендер… У тебя в планах нет такой идеи? То, что у них там есть в объяснениях, не всегда и не совсем понятно. так как, ты уже далеко не новичок в этом сервисе, подсказал бы, и я думаю, не только мне, как всё с делать с минимум или вообще без ошибок.

        Ответить
        • Александр Каратаев
          26.10.2016 в 15:51

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

          Я тебе скинул на почту свой код полностью, как есть. Но это мало, что тебе даст…

          Ответить
  3. Михаил
    26.10.2016 в 18:23

    Но это мало, что тебе даст…

    Представь себе, очень много дало! Я давно для себя сделал вывод, что какая-нибудь мелочь может так мозги залюбить, что свет не мил… 

    На почте тебе такое письмо написал, осталось смайлик для настроения поставить и…. вместе с нажатием на смайлик слетает браузер. Не стал уже по-новой писать, здесь вкратце скажу.

    Вообщем, в инструментах: Подписка/Отписка есть три поля которые нужно заполнить. В поле адрес у меня не принимают ни один mail-овский адрес, хотя регился я у них с майловскими адресами на обоих аккаунтах. Пришлось в сайте изменить адрес на Gmail-овский и у них написать Gmail-овский адрес и всё пошло нормально. Вот, вкратце такая история.

    Ответить
    • Александр Каратаев
      27.10.2016 в 16:17

      Мне просто подумалось, что разбираться в чужой абракадабре ещё то веселье…

      Главное, чтобы твоя подписка работала не на мой блог… cheeky

      Ответить
      • Михаил
        27.10.2016 в 22:18

        Саш, ну от тебя прям ничего не утаишь! Именно так я и хотел поступить, чтобы не только я был на платном тарифе. Главное, чтобы друзьям было хорошо, а мне подписчики ни к чему!

        А если серьёзно, мне нужно было разобраться, какие именно цифровые коды нужно оставить, а какие убрать, у меня их было несколько штук и они делились на две части (разные).

        Спасибо большое!

        Ой, забыл спросить/попросить. Подскажи пожалуйста, как мне всунуть в Html-код стили hover и active. Мне это нужно для внешнего вида кнопки "Подписаться".

        Ответить
        • Александр Каратаев
          30.10.2016 в 20:34

          Подскажи пожалуйста, как мне всунуть в Html-код стили hover и active. Мне это нужно для внешнего вида кнопки "Подписаться".

          Миш, да просто в общий CSS их запихни и всё…

          Ответить
          • Михаил
            30.10.2016 в 21:56

            просто в общий CSS их запихни

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

    • Александр Каратаев
      31.10.2016 в 00:03

      Миш, вот ты сейчас прописал все стили в коде самой кнопки… Типа:

      <button style="width: 70%;display: inline-block;..."</button>

      Но кто тебе мешает в свой CSS добавить новый класс, например frmsubmit…

      .frmsubmit {
    width: 70%;
    display: inline-block;
    text-decoration: none;
    word-break: break-all;
    font-size: 16px;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 16.8px;
    color: #ffffff;
    background-color: #76acfc;
    background-image: linear-gradient(#0daeae, #0B9191);
    box-shadow: 0 3px 3px #575555;
    border: 2px double #0c9c9c;
    margin: 50px 0 5px 0;
    padding: 8px 0 8px 0;
    border-radius: 15px;
}
.frmsubmit:hover {Тут то, что ты хочешь}
.frmsubmit:active {Тут то, что ты хочешь}

      Ну и так далее. Тогда код твоей кнопки будет выглядеть иначе:

      <button class="frmsubmit">Тут что-то</button>

      Вот и всё…

      Ответить
    • Александр Каратаев
      31.10.2016 в 00:08

      Имя класса можешь сам придумать любое. Главное, чтобы такого не существовало в твоём CSS…

      Ответить
  4. Михаил
    31.10.2016 в 00:35
    <button class="frmsubmit">Тут что-то</button>

    Именно эта подсказка мне и была нужна. Саш, я только начал снова входить в активную жизнь интернета. Сегодня 4 пост закончил, пока в черновиках…С кодами с прошлой зимы дела не имел, понятно, что многое подзабылось. Я же всё-таки не профессионал и относительно недавно был полнейшим чайником, кроме пасьянса на компьютере ничего не умел делать. Саш, спасибо тебе большое, что не отказываешь в помощи!

    Ответить

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

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

 Ясогласен с политикой конфиденциальности сайта и пользовательским соглашением

Яндекс.Метрика