Інтеграція контактної форми модальне вікно

60

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

Оновлено: 31.10.2014

У нас є цілком пристойна контактна форма, зверстана на чистому css, як закрити працездатне модальне вікно, ми теж розібралися, тепер залишається ці два механізму об’єднати в єдиний інструмент. Ось якраз цим цікавим заняттям, ми зараз і займемося, для початку, можете подивитися приклад того, що у нас вийде:

Дивитися Демо

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

HTML

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

  • href #?w=600— вказує ширину вікна,
  • rel – унікальний атрибут вікна,
  • class=”poplight” – клас для показу спливаючого вікна.

Зібравши воєдино всі атрибути отримаємо наступний вигляд посилання:

<a class="poplight" rel="popup_contact" href="#?w=600">Контакти</a>

Контакти

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

Щоб не навантажувати вас зайвим копанням в коді всієї конструкції, розмітку вікна, відразу вмонтував html код контактної форми:

<div id="popup_contact" class="popup_block">
<div class="note">
<img src="images/email.jpg" alt="Контакти" style="float:left;margin:10px 5px 5px 0; " />
<h1>Шановні друзі!</h1>
<p>
Звертаю Вашу увагу, що пункти позначені зірочкою, обов'язкові для заповнення.
</p>
</div>
<form id="form" action="/" method="post">
<fieldset>
<p class="first">
<label for="name">Ім'я *</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email *</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Вебсайт (не обов'язково)</label>
<input type="text" name="web" id="web" size="30" />
</p>
</fieldset>
<fieldset>
<p>
<label for="message">Повідомлення:</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
</fieldset>
<p class="submit"><button type="submit">Надіслати</button></p>
</form>
</div>

Як ви бачите спливаюче вікно, це div контейнер з ідентифікатором popup_contact, який відповідає атрибуту rel в активує посиланням.
Зупинятися на розмітці контактної форми не буду, так як її макет повністю ідентичний формі, про яку розповідав у статті: Стиль контактної форми CSS.
На ряду з формою, додав невеликий інформаційний блок div id=”note” із зображенням і текстової лушпинням ( поясненням до формі). При невгамовному бажанні завжди зможете змінити, або повністю виключити зміст цього блоку зі складу спливаючого вікна.

CSS

Тихою сапою, без зайвої метушні, підійшли до стилів css, як для віконця, так і для форми. Зі стилями труднощів виникнути не повинно, для додання «картині» ясності я прописав деякі пояснення до селекторам. Важливо нічого не наплутати, так і не перестаратися з експериментами.

