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

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

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

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

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

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

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

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

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

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

Но лучше искать изображения в формате 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.

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

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

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

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