Как создать красивую форму подписки 39


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

Кстати, прочитав эту статью, вы поймёте, что по этому принципу можно сделать любую форму. Всё будет зависеть от вашей фантазии. Ну и конечно, от наличия подходящего изображения. Если вы конечно, не умеете рисовать, а если умеете, — то у вас вообще просто необъятные возможности для творчества.

Как устроена форма подписки по электронной почте

Любая форма состоит из графического изображения или обычного фона и наложенного на него программного кода html. Ну и разумеется весь этот код оформлен стилями css. Выглядит это так:

Схема формы подписки

Схема формы подписки

И не пугайтесь, если вы не знаете html или css. На самом деле все необходимые знания вы получите в этой статье. Единственной, что нужно понять, так это у вас должен быть код формы подписки и подходящее изображение. А если вы уже сделали форму обратной связи, то эту форму сделаете легко.

Изображения вы легко найдёте в интернете, или скачайте архив с материалами и примером готовой формы к этой статье. Код подписки можно взять из любого сервиса рассылки. Такого как smartresponder или feedburner.

Подготовка изображения

Шаг 1. Фоновое изображение.

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

Но лучше искать изображения в формате psd (рабочий формат фотошопа). Такие изображения можно легко редактировать в фотошопе. То есть убирать и редактировать необходимые элементы.

Итак, я нашёл в интернете вот такое изображение в формате psd. Точнее их было несколько, но слепил я вот это

Заготовка в формате psd

Заготовка в формате psd

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

Всё это нужно убрать и оставить только фоновое изображение – это будет наша подложка в форме подписки. Для этого просто открываем изображение в графическом редакторе фотошоп или в онлайн-редакторе PIXLR EDITION. И отключаем видимость этих слоёв.

Отключаем всё лишнее

Отключаем всё лишнее

Теперь нужно отсечь всё лишнее по краям фонового изображения. Для этого можно воспользоваться инструментом «Кадрирование» или Тримминг.

Отсекаем лишнее по краям

Отсекаем лишнее по краям

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

Задаём размер изображения

Задаём размер изображения

Вот теперь можно сохранить фоновое изображение формы для использования на сайте. Для этого выбираем пункт меню «Файл»«Сохранить для Web». Далее, нужно выбрать формат изображения и сохранить его.

Сохраняем для сайта

Сохраняем для сайта

Если форма не имеет по краям тени, пустые пиксели и у вас белый фон на сайте, то вы смело можете выбрать формат JPEG. Если же вам необходимо адаптировать форму подписки под дизайн, то следует выбрать формат PNG. В этом формате форма максимально впишется в дизайн сайта. Но будет чуть больше весить. За то, вы ведь всегда можете оптимизировать изображения.

Шаг 2. Вспомогательные изображения.

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

Вспомогательная графика

Вспомогательная графика

Шаг 3. Изображение кнопки «Подписаться».

Самое время разобраться с кнопкой «Подписаться». В форме подписки можно использовать кнопку в виде изображения, а можно заменить другой кнопкой, настроенной стилями CSS.

Рассмотрим вариант, когда кнопка будет представлена в виде изображения.

Для начала отключите все слои (убрать изображение глаза напротив слоя) и подпишите кнопку.

Готовим кнопку

Готовим кнопку

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

Следующим этапом нужно сохранить изображение дух кнопок в формате PNG. Так же, как делали на предыдущем шаге. И можно приступать к вёрстке.

Вёрстка формы подписки

Вот теперь то и начинается самое интересное. Вам необходимо код формы подогнать под изображение формы (сверстать).

Предлагаю тренироваться на отдельно созданном файле html.  Хотя вы можете делать это и на отдельно созданной страничке на своём блоге. Я же предпочитаю экспериментировать отдельно. Для этого открываем редактор Notepad++ и сохраняем страницу в формате html.

Теперь нам понадобится самый важный ингредиент – код формы подписки. Вы берёте этот код из сервиса e-mail рассылок. Только вот этот код нужно будет очистить от всех стилей и лишних ссылок.

