Створюємо спливаючу контактну форму для сайту

55

Всі ми звикли бачити контактні форми на окремих, спеціально створених сторінках, для зворотного зв’язку з користувачами. Як правило, на таких сторінках крім контактних форм, розміщують багато іншої інформації для взаємодії і комунікації. Механізм налагоджений, перевірений роками і відмінно працює. Але в деяких випадках виникає необхідність вивести окрему контактну форму у вигляді спливаючого вікна, не перенаправляючи користувачів на інші сторінки.
Свого часу ми розглядали, як вбудувати контактну форму у модальний працює на jQuery. Сьогодні ж, хочу познайомити вас з цікавим рішенням створення окремої, оригінально оформленої, екранної форми контактів для сайту.

Демо

На мій погляд, чудовий зразок засобів взаємодії з користувачами.

Приклад подивилися. Тепер, давайте розкладемо цю форму на складові, від створення загальної структури в Html, до формування зовнішнього вигляду макета з допомогою CSS.

HTML-код форми

Нічого надприродного, максимально простий каркас звичайної контактної форми, поміщений в блоковий елемент div з певним ідентифікатором і класом, для подальшого формування зовнішнього вигляду форми в css і взаємодії з невеликим javascript, який нам знадобиться для активації і закриття екранної форми.

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Так само, нам необхідно створити шар затемнення загального фону, при активації екранної форми. Виконати це завдання можна по різному, але ми мудрувати особливо не будемо і додамо ще один div, присвоївши йому ідентифікатор: id=”fade” і клас: class=”black-overlay”. Помістити його можете поряд з формою, щоб довго не шукати при необхідності.

У моєму прикладі, текстова посилання для виклику контекстної контактної форми, сформована з допомогою властивостей CSS3 у вигляді кнопки. Ви ж можете використовувати під це діло будь-яку картинку, пункт меню або фрагмент тексту, та все що завгодно, лише б в радість вам і не на горе нам)))

Зворотний зв'язок

Зворотний зв’язок

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

Закрити

Закрити

Завершальним штрихом html-розмітки нашої форми підключення до документа файлу стилів modal-contact-form.css, в якому ми будемо формувати всі необхідні елементи форми. Підключаємо по накатаній, для тих хто не в темі, поясню, в розділі між тегами … слід прописати таку місце:


Ось і все, давайте тепер подивимося на повний Html-код сторінки містить екранну форму зворотнього зв’язку:

Спливаюча контактна форма
Зворотний зв'язок
Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Спливаюча контактна форма
Зворотний зв’язок

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Перш ніж перейдемо до найцікавішого, до формування стилів нашої контактної форми за допомогою CSS, трохи відступлю. Найбільш уважні напевно помітили, що кнопки відкриття і закриття форми реалізовані у вигляді посилань з «глушилки» href=”javascript:void(0)”. Погано це або добре, точної відповіді для себе я так і не знайшов, використовую цей спосіб за звичкою. Хоча для елементів, на яких подія onclick обробляється скриптом, думається мені, логічніше і правильніше, використовувати , або

. При бажанні, ви завжди можете так і зробити з кнопками з даного прикладу.

Магія CSS

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

А ось, безпосередньо і сам CSS-код, нашої чудової форми, з невеликими коментарями, для ясності, і щоб уникнути зайвих питань:

/* встановлюємо шар затемнення фону,
** опрделяем позиції, колір та інтенсивність затемнення */
.black-overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
/* встановлюємо малюнок основи,
** опрделяем розміри і положення на екрані */
.envelope {
display: none;
position: absolute;
width: 600px;
height: 340px;
background: url(images/envelope.png) center no-repeat;
z-index:1002;
position: relative;
margin: 10% auto;
}
/* формуємо кнопку закриття,
** розміри, положення на формі */
.close-btn {
width: 31px;
height: 31px;
display: block;
cursor: pointer;/* для випадку застосування відмінних від тегів */
background: url(images/close.png);
text-indent: -4999px;
}
/* кнопка закриття при наведенні */
.close-btn:hover{
background: url(images/close-hover.png);
}
/* оформляємо заголовок форми */
.title {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size:22px;
font-weight: normal;
font-weight: 200;
text-align:left;
position: absolute;
top: 30px;
left: 40px;
/* можна замінити на іншу картинку
** або border-bottom: бла бла бла */
background: url(images/divider.png) no-repeat bottom;
color: #545151;
height: 40px;
width: 400px;
margin: 15px 0;
text-shadow: 1px 1px #FFF;/* тінь тексту */
}
/* стилі для полів вводу */
input[type=text] {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding-left: 10px;
width:208px;
height:33px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
border-radius: 3px;
-moz-border-radius: 3px;
}
/* міняємо оформлення полів вводу при фокусі */
input[type=text]:focus, .your-message:focus {
outline: none;
background-color:rgb(255,255,255);
border-color:rgb(126,139,153);
border: 1px solid;
-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-ms-filter:"програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding: 10px 0 0 10px;
width:448px;
height:93px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
position: absolute;
top: 150px;
left: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
}
.your-name {
position: absolute;
top: 100px;
left: 40px;
}
.email-address {
position: absolute;
top: 100px;
left: 280px;
}
/* оформляємо кнопку відправки */
.send-message {
background-color: #929FAB;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
color: #fff;
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #21405D;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
position: absolute;
top: 269px;
right: 100px;
}
/* оформляємо кнопку відправки при наведенні */
.send-message:hover{
background-color: #A0ACB9;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97
Головна » Уроки » Створюємо спливаючу контактну форму для сайту

Створюємо спливаючу контактну форму для сайту

1 травня, 2013 driver 59 коментарів Переглянули: 65 235

Всі ми звикли бачити контактні форми на окремих, спеціально створених сторінках, для зворотного зв'язку з користувачами. Як правило, на таких сторінках крім контактних форм, розміщують багато іншої інформації для взаємодії і комунікації. Механізм налагоджений, перевірений роками і відмінно працює. Але в деяких випадках виникає необхідність вивести окрему контактну форму у вигляді спливаючого вікна, не перенаправляючи користувачів на інші сторінки.
Свого часу ми розглядали, як вбудувати контактну форму у модальний працює на jQuery. Сьогодні ж, хочу познайомити вас з цікавим рішенням створення окремої, оригінально оформленої, екранної форми контактів для сайту.

Всплывающая контактная форма

Демо

На мій погляд, чудовий зразок засобів взаємодії з користувачами.

Приклад подивилися. Тепер, давайте розкладемо цю форму на складові, від створення загальної структури в Html, до формування зовнішнього вигляду макета з допомогою CSS.

HTML-код форми

Нічого надприродного, максимально простий каркас звичайної контактної форми, поміщений в блоковий елемент div з певним ідентифікатором і класом, для подальшого формування зовнішнього вигляду форми в css і взаємодії з невеликим javascript, який нам знадобиться для активації і закриття екранної форми.

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Так само, нам необхідно створити шар затемнення загального фону, при активації екранної форми. Виконати це завдання можна по різному, але ми мудрувати особливо не будемо і додамо ще один div, присвоївши йому ідентифікатор: id="fade" і клас: class="black-overlay". Помістити його можете поряд з формою, щоб довго не шукати при необхідності.

У моєму прикладі, текстова посилання для виклику контекстної контактної форми, сформована з допомогою властивостей CSS3 у вигляді кнопки. Ви ж можете використовувати під це діло будь-яку картинку, пункт меню або фрагмент тексту, та все що завгодно, лише б в радість вам і не на горе нам)))

Зворотний зв'язок

Зворотний зв'язок

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

Закрити

Закрити

Завершальним штрихом html-розмітки нашої форми підключення до документа файлу стилів modal-contact-form.css, в якому ми будемо формувати всі необхідні елементи форми. Підключаємо по накатаній, для тих хто не в темі, поясню, в розділі між тегами ... слід прописати таку місце:


Ось і все, давайте тепер подивимося на повний Html-код сторінки містить екранну форму зворотнього зв'язку:

Спливаюча контактна форма
Зворотний зв'язок
Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Спливаюча контактна форма
Зворотний зв'язок

Закрити

Надіслати повідомлення

Будь ласка, введіть своє повідомлення тут ..

Перш ніж перейдемо до найцікавішого, до формування стилів нашої контактної форми за допомогою CSS, трохи відступлю. Найбільш уважні напевно помітили, що кнопки відкриття і закриття форми реалізовані у вигляді посилань з «глушилки» href="javascript:void(0)". Погано це або добре, точної відповіді для себе я так і не знайшов, використовую цей спосіб за звичкою. Хоча для елементів, на яких подія onclick обробляється скриптом, думається мені, логічніше і правильніше, використовувати , або

. При бажанні, ви завжди можете так і зробити з кнопками з даного прикладу.

Магія CSS

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

А ось, безпосередньо і сам CSS-код, нашої чудової форми, з невеликими коментарями, для ясності, і щоб уникнути зайвих питань:

