Как сделать форму подписки из 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="https://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="https://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="https://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
Отправить ответ

avatar
1 Цепочка комментария
8 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
2 Авторы комментариев
АнастасияНаталия Турович Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Наталия Турович
Гость

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

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

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