Форма обратной связи без перезагрузки

1.

1.72

[автор] (11 дек 2013, 18:05) [1/0] [1] [отв] [спам] [под] +1 | -1

01
<center><div align=\"left\" id=\"cor5\" class=\"sidebarForm\">
02
<h4>Задать новый вопрос:</h4>
03
<div align=\"center\" id=\"loadBar\"></div>
04
<form action=\"#\" method=\"post\" id=\"cForm2\">
05

06
<label>Ваше имя:</label>
07
<div class=\"input\" id=\"cor5\">
08
<input value=\"\" id=\"posName\" type=\"text\">
09
</div>
10

11
<label>Ваш email:</label>
12
<div class=\"input\" id=\"cor5\">
13
<input value=\"\" id=\"posEmail\" type=\"text\">
14
</div>
15

16
<label>Ваше сообщение:</label>
17
<div class=\"textarea\" id=\"cor5\"><textarea id=\"posText\"></textarea></div>
18

19
<button type=\"button\" id=\"send\">Отправить --></button>
20

21
</form></div></center>
HTML– это скелет нашей формы. Давайте её немного украсим, добавив CSS-стилей:

01
.sidebarForm {
02
background: #f6f6f6;
03
box-shadow: 0 0 5px #ccc;
04
-webkit-box-shadow: 0 0 5px #ccc;
05
-moz-box-shadow: 0 0 5px #ccc;
06
width: 420px;
07
}
08

09
#cor5 {
10
border-radius: 5px;
11
-moz-border-radius: 5px;
12
-webkit-border-radius: 5px;
13
}
14

15
.sidebarForm h4 {
16
font: 14px Verdana;
17
color: #333333;
18
text-align: left;
19
padding: 10px 10px 0 10px;
20
}
21

22
.sidebarForm label {
23
font: 12px Verdana;
24
color: #333;
25
padding: 10px;
26
}
27

28
.sidebarForm .input {
29
width: 170px;
30
height: 20px;
31
overflow: hidden;
32
background: white;
33
border: solid 1px #DFE2E5;
34
margin: 5px 0 10px 10px;
35
box-shadow: 0 0 5px #ccc;
36
-webkit-box-shadow: 0 0 5px #ccc;
37
-moz-box-shadow: 0 0 5px #ccc;
38
}
39

40
.sidebarForm .input input {
41
width: 165px;
42
height: 26px;
43
background: white;
44
margin: -3px 0 0 -5px;
45
padding: 0px 8px;
46
border: none;
47
background: transparent;
48
}
49

50
.sidebarForm .textarea {
51
height: 70px;
52
width: 320px;
53
overflow: hidden;
54
background: white;
55
border: solid 1px #DFE2E5;
56
margin: 5px 0 10px 10px;
57
box-shadow: 0 0 5px #ccc;
58
-webkit-box-shadow: 0 0 5px #ccc;
59
-moz-box-shadow: 0 0 5px #ccc;
60
}
61

62
.sidebarForm .textarea textarea {
63
width: 316px;
64
height: 66px;
65
background: white;
66
border: none;
67
resize:none;
68
}
69

70
.sidebarForm button {
71
border: 2px #ccc solid;
72
width: 150px;
73
height: 25px;
74
font: 12px Verdana;
75
font-weight: 700;
76
color: #FFFFFF;
77
background-color: #cc0000;
78
padding-bottom: 2px;
79
margin: 5px 0 15px 135px;
80
}
Информация из нашей формы обратной связи после нажатия на кнопку «Отправить», отправляется на сервер (в обработчик) в фоновом режиме, без перезагрузки страницы в браузере. За это отвечает JavaScript-код:

