Форма обратной связи в модальном окне

ГлавнаяJava скрипты → Форма обратной связи в модальном окне

В этом примере я вам покажу, как при нажатии на кнопку или ссылку получаем Форма обратной связи в всплывающем (модальном) окне. Обработчик форм PHP используется точно такой же, как и в простой форме обратной связи, и поэтому повторно описывать его функциональность не имеет смысла. Здесь так же без особого труда подготавливаются: изображение всплывающего окна, необходимые поля, расстановка всех компонентов - то есть всё под свои нужды. Посмотреть на работу скрипта - можно нажав на кнопку ниже.



Рассмотрим следущий код, необходимый для обратной связи в модальном окне:

Код для html


<center>
<div id="parent_popup">
<div id="popupup">
<div id="close" style="cursor: pointer;" onclick="document.getElementById('parent_popup').style.display='none';"></div>
<p style='text-align: center;' class='contact-title'>СООБЩЕНИЕ АДМИНИСТРАТОРУ</p>
<form action="send.php" method="post">
<table align="center" style="margin-top: -10px;" border="0">
<tbody><tr>
<td class="lable"><b>*Ваше имя:</b><br />
<input name="name" size="45" maxlength="15" class="input" type="text"></td></tr>
<tr><td></td></tr>
<tr><td class="lable"><b>*Ваш e-mail:</b><br />
<input name="email" size="45" maxlength="30" class="input" type="text"></td></tr>
<tr><td></td></tr>
<tr><td class="lable"><b>*Сообщение:</b><br />
<textarea name="text_message" cols="43" rows="11" class="input"></textarea></td></tr> 
<tr><td> </td></tr>
<tr><td align="center"><input name="mail_submit" type="submit" value="Отправить сообщение"></td></tr>
</tbody></table></form></p> 
</div>
</div>   
<a href="#" class="images" onclick="document.getElementById('parent_popup').style.display='block';"></a></center><br />

Как вы уже успели заметить, в этой форме я отключил капчу, потому как в простой форме она необходима против спама, а здесь нужно вызвать всплывающее окно (нажав на ссылку, или кнопку), что для роботов-спаммеров это совсем не возможно. Кому нравиться, тот без труда может её вставить, как это описано в первом примере - "обратная связь".

В выше указанном коде я хочу обратить внимание на последнюю строку: для тех, кто хочет использовать просто ссылку, вместо указанной кнопки, удалите class="images", и перед тегом </a> напишите желаемый текст, например: Отправить сообщение, и выглядеть это будет так:


<a href="#" onclick="document.getElementById('parent_popup').style.display='block';">Отправить сообщение</a>

Код для style.css


div.overlay { 
}
div.overlay div.close {background-image:url(images/close.png);position:absolute;
right:5px;top:5px;cursor:pointer;height:35px;width:35px;}
#overlay {background-image:url(images/fon.png);background-repeat:no-repeat;}
#overgoop {background-image:url(images/fon.png);background-repeat:no-repeat;}
div.wrap {height:441px;overflow-y:auto;}
.contact-title {color:#23B3B6;margin-top:20px;font-size:1.2em; text-align:left;}
.contact-input {font-family:'Trebuchet MS', Verdana, Arial;float:left;padding:2px;
margin:2px;background:#eee;border:1px solid #fff;width:300px;
}
.lable {text-align:left;clear:left;display:block; font-size:13px;font-family:"Verdana";color:#FF2B29;}
.input {text-align:left;background-color:#F0F0F0;border:0px;font-size:14px;
font-weight:bold;font-family:Arial, Helvetica, sans-serif;color:#1C5455;}
.warning_table {background:#F0F0F0;border:outset 5px #666666;border-radius:10px;
-moz-border-radius:10px;-webkit-border-radius:10px;-webkit-box-shadow:#666 0px 2px 3px;
-moz-box-shadow:#666 0px 2px 3px;box-shadow:#666 0px 2px 3px;behavior: url(PIE.htc);
}
.warning_font_big {font:Arial;font-size:30px;color:#B70004;}
.warning_font {font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;color:#333;padding-top:15px;
}
#parent_popup {background:#D4D4D4;display:none;height:100%;opacity:0.9;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /* работает в IE6, IE7 и IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=90)"; /* только для IE8 */
filter: alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity:0.9;
position:fixed;width:100%;z-index:10000;top:0;left:0;
}
#popupup {margin:0 auto;margin-top:170px;background-image:url(images/fon.png);
background-repeat:no-repeat;width:474px;height:501px;padding:0 0 0 0;color:#f00;z-index:10001;
}
#close {background-image:url(images/close.png);margin-left:434px;
cursor:pointer;height:35px;width:35px;
}
a.images {background:url("images/knopka.png");display:block; 
width:200px;height:30px;border:0; 
}
a.images:hover {background:url("images/knopka-2.png");
width:200px; height:30px;border:0; 
}

В этом примере используются 4-е картинки: для фона модального окна fon.png размером 474х501px, крестик для закрытия окна close.png размером 35х35px, и две картинки для кнопки: knopka.png и knopka-2.png. И цвета для всех этих картинок вы соответственно подбираете под свой дизайн и вкус, а более точнее - под оформление уже созданного вами сайта со своими изюминками и прелестями.

На этом всё! - что не понятно, спрашивайте!

Поделись ссылкой с друзьями:

Комментарии к статье

Артем 20-01-2014

Куда вставлять код send.php?
где должен храниться этот файл? я в разные папки ставлю не работает

Admin 27-01-2014

Для простоты киньте в ту директорию (папку), где находится у вас страница, на которой расположена "Обратная связь".
И будьте самое главное внимательны с путями здесь - <form action="send.php" method="post"> и везде в кодах, где указываете путь на тот, или иной файл.
И всё получится!

Виталий 14-12-2014

Доброго времени суток.
Форма хорошая, даже разобрался как настроить письма и поля для заполнения, но никак не разберусь как сделать, чтобы она появлялась в модальном окне, она полностью видна на странице и не скрывается, а нужно чтоб появлялась при нажатии на кнопку.

Admin 14-12-2014

Добрый день!
Значит вы что-то сделали не правильно. Проверьте ещё раз прописанный вами код. Там же в style.css для #parent_popup прописано: display:none;, поэтому форма никак у вас не должна отображаться на странице. Код для кнопки поставьте сначала простой:
<center>
<a href="#" onclick="document.getElementById('parent_popup').style.display='block';">
<img src="ваша-картинка.jpg" border="0" alt="" /></a>
</center>

Если опять не получится, то присылайте адрес вашей страницы и разберёмся!

Виталий 14-12-2014


Большое спасибо за форму, и за помощь с установкой.

СООБЩЕНИЕ АДМИНИСТРАТОРУ

* Ваше имя:
* Ваш e-mail:
* Сообщение: