Как сделать форму подписки из PSD (Часть 2)
Опубликовано: 01.09.2018
![Как сделать шаблон для WordPress из PSD Макета #10. Страница Контакты. Форма контактов и карта. видео Как сделать форму подписки из PSD (Часть 2)](https://i.ytimg.com/vi/bOXIcpBbxUI/mqdefault.jpg)
Доброго времени суток, дорогие читатели!
Это вторая часть урока по созданию формы подписки из PSD макета. В ней я покажу, как сделать HTML форму из подготовленных элементов и как поставить ее в сайдбар блога или в конец статьи. Также расскажу, как добавить в окошко формы иконки-ссылки на социальные сети.
Первая часть
Из данного урока вы узнаете:
Урок Photoshop: Как создать форму авторизации. How to make Login Form Onetwostudy
Часть первая
Как вырезать необходимые элементы из PSD макета.Часть вторая
Как сделать HTML форму подписки из готового макета; Как добавить форму подписки в сайдбар WordPress или в конец поста; Как добавить социальные кнопки в окошко формы.Также сможете скачать материалы урока и шаблоны форм в формате PSD.
Как сделать шаблон для WordPress из PSD Макета #1. Уроки программирования под WordPress.
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 файл, вы можете скачать его конечный вариант в конце урока. Ниже на изображении я подписала, какая часть кода за что отвечает:
![](https://rat-felt.ru/2014/08/ubrat-lishnee-iz-formi-podpiski.jpg)
Удалим лишнее, заменим, где требуется. Вот таким станет код:
<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>
Внешний вид формы подписки после изменения:
![](https://rat-felt.ru/2014/08/podpiska-bez-lishnego.jpg)
Зададим длину, ширину и поставим на фон основное изображение:
#forma { width: 400px; /* длина */ height: 300px; /* высота */ overflow-y: hidden; /* убирает прокрутку */ background-image: url(img/forma.png); /* фоновое изображение */ }
Совет №1: давайте классам и идентификаторам понятные имена, потом будет проще разобраться, какой селектор к чему относится! Наглядно при помощи отступов Tab соблюдайте иерархию вложенных блоков.
Совет №2: закомментируйте каждый стиль в .css файле!
Как вы видите, теперь нам потребуется правильно расположить текст, текстовое поле и добавить кнопку-изображение для отправки данных.
Задаем класс для надписи «Введите ваш e-mail»: <div class=”text”>…</div>; На макете формы кнопка и поле ввода расположены на одной линии, поэтому задаем для них общий класс: <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(впрочем, аналогичные возможности разработчика есть почти во всех браузерах). На изменяемом элементе щелкам правой кнопкой мыши (далее ПКМ) и выбираем пункт «Просмотр кода элемента»:
![](https://rat-felt.ru/2014/08/kak-otkrit-prosmotr-koda-elementa.jpg)
В появившихся окошках мы увидим структуру нашего документа в HTML, а также таблицу применяемых стилей.
![](https://rat-felt.ru/2014/08/kak-prosmotrey-kod-elementa.jpg)
В окне с CSS стилями можно добавлять селекторы и изменять правила, как душе угодно, наглядно наблюдая, как изменится форма подписки. Не бойтесь экспериментировать, непосредственно в файле style.css никаких изменений производиться не будет.
Когда получившийся результат нас устроит, скопируем и вставим правила в .css файл.
![](https://rat-felt.ru/2014/08/css-prosmotr-koda-elementa.jpg)
Первым делом я выровняю надпись и поле ввода в окне формы.
![](https://rat-felt.ru/2014/08/peremestit-pole-vvoda-margin.jpg)
Чтобы добавить желаемый шрифт, воспользуемся библиотекой Google fonts. В данном случае я использую шрифт Bad Script. Учтите, не желательно подключать большое количество шрифтов, чтобы не замедлять загрузку страницы.
Следуя инструкции на сайте, я подключаю его в HTML файле между тегами <head>…</head>, затем задаю использование в CSS.
.text { font-family: 'Bad Script', cursive; margin: 90px 0px 10px 135px; font-size: 19px; }
Следующим идет блок с полем ввода и кнопкой. При желании его размеры можно прикинуть в Фотошопе (либо с помощью линейки):
![](https://rat-felt.ru/2014/08/razmer-polya-vvoda.jpg)
Там же при помощи пипетки определяем цвет текстового поля и задаем его нашему блоку. Добавляем внутреннюю тень.
.vvod { width: 220px; height: 34px; background: #f3f3f3; margin: 0 90px 0; box-shadow: inset 0 2px 4px #CECECE; /* внутренняя тень */ }
Немножко о тени объекта:
![](https://rat-felt.ru/2014/08/box-shadow-opisanie.jpg)
Добавляем нашу кнопку.
.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 (и другие браузеры на основе вебкит) автоматически выделяет поле желтым цветом.
![](https://rat-felt.ru/2014/08/avtozapolnenie-v-forme-podpiski.jpg)
Если нам это не нужно (как в моем случае), можно попробовать исправить, добавив правило в начале файла стилей. Я задаю тут настройки аналогично исходной форме (при помощи двух теней).
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; }Вот и все =) наша форма готова.
Результаты урока:
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 и в конец статьи
Добавить форму подписки в сайдбар блога можно несколькими способами:
Внести код формы в sidebar.php; Добавить в админке в разделе “Внешний вид/Виджеты” в текстовый виджет; Воспользоваться плагином. К примеру, FeedBurner Email Subscription или подобными.Добавление формы в конец статьи:
Редактируя single.php; Воспользоваться плагином FeedBurner Email Subscription или подобными.
Все используемые изображения сохраняем в папке images нашей темы через FTP-клиент. При этом полная ссылка на картинку будет выглядеть так: «http:// Ваш_сайт.ru /wp-content/themes/ Ваша_тема /images/ название_изображения »
Использование плагинов я в данном уроке рассматривать не буду, поэтому давайте разберемся с виджетами и выберем место для формы подписки на рассылку в .php файлах шаблона WordPress.
При добавлении формы следует быть готовым к тому, что скорее всего нам придется подгонять ее размеры и настраивать отступы.
Заходим в админке «Внешний вид/Виджеты», выбираем виджет «Текст» и перетаскиваем в нужное место в сайдбаре. Прописываем код нашей формы со всеми классами и идентификаторами, сохраняем. В файле style.css прописываем соответствующие стили.
Скорее всего основной фон формы подписки нам придется задавать самому текстовому виджету, а не форме. Для этого щелкнем правой кнопкой мыши по форме подписки и во мере вложенности найдем идентификатор нашего текстового виджета. В моем случае это #text-9.
Чтобы добавить форму подписки после статьи, откроем файл single.php. Содержание поста у нас заключено в тег <article>…</article>. Так что вставляем наш код перед закрывающим тегом.
Ссылки на социальные сети
Изображения-ссылки на страницы в социальных сетях добавляем перед закрывающим тегом </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. Что ж, урок получился объемным, подробным и с большим количеством изображений. Надеюсь, он кому-нибудь поможет…
Не забывайте делиться результатами ????
С уважением, Анастасия