/*--Модальне вікно--*/
.popup_block{
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
display: none; /*--за замовчуванням прихований--*/
float: left;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 15px;
border: 10px solid #6e6e6e;
/*-- округлені кути--*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
/*--тіні для блоку--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
color: #000;
font-size: .9em;
}
/*--Фіксоване позиціонування для тупого IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
/*--блок заголовка--*/
.note{
margin:0 0 30px 0;
}
.note img{
float:left;
margin:5px 10px 5px 0;
width: 100px;
height: 100px;
}
.note h1{
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:24px Monotype Corsiva, Arial;
}
/* формуємо кнопку закриття */
.close {
position: absolute;
top: -18px;
right: -18px;
width: 24px;
height: 24px;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
/*--крутимо кнопку при наведенні--*/
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/* контактна форма */
#form{
overflow: hidden;
margin: 0 auto;
padding-top: 10px;
/* встановлюємо необхідну ширину форми в залежності від дизайну
** форма відмінно розтягується */
width: 100%;
border: 1px solid #D3D3D3;
/* заокруглюємо кути */
border-radius:8px;
background: none repeat scroll 0 0 #FFFFFF;
/* додаємо тіні для блоку*/
box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
text-align: left;
}
/* формуємо елементи всередині форми */
#form fieldset{
display:inline;
float:left;
margin:0;
margin-left:26px;
padding:0;
width: 42%;
border:none;
}
#form p{
margin:.5em 0;
}
/* підписи до полів вводу */
#form label{
display:block;
margin-bottom:1px;
color:#5B5B5B;
}
#form input, #form textarea{
padding:3px;
/* відключаємо бордюри у инпутов текстового поля */
border: none;
/* заокруглюємо кути полів вводу */
-webkit-border-radius:.3em;
-moz-border-radius:.3em;
border-radius:.3em;
background-color: #F7F7F7;
/* додаємо внутрішні тіні у инпутов текстового поля */
box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
color: #5B5B5B;
font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
}
#form input {
/* встановлюємо ширину инпутов */
width:90%;
}
/* змінюємо оформлення полів вводу при фокусі */
#form input:focus, #form textarea:focus {
background: #F2F2F2;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
color: #333;
}
#form textarea{
overflow:auto;
width:100%;
/* встановлюємо ширину текстового поля */
height:120px;
}
/* формуємо нижній сектор форми */
#form p.submit{
clear:both;
margin:0;
padding: 10px 25px 20px;
text-align:right;
}
/* оформляємо кнопку відправки */
#form button{
/* встановлюємо необхідну ширину кнопки */
border: solid 1px #2f96b4;
/* заокруглюємо кути кнопки */
border-radius: 5px;
background-color: #49AFCD;
/* градієнтна заливка для сучасних браузерів */
background-image:-moz-linear-gradient(center top , #5BC0DE, #2F96B4);
background-image: -webkit-linear-gradient(center top, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(#5bc0de, #2f96b4);
background-image:-o-linear-gradient(center top , #5BC0DE, #2F96B4);
/* додаємо зовнішні тіні */
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
color:#fff;
padding:0 12px;
text-align:center;
line-height:28px;
/* градієнт для IE6-9 */
filter: програми:DXImageTransform.Microsoft.Gradient(StartColorStr='#5BC0DE', EndColorStr='#2F96B4', GradientType=0);
cursor:pointer;
}
/* змінюємо оформлення кнопки при наведенні */
#form button:hover {
border-color: #2C8BA5;
box-shadow: none;
}
/* змінюємо оформлення кнопки при натисканні */
#form button:active {
border-bottom: 1px solid #5BC0DE;
background-image:-moz-linear-gradient(#2F96B4, #5BC0DE); /* Firefox */
background-image: -webkit-linear-gradient(#2F96B4, #5BC0DE); /* Chrome, Safari */
background-image: -ms-linear-gradient(#2F96B4, #5BC0DE); /* IE-10 */
background-image:-o-linear-gradient(#2F96B4, #5BC0DE); /* Opera */
/* додаємо внутрішні тіні */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
/* градієнт для IE6-9 */
filter: програми:DXImageTransform.Microsoft.Gradient(StartColorStr='#2F96B4', EndColorStr='#5BC0DE', GradientType=0);
}
/* кінець форми */

/*–Модальне вікно–*/
.popup_block{
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
display: none; /*–за замовчуванням прихований–*/
float: left;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 15px;
border: 10px solid #6e6e6e;
/*– округлені кути–*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
/*–тіні для блоку–*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
color: #000;
font-size: .9em;
}
/*–Фіксоване позиціонування для тупого IE6–*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
/*–блок заголовка–*/
.note{
margin:0 0 30px 0;
}
.note img{
float:left;
margin:10px 5px 5px 0;
width: 100px;
height: 100px;
}
.note h1{
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:24px Monotype Corsiva, Arial;
}
/* формуємо кнопку закриття */
.close {
position: absolute;
top: -18px;
right: -18px;
width: 24px;
height: 24px;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 20px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: “X”;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
/*–крутимо кнопку при наведенні–*/
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/* контактна форма */
#form{
overflow: hidden;
margin: 0 auto;
padding-top: 10px;
/* встановлюємо необхідну ширину форми в залежності від дизайну
** форма відмінно розтягується */
width: 100%;
border: 1px solid #D3D3D3;
/* заокруглюємо кути */
border-radius:8px;
background: none repeat scroll 0 0 #FFFFFF;
/* додаємо тіні для блоку*/
box-shadow: 0 0 5px #CCCCCC, 1px 1px 0 #FFFFFF inset, -1px -1px 0 #FFFFFF inset, 0 0 15px #DDDDDD inset;
text-align: left;
}
/* формуємо елементи всередині форми */
#form fieldset{
display:inline;
float:left;
margin:0;
margin-left:26px;
padding:0;
width: 42%;
border:none;
}
#form p{
margin:.5em 0;
}
/* підписи до полів вводу */
#form label{
display:block;
margin-bottom:1px;
color:#5B5B5B;
}
#form input, #form textarea{
padding:3px;
/* відключаємо бордюри у инпутов текстового поля */
border: none;
/* заокруглюємо кути полів вводу */
-webkit-border-radius:.3em;
-moz-border-radius:.3em;
border-radius:.3em;
background-color: #F7F7F7;
/* додаємо внутрішні тіні у инпутов текстового поля */
box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
color: #5B5B5B;
font:13px Trebuchet MS, Arial, Helvetica, Sans-Serif;
}
#form input {
/* встановлюємо ширину инпутов */
width:90%;
}
/* змінюємо оформлення полів вводу при фокусі */
#form input:focus, #form textarea:focus {
background: #F2F2F2;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
color: #333;
}
#form textarea{
overflow:auto;
width:100%;
/* встановлюємо ширину текстового поля */
height:120px;
}
/* формуємо нижній сектор форми */
#form p.submit{
clear:both;
margin:0;
padding: 10px 25px 20px;
text-align:right;
}
/* оформляємо кнопку відправки */
#form button{
/* встановлюємо необхідну ширину кнопки */
border: solid 1px #2f96b4;
/* заокруглюємо кути кнопки */
border-radius: 5px;
background-color: #49AFCD;
/* градієнтна заливка для сучасних браузерів */
background-image:-moz-linear-gradient(top center , #5BC0DE, #2F96B4);
background-image: -webkit-linear-gradient(top center, #5bc0de, #2f96b4);
background-image: -ms-linear-gradient(#5bc0de, #2f96b4);
background-image:-o-linear-gradient(top center , #5BC0DE, #2F96B4);
/* додаємо зовнішні тіні */
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
color:#fff;
padding:0 12px;
text-align:center;
line-height:28px;
/* градієнт для IE6-9 */
filter: програми:DXImageTransform.Microsoft.Gradient(StartColorStr=’#5BC0DE’, EndColorStr=’#2F96B4′, GradientType=0);
cursor:pointer;
}
/* змінюємо оформлення кнопки при наведенні */
#form button:hover {
border-color: #2C8BA5;
box-shadow: none;
}
/* змінюємо оформлення кнопки при натисканні */
#form button:active {
border-bottom: 1px solid #5BC0DE;
background-image:-moz-linear-gradient(#2F96B4, #5BC0DE); /* Firefox */
background-image: -webkit-linear-gradient(#2F96B4, #5BC0DE); /* Chrome, Safari */
background-image: -ms-linear-gradient(#2F96B4, #5BC0DE); /* IE-10 */
background-image:-o-linear-gradient(#2F96B4, #5BC0DE); /* Opera */
/* додаємо внутрішні тіні */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
/* градієнт для IE6-9 */
filter: програми:DXImageTransform.Microsoft.Gradient(StartColorStr=’#2F96B4′, EndColorStr=’#5BC0DE’, GradientType=0);
}
/* кінець форми */

Так як спливаючі вікна можуть мати різний розмір, ми не вказуємо в CSS popup_block краю вікна, обчислити необхідний розмір це завдання для jQuery.

Підключення JQuery

З розміткою, оформленням модального вікна і контактної форми ми розібралися. Тепер, щоб все це господарство запрацювало, необхідно скористатися магією JQuery, підключивши плагін до документа. На початку документа між тегами …, або ж у підвалі сторінки, перед закрывающем тегом пропишіть наступне:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/dm-modal.js"></script>

На цьому мабуть і все, спливаюче вікно з вбудованою контактною формою готово. Все б нічого, якби не замшілий і убогий ІЕшка, з його патологічною загальмованістю, 6 і 7 версії браузера, навіть з використанням фільтра, функція прозорості шару opacity не прокатує. Ну да ладно, думається мені на ІЕшку можна і подзабить, шкода тільки користувачі, які у збоченій формі підсаджені на цей браузер, не побачать коректної роботи усієї конструкції.

ДемоСкачать

Сподіваюся, все у вас вийде, виникнуть питання або доповнення, пишіть в коментарях, в обговореннях істину накопаємо обов’язково.

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

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