<
  • Главная
Статьи

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

Опубликовано: 01.09.2018

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

Как сделать шаблон для WordPress из PSD Макета #10. Страница Контакты. Форма контактов и карта.

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



Это вторая часть урока по созданию формы подписки из 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 файл, вы можете скачать его конечный вариант в конце урока. Ниже на изображении я подписала, какая часть кода за что отвечает:

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

<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>

 

Внешний вид формы подписки после изменения:

Чтобы приступить к описанию формы в файле 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 файле!

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

Задаем класс для надписи «Введите ваш 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(впрочем, аналогичные возможности разработчика есть почти во всех браузерах). На изменяемом элементе щелкам правой кнопкой мыши (далее ПКМ) и выбираем пункт «Просмотр кода элемента»:

 

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

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

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

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

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

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

.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="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 (и другие браузеры на основе вебкит) автоматически выделяет поле желтым цветом.

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

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. Что ж, урок получился объемным, подробным и с большим количеством изображений. Надеюсь, он кому-нибудь поможет…

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

 

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



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью

rss