Приклад верстки контактної форми для сайту з допомогою CSS3

49

Всім доброго часу доби!
Контактна форма дуже важливий елемент будь-якого сайту або блогу. Дивно, що оформлення форм зворотного зв’язку не приділяється належної уваги, за рідкісним винятком, це стандартний набір полів введення, обрамлені куцій рамкою і банальна кнопка «Відправити». У свій час, я опублікував ряд статей присвячених контактним формами.
У статті про стилі контактної форми, ми розглянули варіант верстки з використанням зображень для формування зовнішнього вигляду форми. Потім, ми навчилися вбудовувати форму в модальне вікно. У коментарях до уроків, читачі час від часу стали цікавитися, чи можливо створити таку ж форму, але вже з використанням технологій CSS3.

Сьогодні, в цьому уроці, постараюся показати наочний приклад верстки контактної форми для сайту з допомогою магії (властивостей і правил) CSS3, без додаткових файлів зображень в оформленні. Ми разом з вами, вибудуємо основний html-каркас, використовуючи властивості і правила CSS з новими функціями CSS3, сформуємо легкий для сприйняття, оригінальний стиль форми зворотнього зв’язку.

Для початку, можете подивитися приклад того, що повинно вийти в результаті:

Демо

Перш ніж почнемо, нагадую, що при верстці даної форми за допомогою CSS3 в сучасних браузерах все виглядає більш ніж чудово, в IE 8 і нижче, проскакують деякі недоліки. На мій погляд, вони не особливо критичні, тому можна сміливо використовувати цю форму на своїх сайтах.

HTML-розмітка контактної форми

Не став вигадувати нічого нового, все за стандартами, хіба що для групування елементів форми використовував елемент і для зв’язку з елементами форми. Хоча, це теж добре всім знайомий і стандартний макет форм.

="form" action="/" method="post"> >Пишіть листи!> > > > > > > > > > >