Как сделать форму подписки из PSD (Часть 2)

Опубликовано ,

 Доброго времени суток, дорогие читатели!

Это вторая часть урока по созданию формы подписки из PSD макета. В ней я покажу, как сделать HTML форму из подготовленных элементов и как поставить ее в сайдбар блога или в конец статьи. Также расскажу, как добавить в окошко формы иконки-ссылки на социальные сети.

Первая часть

Из данного урока вы узнаете:

Часть первая

  1. Как вырезать необходимые элементы из PSD макета.

Часть вторая

  1. Как сделать HTML форму подписки из готового макета;
  2. Как добавить форму подписки в сайдбар WordPress или в конец поста;
  3. Как добавить социальные кнопки в окошко формы.

Также сможете скачать материалы урока и шаблоны форм в формате PSD.

1.  Как сделать HTML форму подписки из готового макета

 

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

Для примера возьму код подписки FeedBurner. В исходном виде она выглядит так:

<form style="border:1px solid #ccc;padding:3px;text-align:center;"  /* стилевое оформление */
action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RatFelt', 'popupwindow', 
'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p> 
<p><input type="text" style="width:140px" name="email"/>
</p> <input type="hidden" value="RatFelt" name="uri"/>
 <input type="hidden" name="loc" value="ru_RU"/> 
<input type="submit" value="Subscribe" /> 
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p> </form>

 

Для вывода формы в браузере я использую пустой HTML файл, вы можете скачать его конечный вариант в конце урока. Ниже на изображении я подписала, какая часть кода за что отвечает:
ubrat-lishnee-iz-formi-podpiski

Удалим лишнее, заменим, где требуется. Вот таким станет код:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RatFelt', 'popupwindow', 
'scrollbars=yes,width=550,height=520');return true"> 
<p>Введите ваш email:</p>
<p><input type="text" name="email"/></p>
<input type="hidden" value="RatFelt" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="image />
</form>

 

Внешний вид формы подписки после изменения:
podpiska-bez-lishnego
Чтобы приступить к описанию формы в файле style.css, заключим наш код в блок div и присвоим ему идентификатор forma: <div id=”forma”>форма подписки</div>.

Зададим длину, ширину и поставим на фон основное изображение:

#forma {
width: 400px; /* длина */
height: 300px; /* высота */
overflow-y: hidden; /* убирает прокрутку */
background-image: url(img/forma.png); /* фоновое изображение */
}

 

Совет №1: давайте классам и идентификаторам понятные имена, потом будет проще разобраться, какой селектор к чему относится! Наглядно при помощи отступов Tab соблюдайте иерархию вложенных блоков.

Совет №2: закомментируйте каждый стиль в .css файле!

forma-podpiski-s-fonom

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

  1. Задаем класс для надписи «Введите ваш e-mail»: <div class=”text”>…</div>;
  2. На макете формы кнопка и поле ввода расположены на одной линии, поэтому задаем для них общий класс: <div class=”vvod”>…</div>.

 

Такой получится код:

<div id="forma"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RatFelt', 'popupwindow', 
'scrollbars=yes,width=550,height=520');return true"> 
<div class="text">Введите ваш email:</div>
<div class="vvod"><input type="text" name="email"/>
<input type="hidden" value="RatFelt" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="image" /></div>
</div></form>

 

Чтобы наглядно подобрать необходимые правила CSS, воспользуемся браузером Google Chrome(впрочем, аналогичные возможности разработчика есть почти во всех браузерах). На изменяемом элементе щелкам правой кнопкой мыши (далее ПКМ) и выбираем пункт «Просмотр кода элемента»:

kak-otkrit-prosmotr-koda-elementa

 

В появившихся окошках мы увидим структуру нашего документа в HTML, а также таблицу применяемых стилей.
kak-prosmotret-kod-elementa

В окне с CSS стилями можно добавлять селекторы и изменять правила, как душе угодно, наглядно наблюдая, как изменится форма подписки. Не бойтесь экспериментировать, непосредственно в файле style.css никаких изменений производиться не будет.

Когда получившийся результат нас устроит, скопируем и вставим правила в .css файл.
css-prosmotr-koda-elementa

Первым делом я выровняю надпись и поле ввода в окне формы.
peremestit-pole-vvoda-margin

Чтобы добавить желаемый шрифт, воспользуемся библиотекой Google fonts. В данном случае я использую шрифт Bad Script. Учтите, не желательно подключать большое количество шрифтов, чтобы не замедлять загрузку страницы.

Следуя инструкции на сайте, я подключаю его в HTML файле между тегами <head>…</head>, затем задаю использование в CSS.

.text {
font-family: 'Bad Script', cursive;
margin: 90px 0px 10px 135px;
font-size: 19px;
}

 

Следующим идет блок с полем ввода и кнопкой. При желании его размеры можно прикинуть в Фотошопе (либо с помощью линейки):
razmer-polya-vvoda

Там же при помощи пипетки определяем цвет текстового поля и задаем его нашему блоку. Добавляем внутреннюю тень.

.vvod {
width: 220px;
height: 34px;
background: #f3f3f3;
margin: 0 90px 0;
box-shadow: inset 0 2px 4px #CECECE; /* внутренняя тень */
}

 

Немножко о тени объекта:
box-shadow-opisanie

Добавляем нашу кнопку.

.vvod input[type="image"] {
background: url(img/kn.png);
cursor: pointer; /* курсор меняется на изображение руки при наведении*/
display: block;
border: none;
width: 51px;
height: 34px;
float: right;
margin-top: -1px;
-webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
-ms-transition: background 0.5s;
}
.vvod input[type="image"]:hover {  /* вид кнопки при наведении курсора */
background: url(img/knoh.png);
}

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

В тех случаях, где это не стоит по умолчанию, для того, чтобы неактивная и активная кнопки плавно переходили друг в друга, задаем объект и время изменения с учетом разных браузеров:

-webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
transition-delay: 0.5s;  /*задерживаем переход*/ 

 

Текстовое поле

При оформлении поля ввода следует учесть один нюанс. Как мы видим на скриншоте, при автозаполнении Google Chrome (и другие браузеры на основе вебкит) автоматически выделяет поле желтым цветом.
avtozapolnenie-v-forme-podpiski

Если нам это не нужно (как в моем случае), можно попробовать исправить, добавив правило в начале файла стилей. Я задаю тут настройки аналогично исходной форме (при помощи двух теней).

input:-webkit-autofill {
-webkit-box-shadow: inset 0 2px 4px #CECECE, 
inset 0 0 0 50px #f3f3f3; 
-webkit-text-fill-color: black; /* При желании сюда можно добавить изменение цвета текста */
}

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

.vvod input[type="text"] {
height: 25px;
float: left;
width: 154px;
border: none;
background: none;
outline: none; /* выделение границ при активации поля */
padding: 5px;
padding-left: 10px;
font-family: 'Didact Gothic', cursive;
font-size: 16px;
color: #969393;
}

Вот и все =) наша форма готова.

gotovaya-forma-podpiski

Результаты урока:

CSS:

input:-webkit-autofill {
-webkit-box-shadow: inset 0 2px 4px #CECECE,  
inset 0 0 0 50px #f3f3f3;
}
#forma {
width: 400px;
height: 300px;
overflow-y: hidden;
background-image: url(img/forma.png);
}
.text {
font-family: 'Bad Script', cursive;
margin: 90px 0px 10px 135px;
font-size: 19px;
}
.vvod {
width: 220px;
height: 34px;
background: #f3f3f3;
margin: 0 90px 0;
box-shadow: inset 0 2px 4px #CECECE;
}
.vvod input[type="text"] {
height: 25px;
float: left;
width: 154px;
border: none;
background: none;
outline: none;
padding: 5px;
padding-left: 10px;
font-family: 'Didact Gothic', cursive;
font-size: 16px;
color: #969393;
}
.vvod input[type="image"] {
background: url(img/kn.png);
cursor: pointer;
display: block;
border: none;
width: 51px;
height: 34px;
float: right;
margin-top: -1px;
   -webkit-transition: background 0.5s;
   -moz-transition: background 0.5s;
   -o-transition: background 0.5s;
   ms-transition: background 0.5s;
transition: all 0.5s;
transition-delay: 0.5s;
}
/*.vvod input[type="image"]:hover {
background: url(img/kn_hover.png);
}*/
.vvod input[type="image"]:hover {
background: url(img/knoh.png);
}

HTML:

<div id="forma">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RatFelt', 'popupwindow', 
'scrollbars=yes,width=550,height=520');return true"> 
<div class="text">Введите ваш email:</div>
<div class="vvod"><input type="text" name="email"/>
<input type="hidden" value="RatFelt" name="uri"/>
<input type="hidden" name="loc" value="ru_RU"/>
<input type="image" /></div>
</div>
</form>

 

2. Как добавить форму подписки в сайдбар WordPress и в конец статьи

 

Добавить форму подписки в сайдбар блога можно несколькими способами:

  1. Внести код формы в sidebar.php;
  2. Добавить в админке в разделе «Внешний вид/Виджеты» в текстовый виджет;
  3. Воспользоваться плагином. К примеру, FeedBurner Email Subscription или подобными.

Добавление формы в конец статьи:

  1. Редактируя single.php;
  2. Воспользоваться плагином FeedBurner Email Subscription или подобными.

 

Все используемые изображения сохраняем в папке images нашей темы через FTP-клиент. При этом полная ссылка на картинку будет выглядеть так: «http://Ваш_сайт.ru/wp-content/themes/Ваша_тема/images/название_изображения»

 

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

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

dobavit_text_widget

Заходим в админке «Внешний вид/Виджеты», выбираем виджет «Текст» и перетаскиваем в нужное место в сайдбаре. Прописываем код нашей формы со всеми классами и идентификаторами, сохраняем. В файле style.css прописываем соответствующие стили.

text_widget