Вот пример моего кода в сервисе Smartresponder после удаления всех стилей.

Код формы подписки

Код формы подписки

Примечание: там, где вы встречаете стиль display:none; можете оставить этот стиль, пусть эти скрытые поля вам не мешают. Или же отметьте эти элементы отдельным стилем и скройте их отдельным стилем в файле style.css. Как мы и поступим далее.

А пока форма будет выглядеть так:

Форма без стилей оформления

Форма без стилей оформления

Только не волнуйтесь на счёт кода, ваша задача просто найти в коде элементы style=»… и удалить в код начиная от стиля и заканчивая двойными кавычками.

Теперь самое время задать блокам, полям и кнопке отдельные классы – это понадобится в дальнейшем для создания стилей оформления.

Блок див в котором находится вся форма, я назову «obolochka». Вы можете назвать по-своему.

<div class="obolochka">

Скрытым элементам я присваиваю класс «secret», — это пункт списка <li> и блок <div>

<input class="secret" type="text" name="field_name">
<div class="secret">Загрузка...</div>

Далее, идёт маркированный список <ul> и пункты списка <li> в которых находятся поля для ввода имени и электронного адреса. Нужно в отдельности задать класс для пунктов списка <li> и для полей ввода <input>. Для пунктов списка я задаю класс «marker», а для полей ввода лучше использовать отдельные классы, так как отступы придётся задавать индивидуально. Поле имя «contact_name». Поле электронный адрес «contact_email»

<li class="marker"><label></label><input class="contact_name" type="text" name="field_name_first" value="Ваше имя:"></li>
<li class="marker"><label></label><input class="contact_email" type="text" name="field_email" value="Ваш email-адрес:"></li>

И, конечно же, не забываем о кнопке «Подписаться». Сейчас в форме тип кнопки type=»submit» – если бы мы хотели задать стиль кнопки только через css, то тип можно было бы и не менять. А так как мы решили использовать изображение для кнопки, то тип нужно изменить на type=»image» и присвоить класс «otpravit».

Будет это выглядеть так:

<li class="marker"><input class="otpravit" type="image"></li>

Этапы внедрения кодов мы рассмотрели, а теперь покажу весь код – я убрал всё лишнее и добавил необходимое. Вы можете сравнить свой код с мои и поймёте, что нужно добавить и что удалить из вашего кода. Вот мой код формы подписки:

<!-- SmartResponder.ru subscribe form code (begin) -->
<script type="text/javascript" src="https://imgs.smartresponder.ru/52568378bec6f68117c48f2f786db466014ee5a0/"></script>
<div class="obolochka">
 <form method="post" action="https://smartresponder.ru/subscribe.html" target="_blank" name="SR_form_160904_53" >
 <input class="secret" type="text" name="field_name">
 <div class="secret">Загрузка...</div>
 <ul >
 <li class="marker"><label></label><input class="contact_name" type="text" name="field_name_first" onfocus="if (this.value == 'Введите Ваше имя') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваше имя';}" value="Введите Ваше имя"></li>
 <li class="marker"><label></label><input class="contact_email" type="text" name="field_email" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите Ваш e-mail';}" value="Введите Ваш e-mail"></li>
 <li class="marker"><input class="otpravit" type="image" src="button.png" width="132px" height="43px" onmouseout="this.src='button.png'" onmouseover="this.src='button_hov.png'"></li></ul>
 <input type="hidden" name="uid" value="298928">
 <input type="hidden" name="did[]" value="492734">
 <input type="hidden" name="tid" value="0">
 <input type="hidden" name="lang" value="ru">
 <input name="script_url_160904_53" type="hidden" value="https://imgs.smartresponder.ru/on/6e7d54aeeac42d70e634c580f2d1395c1a8959f2/160904_53">
 </form>
</div>
<!-- SmartResponder.ru subscribe form code (end) -->

Код, который я добавил для полей ввода информации, отметил оранжевым цветом. Это код убирает подсказку в поле и позволяет сразу вводить контактные данные. Для кнопки тоже добавил код, он делает кнопку динамической, то есть меняет одно изображение на другое.

Создание стиля оформления для формы подписки

Эти стили вы сможете адаптировать под свою форму подписки. Стили нужно будет добавить в файл style.css. Итак, мы задали классы для элементов формы и теперь на основе классов создадим стили оформления и форма будет готова.

А вот собственно и стили для оформления формы подписки.

.obolochka {
background: url('formbg.png') no-repeat; /*фоновое изображение формы - поменять на свой файл*/
width: 300px; /*ширина формы*/
height: 227px; /*высота формы*/
margin: 0 auto; /*выравнивание по центру*/
}
/*скрытые поля*/
.secret {
display:none; /*убираем скрытые поля*/
}
/*пункты списка*/
.marker {
list-style: none; /*убираем маркеры списка*/
}
/*поле имени*/
.contact_name {
margin: 65px 0px 15px; /*внешний отступ*/
padding: 7px; /*внутренний отступ*/
border-radius: 6px; /*закругление углов*/
border: 1px solid #E6E1E1; /*бордюр*/
width: 224px; /*ширина поля*/
background: url('name.png') no-repeat scroll 0% 0% #EAE9E9; /*фигурка в поле - поменять на свой файл*/
background-position: 198px center; /*положение фигурки*/
}
/*поле электронной почты*/
.contact_email {
margin: 0 0px 15px 0; /*внешний отступ*/
padding: 7px; /*внутренний отступ*/
border-radius: 6px; /*закругление углов*/
border: 1px solid #E6E1E1; /*бордюр*/
width: 224px; /*ширина поля*/
background: url('mail.png') no-repeat scroll 0% 0% #EAE9E9; /*конверт в поле - поменять на свой файл*/
background-position: 198px center; /*конверт фигурки*/
}

Всё форма готово и можно приступать к внедрению на сайт.

Готовая форма подписки

Готовая форма подписки

Как установить форму подписки на сайт

Итак, для начала нужно скопировать все изображения, задействованные, в форме подписки на сервер. Я скопировал изображения в папку images, эта папка находится в папке темы.

Копируем изображения

Копируем изображения

Следующим шагом нужно вставить стили оформления в таблицу стилей. Для этого открываем административную панель WordPress – «Внешний вид»«Редактор»«Таблица стилей». И вставляем стили из этой статьи.

Вставляем стили

Вставляем стили

Не забудьте изменить путь к изображениям!

И будьте готовы к тому, что придётся править эти стили, так как они могут перекликаться со стилями в вашей теме. Но это мелочи и они быстро устраняются.

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

В той же административной панели WP открываем раздел «Внешний вид»«Виджеты». Выбираете виджет в виде «Текст» и перетаскиваете в сайтбар.

Создаём новый виджет

Создаём новый виджет

А теперь вставляет код формы подписки. И прежде чем сохранить, измените путь к изображениям, задействованным в форме. А это фоновое изображение, изображение в полях для заполнения и кнопка.

Если вы скопировали изображения, как и я в папку images, то вам нужно к названию изображения добавить вот это путь:

/wp-content/themes/Ваша тема/images/

Сохраняем и проверяем. Если всё выглядит, как и было задумано, значит можно наслаждаться результатом своих трудов.

Ну а если же что то съехало, то нужно будет поработать со стилями и изменить параметры margin.

Что же вроде постарался объяснить всё максимально понятно. Надеюсь, получилось. Обязательно посмотрите видеоурок, я старался. Да и понятней всё станет, однозначно.

А у меня на сегодня всё желаю удачи с внедрением формы подписки на сайте. Если будут вопросы пишите, вмести мы решим все проблемы.

Всем желаю удачи и не пропустите видеоурок!

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

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