/* встановлюємо шар затемнення фону,
** опрделяем позиції, колір та інтенсивність затемнення */
.black-overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
/* встановлюємо малюнок основи,
** опрделяем розміри і положення на екрані */
.envelope {
display: none;
position: absolute;
width: 600px;
height: 340px;
background: url(images/envelope.png) center no-repeat;
z-index:1002;
position: relative;
margin: 10% auto;
}
/* формуємо кнопку закриття,
** розміри, положення на формі */
.close-btn {
width: 31px;
height: 31px;
display: block;
cursor: pointer;/* для випадку застосування відмінних від тегів */
background: url(images/close.png);
text-indent: -4999px;
}
/* кнопка закриття при наведенні */
.close-btn:hover{
background: url(images/close-hover.png);
}
/* оформляємо заголовок форми */
.title {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size:22px;
font-weight: normal;
font-weight: 200;
text-align:left;
position: absolute;
top: 30px;
left: 40px;
/* можна замінити на іншу картинку
** або border-bottom: бла бла бла */
background: url(images/divider.png) no-repeat bottom;
color: #545151;
height: 40px;
width: 400px;
margin: 15px 0;
text-shadow: 1px 1px #FFF;/* тінь тексту */
}
/* стилі для полів вводу */
input[type=text] {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding-left: 10px;
width:208px;
height:33px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
border-radius: 3px;
-moz-border-radius: 3px;
}
/* міняємо оформлення полів вводу при фокусі */
input[type=text]:focus, .your-message:focus {
outline: none;
background-color:rgb(255,255,255);
border-color:rgb(126,139,153);
border: 1px solid;
-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-ms-filter:"програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding: 10px 0 0 10px;
width:448px;
height:93px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
position: absolute;
top: 150px;
left: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
}
.your-name {
position: absolute;
top: 100px;
left: 40px;
}
.email-address {
position: absolute;
top: 100px;
left: 280px;
}
/* оформляємо кнопку відправки */
.send-message {
background-color: #929FAB;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
color: #fff;
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #21405D;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
position: absolute;
top: 269px;
right: 100px;
}
/* оформляємо кнопку відправки при наведенні */
.send-message:hover{
background-color: #A0ACB9;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляємо кнопку відправки в режимі активної */
.send-message:active{
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}

/* встановлюємо шар затемнення фону,
** опрделяем позиції, колір та інтенсивність затемнення */
.black-overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
/* встановлюємо малюнок основи,
** опрделяем розміри і положення на екрані */
.envelope {
display: none;
position: absolute;
width: 600px;
height: 340px;
background: url(images/envelope.png) center no-repeat;
z-index:1002;
position: relative;
margin: 10% auto;
}
/* формуємо кнопку закриття,
** розміри, положення на формі */
.close-btn {
width: 31px;
height: 31px;
display: block;
cursor: pointer;/* для випадку застосування відмінних від тегів */
background: url(images/close.png);
text-indent: -4999px;
}
/* кнопка закриття при наведенні */
.close-btn:hover{
background: url(images/close-hover.png);
}
/* оформляємо заголовок форми */
.title {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size:22px;
font-weight: normal;
font-weight: 200;
text-align:left;
position: absolute;
top: 30px;
left: 40px;
/* можна замінити на іншу картинку
** або border-bottom: бла бла бла */
background: url(images/divider.png) no-repeat bottom;
color: #545151;
height: 40px;
width: 400px;
margin: 15px 0;
text-shadow: 1px 1px #FFF;/* тінь тексту */
}
/* стилі для полів вводу */
input[type=text] {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding-left: 10px;
width:208px;
height:33px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
border-radius: 3px;
-moz-border-radius: 3px;
}
/* міняємо оформлення полів вводу при фокусі */
input[type=text]:focus .your-message:focus {
outline: none;
background-color:rgb(255,255,255);
border-color:rgb(126,139,153);
border: 1px solid;
-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-ms-filter:"програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding: 10px 0 0 10px;
width:448px;
height:93px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
position: absolute;
top: 150px;
left: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
}.your-name {
position: absolute;
top: 100px;
left: 40px;
}.email-address {
position: absolute;
top: 100px;
left: 280px;
}
/* оформляємо кнопку відправки */
.send-message {
background-color: #929FAB;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
color: #fff;
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #21405D;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
position: absolute;
top: 269px;
right: 100px;
}
/* оформляємо кнопку відправки при наведенні */
.send-message:hover{
background-color: #A0ACB9;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
width:130px;
height:35px;
-moz-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляємо кнопку відправки в режимі активної */
.send-message:active{
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-webkit-box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
box-shadow:1px 0px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
програми:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}

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

Всі! Тільки що ми разом з вами, створили відмінний інструмент взаємодії з користувачами, спливаючу контактну форму для сайту. Вам залишається тільки подивитися живий приклад, при бажанні завантажити вихідні коди і прикрутити до формі свій php-обробник.

ДемоСкачать

В архіві з исходниками, ви знайдете все необхідне і ще кілька варіантів фонових зображень для форми.

Оновлення від 21.05.2017
В архів з исходниками додав папку «mail», в якій ви знайдете простий php-обробник форми і файл конфігурацій, для налаштування. Обробник прив'язаний до даної формі, невелика інструкція та коментарі прописані безпосередньо в коді файлів обробника, сподіваюся, допоможуть розібратися що, куди і навіщо.

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

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