CSS-стилі для форм зворотного звязку

48

Форма зворотнього зв’язку, або якщо по іншому, контактна форма, один з найбільш важливих елементів будь-якого сайту. І звичайно ж, як і всі інші елементи інтерфейсу, контактні форми, повинні бути, як-то зовні стилізовані і оформлені, щоб привернути увагу користувачів і розташувати до спілкування.
Пропоную на ваше огляд парочку варіантів стилів форм зворотного зв’язку, виключно засобами CSS3, без використання додаткових зображень в оформленні. Нічого зайвого, лише короткі фрагменти коду (сніппети) CSS для контактних форм, виконаних в світлих і темних тонах.

1. Контактна форма в темних тонах

Залежно від кольору основного фону сторінки, візуально буде змінюватися базовий колір фону самої форми. Розмір форми залежить від розмірів контейнера, в якому форма буде розташована.

Стили CSS для формы контактов

ДемоСкачать

HTML

Html каркас форми стандартний, необхідні поля введення і кнопка «Надіслати», для зв’язки з CSS, кожному елементу форми присвоєно певний клас, нічого складного, розібратися буде неважко.

<form>
<input name="name placeholder="Вкажіть ваше ім'я!" class="name" required />
<input name="emailaddress" placeholder="Вкажіть ваш Email!" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Введіть ваше повідомлення:" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="Відправити" />
</form>

CSS

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

/* Базовий стиль форми */
form {
margin: 0 auto;
max-width: 95%;
padding: 30px 30px 6px 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
/* Поле повідомлення */
textarea{
background: rgba(255, 255, 255, 0.4);
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Open Sans', sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
 padding-left:25px;
padding-right:20px;
padding-top:12px;
margin-bottom:20px;
overflow:hidden;
}
/* Поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Open Sans', sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
 padding-left:20px;
padding-right:20px;
margin-bottom:20px;
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
/* Стилі для кнопки відправити */
.btn {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
 color: #e1e1e1;
}
.btn:hover {
border: 1px solid #253737;
 text-shadow: #333333 0 1px 0;
 background: #416b68;
 background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
 border: 1px solid #333333;
 background: #ffCC00;
 background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
 background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
 background: -moz-linear-gradient(top, #ffcc00, #ff6600);
 background: -ms-linear-gradient(top, #ffcc00, #ff6600);
 background: -o-linear-gradient(top, #ffcc00, #ff6600);
 background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
 color: #fff;
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
outline: none;
}

/* Базовий стиль форми */
form {
margin: 0 auto;
max-width: 95%;
padding: 30px 30px 6px 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
/* Поле повідомлення */
textarea{
background: rgba(255, 255, 255, 0.4);
width: 100%;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: ‘Open Sans’, sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:25px;
padding-right:20px;
padding-top:12px;
margin-bottom:20px;
overflow:hidden;
}
/* Поля вводу */
input {
width: 100%;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: ‘Open Sans’, sans-serif;
font-size:18px;
font-weight: 300;
color:#fff;
padding-left:20px;
padding-right:20px;
margin-bottom:20px;
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.email {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
input.message {
background: rgba(255, 255, 255, 0.4);
padding-left:25px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
/* Стилі для кнопки відправити */
.btn {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
padding: 10.5 px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
.btn:hover {
border: 1px solid #253737;
text-shadow: #333333 0 1px 0;
background: #416b68;
background: -webkit-gradient(linear, left, top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
.btn:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #333333;
background: #ffCC00;
background: -webkit-gradient(linear, left, top, left bottom, from(#ffCC00), to(#ff6600));
background: -webkit-linear-gradient(top, #ffcc00, #ff6600);
background: -moz-linear-gradient(top, #ffcc00, #ff6600);
background: -ms-linear-gradient(top, #ffcc00, #ff6600);
background: -o-linear-gradient(top, #ffcc00, #ff6600);
background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
outline: none;
}

2. Контактна форма в світлих тонах

Другий варіант оформлення форми зворотного зв’язку представлений в світлих тонах, розміри форми (ширина, висота), як і в першому варіанті не фіксовані, і легко будуть вписуватися в розміри контейнера де ця форми буде розташована.

Стили оформления контактной формы

ДемоСкачать

HTML

Як і в першому варіанті, структура Html контактної форми стандартна, елементи форми з певними класами, відповідними класами CSS.

<form>
<input name="name placeholder="Вкажіть ваше ім'я!" class="textbox" required />
<input name="emailaddress" placeholder="Вкажіть ваш Email!" class="textbox" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Введіть ваше повідомлення:" class="message" required></textarea>
<input name="submit" class="button" type="submit" value="Відправити" />
</form>

CSS

При формуванні базових розмірів форм і внутрішніх елементів, використовував відсоткові значення ширини width, завдяки чому, форма легко підлаштовується під розміри контейнера, у якому вона буде розташована. Колірна гамма кнопки «Надіслати», її розміри і розташування, легко змінюються, досить поекспериментувати з певними значеннями.

/* Базові стилі форми */
form{
margin:0 auto;
max-width:95%;
box-sizing:border-box;
padding:40px;
border-radius:5px;
background:RGBA(255,255,255,1);
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, .45);
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, .45);
}
/* Стилі полів вводу */
.textbox{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
font-size:18px;
padding:10px;
margin-bottom:30px;
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 2px solid;
color:rgba(24,149,215,1);
}
/* Стилі текстового поля */
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:18px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
margin-bottom:30px;
overflow:hidden;
}
/* Базові стилі кнопки */
.button{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
box-sizing:border-box;
padding:10px;
background:#90c843;
 color:#FFF;
 font-family: 'Open Sans', sans-serif;
font-weight:400;
font-size: 16pt;
transition:background .4s;
cursor:pointer;
}
/* Зміна фону кнопки при наведенні */
.button:hover{
background:#80b438;
}

/* Базові стилі форми */
form{
margin:0 auto;
max-width:95%;
box-sizing:border-box;
padding:40px;
border-radius:5px;
background:RGBA(255,255,255,1);
-webkit-box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, .45);
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, .45);
}
/* Стилі полів вводу */
.textbox{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
font-family: ‘Open Sans’, sans-serif;
font-size:18px;
padding:10px;
margin-bottom:30px;
}
.message:focus,
.textbox:focus{
outline:none;
border:rgba(24,149,215,1) 2px solid;
color:rgba(24,149,215,1);
}
/* Стилі текстового поля */
.message{
background: rgba(255, 255, 255, 0.4);
width:100%;
height: 120px;
border:rgba(0,0,0,.3) 2px solid;
box-sizing:border-box;
-moz-border-radius: 3px;
font-size:18px;
font-family: ‘Open Sans’, sans-serif;
-webkit-border-radius: 3px;
border-radius: 3px;
display:block;
padding:10px;
margin-bottom:30px;
overflow:hidden;
}
/* Базові стилі кнопки */
.button{
height:50px;
width:100%;
border-radius:3px;
border:rgba(0,0,0,.3) 0px solid;
box-sizing:border-box;
padding:10px;
background:#90c843;
color:#FFF;
font-family: ‘Open Sans’, sans-serif;
font-weight:400;
font-size: 16pt;
transition:background .4s;
cursor:pointer;
}
/* Зміна фону кнопки при наведенні */
.button:hover{
background:#80b438;
}

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

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

Буду дуже вдячний, якщо поділитеся посиланням на запис з друзями в своїх соц. мережах.