Простая форма обратной связи на Ajax

Вступление

Форма обратной связи присутствует почти на каждом сайте поэтому сейчас рассмотрим простую но вполне функциональную форму обратной связи.Она будет состоять из трех файлов index.php, contactform.js, contact.php и библиотеки jQuery. Вот так эта форма будет выглядеть у нас в конце:

Шаг 1

Начнем с html кода этой формы , она достаточно простая и не вижу смысла останавливаться на ней и акцентировать внимание.

Index.php

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="contactform.js"type="text/javascript"></script>
<title>КонтактнаяформастехнологиейAjax</title>
</head>
<body>
<div class="form-container">
<h2>Контактнаяформа</h2>
<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form"action="">
<label>Имя</label><input type="text"name="name"value=""/>
<label>E-Mail</label><input type="text"name="email"value=""/>
<label>Телефон</label><input type="text"name="tel"value=""/>
<input class="btn"type="submit"name="submit"value="Отправить"/>
</form>
</div>
</div>
</html>

Шаг 2

Тут рассмотрим скрипт contactform.js

$(document).ready(function() {
$("#ajax-contact-form").submit(function() {
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg) {
if(msg == 'OK') {
result = '

Ваше сообщение было отправлено

';
$("#fields").hide();
} else {
result = msg;
}
$('#note').html(result).fadeIn().delay(3000).fadeOut("slow");
$(".btn").on( "click", function() {
$.when( effect() ).done(function() {
});
});
}
});
return false;
});
});

Здесь видим ajax запрос, в строчке url нужно прописать свой путь к файлу contact.php если он лежит в одной директории с index.php тогда оставьте как в этом скрипте. Далее идет проверка было ли сообщение отправлено. При удачной отправке форма закрывается и появляется сообщение «Ваше сообщение было отправлено».

Шаг 3

В этом шаге рассмотрим файл обработчик contact.php

$post = (!empty($_POST)) ? true : false;
if($post)
{
$email = trim($_POST["email"]);
$name = htmlspecialchars($_POST["name"]);
$email = htmlspecialchars($_POST["email"]);
$tel = htmlspecialchars($_POST["tel"]);
$error = "";
if(!$name)
{
$error .= "Пожалуйста введите ваше имя.
";
}
// Check email
function ValidateEmail($value)
{
$regex = "/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)*\.([a-zA-Z]{2,6})$/";
if($value == "") {
return false;
} else {
$string = preg_replace($regex, "", $value);
}
return empty($string) ? true : false;
}
if(!$email)
{
$error .= "Пожалуйста введите e-mail.
";
}
if($email && !ValidateEmail($email))
{
$error .= "Введите корректный e-mail.
";
}
// Check tel
function ValidateTel($valueTel)
{
$regexTel = "/^[0-9]{7,12}$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true : false;
}
if(!$tel)
{
$error .= "Пожалуйста введите телефон.
";
}
if($tel && !ValidateTel($tel))
{
$error .= "Введите корректный телефон.
";
}
if(!$error)
{
$subject ="Новое сообщение!";
$message ="Новый запрос!\n\nE-mail: ".$email."\n\nИмя: " .$name."\n\nТелефон:".$tel."\n\n";
$mail = mail("admin@gmail.com", $subject, $message,
"From: ".$name." <".$email."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion());
if($mail)
{
echo 'OK';
}
}
else
{
echo '

'.$error.'

';
}
}
?>

Тут меняем «admin@gmail.com» на тот e-mail куда вы хотите чтобы приходила почта.

Шаг 4

Теперь придадим нашей форме более приятный внешний вид Между тегами вставим вот эти стили

html, body { padding: 0; border: 0px none; }
.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
margin: 15px 0;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%;
margin: 15px 0;
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
label { font-size:15px !important; width: 116px; padding-left: 20px;
margin: 5px; float: left; text-align: left; }
br { clear: left; }

На этом можно закончить форму обратной связи и посмотреть как она работает.
И еще, если вы не хотите чтобы после отправки сообщения контактная форма закрылась то можно удалить с contactform.js вот эту строчку $(«#fields»).hide(); .