39 коммент. к статье “Как создать красивую форму подписки

  • Сергей

    Красивая форма подписки которая работает на поисковую выдачу что может быть лучше для сайта?:))

  • Елена

    Спасибо Максим! Очень интересно. Хочется попробовать уже самой сделать форму. Благодарю за подробное описание

    • Максим Зайцев От автора

      Елена, пробуйте. Если будут вопросы, буду рад помочь. Желаю удачи!

  • Иван

    Великолепно Максим! Сложно показалось, но надо попытаться создать подобную форму подписки. Спасибо)

    • Максим Зайцев От автора

      Здравствуйте, Роман. Вы не гонитесь за конкретными размерами изображения, так вы точно не найдёте форму. Найдите те, которые будут подходить под дизайн сайта. А далее в фотошопе в разделе «Изображение» вы легко можете задать нужный размер. Там нет ничего сложного, будет понятно даже новичку.
      Если будет что-то не понятно, вы спрашивайте и я вам помогу. Удачи!

  • Тимофей

    О, как толково пояснили. Я уже три месяца разобраться с этой темой не могу. Спасибо большое. В закладки завтра послезавтра буду пробовать. Но в целом все вроде бы понятно))) Ууууу…. гребаная форма!!)))

    • Максим Зайцев От автора

      Здравствуйте, Тимофей. Трудно может показаться с первого взгляда. Главное быть внимательным, сначала готовите html код, обращаете внимание на поля, блоки, классы и идентификаторы. А после, на эти классы и идентификаторы легко css стили прикрутить. Если будут вопросы, задавайте походу. Желаю удачи!

    • Максим Зайцев От автора

      Так ведь каждый стиль подписан. А по классам легко понять к какому элементу html они относятся. Если не понятно спрашивайте.

        • Максим Зайцев От автора

          Здравствуйте, Сенька. Через панель разработчика в браузере доступны и стили и каркас формы. Посмотрите самостоятельно, потому как в комментариях коды у меня запрещены.

          • Сенька шалый

            Извините за назойливость, но у меня не получается узнать через исходный код эти параметры, не могли бы вы выслать на почту css и html? Я уже писал Вам через обратную связь, у вас должно быть письмо в принятых.

          • Максим Зайцев От автора

            Да, письмо я прочитал. Как будет время, вышлю вам коды.

  • Алексей

    Здравствуйте Максим!
    Подскажите, пожалуйста, как сделать такую же форму, но с полями для ввода в одной строке?
    То есть получается не по вертикали, а по горизонтали.

    Имя — Емаил — Телефон

    • Максим Зайцев От автора

      Здравствуйте, Алексей. Нужно в фотошопе растянуть фон, а поля выставить в один ряд и стилями задать нужный вид. В качестве примера горизонтального расположения полей возьмите исходники в конце этой статьи: http://1zaicev.ru/forma-obratnoj-svyazi-s-zashhitoj-ot-spama/

      • Алексей

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

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

        Как вы показываете на примере, с вертикальным расположением, это сделать у меня получилось легко, а вот как их сделать по вертикали ума не приложу.
        Спасибо за помощь!

        P.S — Я взял ваш исходный код формы, где вы убрали все лишнее, и вставил туда свои значения.
        По вертикали сделать получилось, пожалуйста, выложите пример с горизонтальным расположением.

        • Максим Зайцев От автора

          Алексей, добрый день.
          Вам всего лишь нужно добавить класс к списку ul Вот фрагмент кода из статьи, где надо добавить класс:
          div class="secret">Загрузка...
          Должно получиться так:
          div class="secret">Загрузка...
          А для класса
          class="list" в стилях нужно добавить вот такой стиль:
          .list {display: inline-flex;}
          Остальные стили с отступами и так далее добавляете индивидуально.
          Примечание: в коде не хватает треугольных скобок, так как коды запрещены у меня в комментариях. Скобки смотрите в коде, приведённом в статье. Вам главное добавить класс и стили для него.

          • Алексей

            Максим, здравствуйте!
            Спасибо Вам большое за помощь)
            У меня почти получилось, только вот никак не пойму как теперь сделать все ровненько.
            Подскажите пожалуйста, что редактировать?

            Обратил внимание, что к кнопке отправки данных класс видимо не привязан.
            Скриншот стилей — https://yadi.sk/i/pduoBSaIoC4E4
            Скриншот формы — https://yadi.sk/i/Dj4xVoPToC4GP

          • Максим Зайцев От автора

            Алексей, отлично, вы почти всё доделали. Скриншоты мне мало чем помогу, мне нужно видеть исходный код. Вообщем вам нужно стилями margin (внешний отступ) и padding (внутренний отступ) для всего списка ul и для каждого пункта li добиться нужного выравнивания. А также этими же отступами выравнивается и кнопка, только отступы настраиваются для кнопки.

      • Алексей

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

        Еще вопросик есть один…
        Как из полей можно убрать текст при нажатии на название поля?
        То есть у меня сейчас есть поля Имя, Емаил, Телефон.

        Как сделать так чтобы этот текст при нажатии на поле пропадал?
        То есть чтобы становилось пустое поле для ввода данных.

        Спасибо за помощь!

        • Максим Зайцев От автора

          Здравствуйте, Алексей. Вы молодец! Я рад, что всё получилось. По поводу вашего вопроса, то обратите внимание на код, приведённый в статье. Оранжевым цветом я выделил фрагменты, подлежащие замене. А под кодом абзац, в котором я поясняю для чего добавил этот код. Этот код начинается с onfocus="if и вставляется для каждого поля. Используйте его и у вас будет очищаться поля при установки в него курсора. Желаю удачи!

  • Любовь

    Здравствуйте, Максим!
    Спасибо за такую замечательную статью! Для таких чайников, как я, которые только приблизительно представляют о том, что такое html и css, она просто незаменима!=)
    Возникла одна проблемка: как я понимаю, не до конца скрылось поле «Загрузка…». При чем, и пробовала копировать из Ваших файлов строки, где оно скрывается, и удаляла строки, где оно прописано, — результат один и тот же. Вот, что у меня вышло — (form_1.jpg — такой вид имеет моя форма, form_2.jpg — такой вид она имеет при наведении курсора). Если это не займет много Вашего времени, посмотрите, пожалуйста, где моя ошибка в коде. Буду очень благодарна!=)
    P.s. Я не делаю такую точно форму, просто тренируюсь на Ваших файлах перед созданием своей формы.

    • Максим Зайцев От автора

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

  • Оксана

    Скажите пожалуйста, а что нужно изменить в коде формы, чтобы вытянуть ее в одну строку?

    • Максим Зайцев От автора

      Здравствуйте, Оксана. В коде формы ничего менять не надо. Достаточно для пунктов li применить свойство float: left; и отступы padding. И тогда поля выстроятся в одну линию.

  • Сергей

    Здравствуйте Максим! Прочитал Вашу статью по созданию собственных форм подписки. Начал пробовать, почти получилось, но все дело в том, что на сервисе рассылок, я получил совсем другой код, не похожий на код в смартреспондер. Пытался вставить Ваш код в свой- не работает. Может быть подскажите, где я ошибаюсь? Заранее благодарен.

    • Максим Зайцев От автора

      Здравствуйте, Сергей. Принцип действий с любой формой похожий. Ваша задача очистить форму от стилей, а создать новые стили от эту форму. Использовать мой код, если у вас другой сервис, не выйдет. Нужно работать с вашим кодом, чистить если надо и дорабатывать стили. Чтобы сказать что-то более конкретно, нужно смотреть на код формы, а там думать что к чему!

  • Сергей

    Здравствуйте Максим! Очистил код от стилей и классов, форма «слиплась», т.е. два поля и кнопка без отступов. Теперь вопрос как дальше редактировать форму, ведь как я писал ранее код не такой как в смартреспондере. Я был бы Вам очень благодарен, если бы Вы посмотрели код и посоветовали, что делать дальше. С уважением Сергей Стариков.

    • Максим Зайцев От автора

      Сергей, добрый вечер. Дальше нужно стили присваивать для каждого поля и кнопки. Пришлите код мне на почту, я гляну.

    • Максим Зайцев От автора

      Сергей, добрый вечер. Я видел ваше письмо, посмотрю, как будет время!