CSS — Макет Контактної Форми

31

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

CSS - Макет контактной формы

Дизайн форми з нотками мінімалізму, спокійні не виразні тони оболонки, злегка розмиті межі полів вводу з вбудованими шрифт-іконками від Font Awesome. Для базового контейнера додав легку зовнішню тінь. В результаті вийшов цілком собі автономний блок з вбудованою формою зворотнього зв’язку.
Стилі шрифт-іконок Font Awesome ви можете скачати або ж підключити безпосередньо з сайту розробника: CSS контактної форми виділив в окремий файл style.css, це більше для демо, вам же краще всього скопіювати стилі відносяться до форми і вставити їх в свій файл стилів.
При формуванні html-каркаса використовував як стандартні теги форм і базовий блоковий елемент div, так і тег з обойми Html5. Поля «Ім’я» і «E-mail» розбив на дві колонки, що дозволяє їм, при зменшенні розмірів основного блоку, розташовують вертикально, не руйнуючи загальну структуру форми.

  • Результат
  • HTML
  • CSS
Відправити

Відправити

.contact {
max-width: 467px;
min-width: 320px;
margin: 0 auto;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.contact * {
outline: none;
border: 0;
background: none;
}
form fieldset {
display: block;
padding: 25px 30px;
}
form .row {
margin: 0 -15px;
}
form .col-2 {
width: 50%;
}
form .київ {
float: left;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
form .row:after {
content: ";
display: table;
clear: both;
}
form section {
margin-bottom: 20px;
}
form .input, form .textarea, form .radio, form .checkbox, form .button {
position: relative;
display: block;
}
form .fa-append {
position: absolute;
top: 5px;
right: 5px;
width: 29px;
height: 29px;
padding-left: 3px;
border-left: 1px solid #e5e5e5;
font-size: 15px;
line-height: 29px;
text-align: center;
color: #ccc;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-user:before {
content: "\f007";
}
.fa-envelope-o:before {
content: "\f003";
}
.fa-tag:before {
content: "\f02b";
}
.fa-comment:before {
content: "\f075";
}
form .input .fa-append + input, form .textarea .fa-append + textarea {
padding-right: 46px;
}
form .input input, form .textarea textarea {
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
height: 39px;
padding: 8px 10px;
outline: none;
border: 2px solid #e5e5e5;
border-radius: 0;
background: #fff;
font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
color: #404040;
appearance: normal;
-moz-appearance: none;
-webkit-appearance: none;
transition: border-color 0.3 s;
-o-transition: border-color 0.3 s;
-ms-transition: border-color 0.3 s;
-moz-transition: border-color 0.3 s;
-webkit-transition: border-color 0.3 s;
}
form .textarea textarea {
height: auto;
resize: none;
overflow:auto;
}
form .input:hover input,
form .textarea:hover textarea,
form .checkbox:hover i {
border-color: #00BDAB;
}
form .input input:focus,
form .textarea textarea:focus,
form .checkbox input:focus + i {
border-color: #009688;
}
form .button {
float: right;
height: 39px;
overflow: hidden;
margin-left: 20px;
padding: 0 20px;
outline: none;
border: 0;
background-color: #009688;
font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2 s;
-o-transition: opacity 0.2 s;
-ms-transition: opacity 0.2 s;
-moz-transition: opacity 0.2 s;
-webkit-transition: opacity 0.2 s;
}
form .button:hover {
opacity: 1;
}
@media screen and (max-width: 470px){
.col, .col-2 { float: none !important; width: 100% !important;}
}

.contact {
max-width: 467px;
min-width: 320px;
margin: 0 auto;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.contact * {
outline: none;
border: 0;
background: none;
}
form fieldset {
display: block;
padding: 25px 30px;
}
form .row {
margin: 0 -15px;
}
form .col-2 {
width: 50%;
}
form .київ {
float: left;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
form .row:after {
content: “;
display: table;
clear: both;
}
form section {
margin-bottom: 20px;
}
form .input, form .textarea, form .radio, form .checkbox, form .button {
position: relative;
display: block;
}
form .fa-append {
position: absolute;
top: 5px;
right: 5px;
width: 29px;
height: 29px;
padding-left: 3px;
border-left: 1px solid #e5e5e5;
font-size: 15px;
line-height: 29px;
text-align: center;
color: #ccc;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-user:before {
content: “\f007”;
}
.fa-envelope-o:before {
content: “\f003”;
}
.fa-tag:before {
content: “\f02b”;
}
.fa-comment:before {
content: “\f075”;
}
form .input .fa-append + input, form .textarea .fa-append + textarea {
padding-right: 46px;
}
form .input input, form .textarea textarea {
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
height: 39px;
padding: 8px 10px;
outline: none;
border: 2px solid #e5e5e5;
border-radius: 0;
background: #fff;
font: 13px/19px ‘Open Sans’, Helvetica, Arial, sans-serif;
color: #404040;
appearance: normal;
-moz-appearance: none;
-webkit-appearance: none;
transition: border-color 0.3 s;
-o-transition: border-color 0.3 s;
-ms-transition: border-color 0.3 s;
-moz-transition: border-color 0.3 s;
-webkit-transition: border-color 0.3 s;
}
form .textarea textarea {
height: auto;
resize: none;
overflow:auto;
}
form .input:hover input,
form .textarea:hover textarea,
form .checkbox:hover i {
border-color: #00BDAB;
}
form .input input:focus,
form .textarea textarea:focus,
form .checkbox input:focus + i {
border-color: #009688;
}
form .button {
float: right;
height: 39px;
overflow: hidden;
margin-left: 20px;
padding: 0 20px;
outline: none;
border: 0;
background-color: #009688;
font: 300 13px/39px ‘Open Sans’, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2 s;
-o-transition: opacity 0.2 s;
-ms-transition: opacity 0.2 s;
-moz-transition: opacity 0.2 s;
-webkit-transition: opacity 0.2 s;
}
form .button:hover {
opacity: 1;
}
@media screen and (max-width: 470px){
.col, .col-2 { float: none !important; width: 100% !important;}
}

Як я писав вище, у формі використовується новий елемент міститься в HTML5 , Internet Explorer нижче 9-ї версії не підтримує нові елементи, а значить необхідно підключити Javascript файл html5.js до HTML документу, який дозволить IE-шке побачити і зрозуміти ці елементи.
Робиться це просто, в розділі розмістіть наступне:


Користувачі все частіше для перегляду сайтів використовують мобільні телефони, невеликі ноутбуки, планшетні пристрої, такі як iPad або Playbook і т. д. Тому, звичний дизайн з фіксованою шириною більше не прокатує. За допомогою media queries задавши CSS правила для розміру екрану менше 470px, спробував зробити блок форми більш-менш адаптивним, сподіваюся вийшло)). Щоб зробити блок форми гумовим використовував відсотки (%), а щоб уникнути будь-яких протиріч застосував !important.

Internet Explorer 8 і більш ранніх версій не підтримує CSS3 media queries. Виправити становище можна, додавши Javascript файл css3-mediaqueries.js в роботу.

Простеньку валідацію форми організував використовуючи атрибут required, який встановлює поля форми є обов’язковими для заповнення перед відправкою форми на сервер. Тепер якщо обов’язкове поле залишити порожнім, браузер виведе попередження, а форма відправлена не буде. Звичайно це далеко не повноцінний валідатор форм, але стаття не про це, кому воно треба, зможе легко прикрутити, як php-обробник так і валідатор.

На цьому мабуть і все. Вихідні як завжди дбайливо упакував в архів і закинув на Яндекс.Диск:

Завантажити Вихідні Коди

Виникнуть питання, пишіть у коментарях, тільки будь ласка, не смикайте з приводу скрипта-обробника, це просто макет, шаблон якщо хочете, а про обробник писав в інших темах і не раз.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: