Форма подписки является неотъемлемой частью любого сайта, форму можно встретить буквально на каждом сайте, и это не удивительно, ведь она позволяет вернуть пользователей на сайт, сообщив им о новых материалах или комментариях, в данном уроке мы рассмотрим как стилизовать форму подписки придав ей элегантный вид. Также в форме будут использоваться подсказки, которые будут уведомлять о неправильно заполненном поле. Данную форму легко редактировать, и легко настроить под дизайн своего сайта.

Несмотря на использование CSS3, форма корректно отображается практически во всех браузерах. Для начала мы рассмотрим структуру HTML. В данном примере используется buttton вместо классического input type="submit". Так будет проще указать элемент формы без применения ID или классов.

В HTML5 есть такие атрибуты как, type=»email», placeholder или required. Для реализации текста по умолчанию в полях ввода в старых браузерах в проекте используется плагин jQuery Placeholder.

Для создания фона был разработан шаблон — изображение 3x4. Затем шаблон преобразовали в строку base64 с помощь онлайн сервиса Image to Base64 Converter. А строка используется в установках фона для элемнета #signup. Для имитации стопки бумаги используются псевдо-элементы ::before и ::after.

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

Теперь создадим простой градиент для кнопки:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.