- Регист
- 21 Май 2018
- Сообщения
- 666
- Реакции
- 677
Простая форма обратной связи на php и ajax.
Как обычно делал форму на заказ и решил поделиться с Вами.
Писать тут особо нечего, поэтому просто распишу каждый код для новичков.
index.html
HTML:
<div class="kylform">Обратная связь</div>
<div id="kylform">
<div class="kylform_header">Обратная связь</div>
<form action="#" method="post" autocomplete="off">
<div class="pad">
<p>Описание для формы если потребуется, например надпись "Заполните все поля".</p>
<input type="text" name="name" class="ico_name" placeholder="Имя">
<input type="text" name="phone" class="ico_phone" placeholder="Контактный телефон">
<input type="text" name="email" class="ico_email" placeholder="E-mail (не обязательно)">
<input type="submit" id="send" value="Отправить">
<div class="answer"></div>
</div>
</form>
<a href="#" class="kylform_close"></a>
</div>script.js
JavaScript:
$(function(){
// выводим кнопку через 1 секунду
setTimeout(function(){
$(".kylform").animate({
right: "-58px"
}, 700);
}, 1000); // 1000 - одна секунда
// Показываем форму по нажатии на кнопку
$(".kylform").click(function(){
$("#kylform").animate({
top: "20%"
}, 700);
return false;
})
// закрываем форму по нажатию на крестик
$(".kylform_close").click(function(){
$("#kylform").animate({
top: "-500px"
}, 700);
return false;
})
// отправялем данные с формы в обработчик
$("#send").click(function(){
var msg = $('#kylform form').serialize();
$.ajax({
type: 'POST',
url: '/action.php',
data: msg,
success: function(data) {
$('.answer').html(data).slideDown(300);
console.log(data);
},
error: function(xhr, str){
$('.answer').html('Возникла ошибка: ' + xhr.responseCode);
}
});
return false;
})
});action.php
PHP:
<?php
header('Content-Type: text/html; charset=utf-8');
$to = "[email protected]"; // почта администратора сайта, на который будут приходить письма
if(!empty($_POST["name"]) && !empty($_POST["phone"]) && !empty($_POST["email"])){ // проверка полей на пустоту, если не пустые данные пришли, то идём дальше
// trim - обрезает пробелы в начале и конце
// htmlspecialchars - преобразует специальные символы в HTML-сущности
// strip_tags - удаляет HTML и PHP-теги из строки
$name = trim(htmlspecialchars(strip_tags($_POST["name"])));
$phone = trim(htmlspecialchars(strip_tags($_POST["phone"])));
$email = trim(htmlspecialchars(strip_tags($_POST["email"])));
// проверяем email на валидность
if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) { // если не верный e-mail
echo "<div class='i_false'>E-mail указан не верно!</div>"; // выводим сообщение пользователю
exit; // выходим из дальнейшей обработки
}
// указываем заголовки
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= 'To: Название сайта <[email protected]>' . "\r\n";
$headers .= 'From: Название сайта <[email protected]>' . "\r\n";
$headers .= 'Bcc: [email protected]' . "\r\n";
// формируем тело письма
$message = '
<html>
<head>
<title>Новая заявка</title>
</head>
<body style="font-family:Arial,sans-serif; background: #E7F5FA;">
<div style="background: #E7F5FA; color: #227E9B; border: 1px #AFD5E2 solid; padding: 10px;">
<p><b>Имя:</b> "'.$name.'"</p>
<p><b>Телефон:</b> "'.$phone.'"</p>
<p><b>E-mail:</b> "'.$email.'"</p>
</div>
</body>
</html>
';
if(mail($to, "Новая заявка", $message, $headers)){ // если отправка прошла успешно, то...
echo "<div class='i_true'>Сообщение отправлено!<br>Мы свяжемся с Вами в ближайшее время.</div>"; // выводим пользователю сообщение
} else{ // если не отправилось по како-то причине, то...
echo "<div class='i_false'>Не полуилось отправить сообщение</div>"; // выводим пользователю сообщение
}
} else{ // если пустые данные пришли
echo "<div class='i_false'>Необходимо заполнить все поля!</div>"; // выводим пользователю сообщение
}
?>Вот и весь код. Стили уже в архиве найдёте.
Что не понятно, спрашивайте.
Последнее редактирование: