Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

Обновление: 28.102017. Внесены небольшие структурные изменения в html и css

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

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

Всего комментариев: 2

  • Admin: 18 июля, 2015 в 01:07

    Спасибо взял себе на сайт для адаптации в форму для участие в акции «розыгрыш iPhone 5c»

    Ответить
  • domtv24: 28 августа, 2018 в 17:47

    Отличный вид, благодарю, сделаю себе!

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>