01
$(document).ready(function() {
02
// Форма обратной связи................................./
03

04
var regVr22 = \"<div><img style=\"margin-bottom:-4px;\" src=\"../load.gif\" alt=\"Отправка...\" width=\"16\" height=\"16\"><span style=\"font: 11px Verdana; color:#333; margin-left:6px;\">Сообщение обрабатывается...</span></div><br>\";
05

06
$(\"#send\".click(function(){
07
$(\"#loadBar\".html(regVr22).show();
08
var posName = $(\"#posName\".val();
09
var posEmail = $(\"#posEmail\".val();
10
var posText = $(\"#posText\".val();
11
$.ajax({
12
type: \"POST\",
13
url: \"../send.php\",
14
data: {\"posName\": posName, \"posEmail\": posEmail, \"posText\": posText},
15
cache: false,
16
success: function(response){
17
var messageResp = \"<p style=\"font-family:Verdana; font-size:11px; color:green; border:1px solid #00CC00; padding:10px; margin:20px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff;\">Спасибо, <strong>\";
18
var resultStat = \"!</strong> Ваше сообщение отправлено!</p>\";
19
var oll = (messageResp + posName + resultStat);
20
if(response == 1){
21
$(\"#loadBar\".html(oll).fadeIn(3000);
22
$(\"#posName\".val(\"\";
23
$(\"#posEmail\".val(\"\";
24
$(\"#posText\".val(\"\";
25
} else {
26
$(\"#loadBar\".html(response).fadeIn(3000); }
27
}
28
});
29
return false;
30
});
31
});
В обработчике нам необходимо проверить что отправил посетитель, и если всё в порядке отправить письмо админу сайта. А посетителю сообщить, что его письмо успешно отправлено! Пишем php-код:

01
header(\"Content-type: text/html; charset=utf-8\";
02
//**********************************************
03
if(empty($_POST[\'js\'])){
04

05
$log ==\"\";
06
$error=\"no\"; //флаг наличия ошибки
07

08
$posName = addslashes($_POST[\'posName\']);
09
$posName = htmlspecialchars($posName);
10
$posName = stripslashes($posName);
11
$posName = trim($posName);
12

13
$posEmail = addslashes($_POST[\'posEmail\']);
14
$posEmail = htmlspecialchars($posEmail);
15
$posEmail = stripslashes($posEmail);
16
$posEmail = trim($posEmail);
17

18
$posText = addslashes($_POST[\'posText\']);
19
$posText = htmlspecialchars($posText);
20
$posText = stripslashes($posText);
21
$posText = trim($posText);
22

23
//Проверка правильность имени
24
if(!$posName || strlen($posName)>20 || strlen($posName)<3) {
25
$log.=\"<li>Неправильно заполнено поле \\\"Ваше имя\\\" (3-15 символов)!</li>\"; $error=\"yes\"; }
26

27
//Проверка email адреса
28
function isEmail($posEmail)
29
{
30
return(preg_match(\"/^[-_.[:alnum:]]+Удалён
31
,$posEmail));
32
}
33

34
if($posEmail == \'\')
35
{
36
$log .= \"<li>Пожалуйста, введите Ваш email!</li>\";
37
$error = \"yes\";
38

39
}
40

41
else if(!isEmail($posEmail))
42
{
43

44
$log .= \"<li>Вы ввели неправильный e-mail. Пожалуйста, исправьте его!</li>\";
45
$error = \"yes\";
46
}
47

48
//Проверка наличия введенного текста комментария
49
if (empty($posText))
50
{
51
$log .= \"<li>Необходимо указать текст сообщения!</li>\";
52
$error = \"yes\";
53
}
54

55
//Проверка длины текста комментария
56
if(strlen($posText)>1010)
57
{
58
$log .= \"<li>Слишком длинный текст, в вашем распоряжении 1000 символов!</li>\";
59
$error = \"yes\";
60
}
61

62
//Проверка на наличие длинных слов
63
$mas = preg_split(\"/[\\s]+/\",$posText);
64
foreach($mas as $index => $val)
65
{
66
if (strlen($val)>60)
67
{
68
$log .= \"<li>Слишком длинные слова (более 60 символов) в тексте записи!</li>\";
69
$error = \"yes\";
70
break;
71
}
72
}
73
sleep(2);
74

75
//Если нет ошибок отправляем email
76
if($error==\"no\"
77
{
78
//Отправка письма админу о новом комментарии
79
$to = \"mailУдалён e-mail адрес
80
$mes = \"Человек по имени $posName отправил Вам сообщение из формы обратной связи Вашего сайта: \\n\\n$posText\";
81

82
$from = $posEmail;
83
$sub = \'=?utf-8?B?\'.base64_encode(\'Новое сообщение с Вашего сайта\').\'?=\';
84
$headers = \'From: \'.$from.\'
85
\';
86
$headers .= \'MIME-Version: 1.0
87
\';
88
$headers .= \'Content-type: text/plain; charset=utf-8
89
\';
90
mail($to, $sub, $mes, $headers);
91
echo \"1\"; //Всё Ok!
92
}
93
else//если ошибки есть
94
{
95
echo \"<p style=\"font: 13px Verdana;\"><font color=\"#FF3333\"><strong>Ошибка !</strong></font></p><ul style=\"list-style: none; font: 11px Verdana; color:#000; border:1px solid #c00; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff; padding:5px; margin:5px 10px;\">\".$log.\"</ul><br>\"; //Нельзя отправлять пустые сообщения
96

97
}
98
}
В коде представлены необходимые комментарии и пояснения.

Как видите, форма обратной связи без перезагрузки страницы готова. Вы можете её доработать под свои нужды, добавить новые поля, поставить каптчу и т.д. Также на основе кода этой формы Вы можете создавать формы подписки, форму добавления комментариев и др. их принцип работы одинаковый.