CSS – Макет Контактной Формы

Много раз рассказывал о различных решениях создания контактных форм, подробно расписывал варианты вёрстки и оформления с помощью CSS3.
Сегодня хочу представить вам ещё один css-макет оригинальной формы обратной связи. Ничего не обычного и сколь-нибудь вычурного, всё просто, стандартный html-каркас формы помещённый в div-контейнер, поля ввода размещены в отдельные секции, а плавающие размеры позволяют корректно отображаться при просмотре на экранах различных пользовательских устройств.

 

 
Дизайн формы с нотками минимализма, спокойные не выразительные тона оболочки, слегка размытые границы полей ввода с встроенными шрифт-иконками от Font Awesome. Для базового контейнера добавил лёгкую внешнюю тень. В итоге получился вполне себе автономный блок с встроенной формой обратной связи.
Стили шрифт-иконок Font Awesome вы можете скачать или же подключить непосредственно с сайта разработчика:

CSS контактной формы выделил в отдельный файл style.css, это больше для демо, вам же лучше всего скопировать стили относящиеся к форме и вставить их в свой файл стилей.
При формировании html-каркаса использовал как стандартные теги форм и базовый блочный элемент div, так и тег <section> из обоймы Html5. Поля ввода «Имя» и «E-mail» разбил на две колонки, что позволяет им, при уменьшении размеров основного блока, выстраиваться вертикально, не разрушая общую структуру формы.