Скорее всего основной фон формы подписки нам придется задавать самому текстовому виджету, а не форме. Для этого щелкнем правой кнопкой мыши по форме подписки и во мере вложенности найдем идентификатор нашего текстового виджета. В моем случае это #text-9.

html_text_widgetcss_text_widget

Чтобы добавить форму подписки после статьи, откроем файл single.php. Содержание поста у нас заключено в тег <article>…</article>. Так что вставляем наш код перед закрывающим тегом.

podpiska_posle_stati

Ссылки на социальные сети

Изображения-ссылки на страницы в социальных сетях добавляем перед закрывающим тегом </form>.

/* Здесь идет код формы подписки*/
….
/* Социальные сети */
<div class="ico"><a href="http://feeds.feedburner.com/RatFelt" rel="nofollow" target="_blank"><img src="http://rat-felt.ru/wp-content/themes/xmarkup_res/images/rss.png" width="70" height="70" /></a>
<a href="http://vk.com/rat_felt" rel="nofollow" target="_blank"><img src="http://rat-felt.ru/wp-content/themes/xmarkup_res/images/vkontakte.png" width="70" height="70" /></a>
<a href="https://twitter.com/Rat_felt" rel="nofollow" target="_blank"><img src="http://rat-felt.ru/wp-content/themes/xmarkup_res/images/twitter.png" width="70" height="70" /></a></div>
</form></div>

 

Либо второй вариант: изображения социальных сетей задаются в файле стилей (в этом случае к каждому изображению добавляем свой класс):

<a class="ico-vk" href="#" title="Следить ВКонтакте!" target="_blank"></a>

 

Соответствующее CSS правило:

a.ico-vk {
background: url(img/vkhover.png) no-repeat;
display:block;
width:28px;
height:28px;
}

 

Чтобы добавить эффект при наведении курсора, воспользуемся псевдоклассом :hover.

/* К примеру, мы можем уменьшить прозрачность (или увеличить): */
a.ico-vk:hover {
opacity: 0.8;
}

/* Изменить цвет или внешний вид картинки: */
a.ico-vk:hover {	
background: url(img/vk.png) no-repeat; 
}

/* А также добавить или убрать тень, свечение и т.д… */

Напоследок проверяем, как смотрится наша форма подписки в других браузерах.

 

Скачать МАТЕРИАЛЫ и ФОРМЫ

Первая часть урока «Форма подписки из PSD»

На главную страницу

 

P.S. Что ж, урок получился объемным, подробным и с большим количеством изображений. Надеюсь, он кому-нибудь поможет…

Не забывайте делиться результатами 😉

 

С уважением, Анастасия

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

  1. Наталия Турович

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

    В гугл-хроме и опере — все отлично, в эксплорере 11-м поле ввод е-мейла немного съехало вниз, но в целом терпимо, а вот в Мазиле получился полный «алес капут». Не могу понять, как настроить корректное отображение. Может быть вы сможете подсказать?

    Вот пример: http://nataliturovich.ru/servis-email-rassylok-registraciya-v-smartrespondere/

    Ответить
    1. Анастасия

      Здравствуйте, Наталья
      Вам надо добавить к текстовому полю

      input.auto-style2 {
          display: block;
      }

      А у кнопки изменить

      .auto-style3 {
          margin-top: -32px;
      }

      на

      .auto-style3 {
          margin-top: -8px;
      }

      Должно сработать

      Ответить
      1. Наталия Турович

        Анастасия, вы волшебница 🙂
        Все получилось! В Мазиле есть небольшое смещение, но это уже мелочь.

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

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

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

        Ответить
        1. Анастасия

          Рада, что помогла =) Хотелось бы вам еще посоветовать кнопки и текстовые поля все ж не картинкой добавлять, а кодом, так легче грузиться будет.
          Я все планирую под Смартреспондер статью написать, заодно и про виджет собственный про него и дизайн формы, но неекогда =(

          Ответить
          1. Наталия Турович

            Да, вы правы, можно будет потом проэскперементировать и заменить.

            Кстати, хотела вас спросить, а почему вы не пишете свои уроки в видеоформате? И получится очень наглядно для посетителей и дополнительный пиар вашего блога благодаря ютубу и гораздо быстрее и проще, чем готовить скриншоты и выписывать код. Для поисковиков и тех, кто любит читать, а не смотреть, можно еще потом ниже написать все текстом с картинками, как у вас.

            Ответить
          2. Анастасия

            Я сейчас совсем редко что-то пишу, ребёнку полтора года, заказов много, успеваю только основное. Видео есть в планах, когда ребёнок в сад пойдёт))
            Да и пока рукодельным интереснее заниматься, а тут только дизайн сменила, статьи переписывать надо

            Ответить
          3. Наталия Турович

            Поняла вас. Ребенок — это хорошо 🙂 Была рада познакомиться. Надеюсь, еще не раз пообщаемся.

            Ответить
          4. Анастасия

            При желании мне всегда в вконтакте писать можно)

            Ответить
          5. Наталия Турович

            Буду иметь в виду 🙂

            Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

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