Всем привет, сегодня я вам покажу как сделать форму обратной связи которая будет работать с помощью отправки через Ajax обработчик. Данная форма будет отправлять данные без перезагрузки.
Я уже выкладывал запись в которой рассказывал как сделать простую форму обратной связи — http://prog-time.ru/prostaya-forma-obratnoj-svyazi-na-php/
Если вы читали прошлую запись, то знаете что форма должна быть написана внутри тега form. Вся информация передается через поля input.
Для реализации отправки формы через Ajax, нам понадобится 2 файла:
index.php— здесь будет HTML форма и jQuery обработчикsend.php— PHP обработчик
В самом начале вам нужно подключить библиотеку jQuery. Добавьте эту строчку внутрь тега head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML код
input и textarea — поле для ввода информации.
Каждому тегу input и textarea нужно дописать уникальное значение атрибута name, по которому мы в дальнейшем будем идентифицировать поля.
<div class="form">
<label>Ваше имя:</label><br/>
<input type="text" id="name" value="" />
<label>Ваш e-mail:</label><br/>
<input type="text" id="email" value="" />
<label>Телефон:</label>
<input id="phone" />
<label>Текст сообщения:</label>
<textarea id="text_comment"></textarea>
<input type="button" value="Отправить" id="btn_submit" />
<div id="erconts"></div>
</div>jQuery код
В самом низу необходимо разместить jQuery код.
$(document).ready(function(){
/*ПРОВЕРЯЕМ НАЖАТА ЛИ КНОПКА ОТПРАВКИ*/
$('#btn_submit').click(function(){
// собираем данные с формы
var user_name = $('#name').val();
var user_email = $('#email').val();
var user_phone = $('#phone').val();
var text_comment = $('#text_comment').val();
// отправляем данные
$.ajax({
url: "send.php", // куда отправляем
type: "post", // метод передачи
data: { // что отправляем
"name": user_name,
"email": user_email,
"phone": user_phone,
"text_comment": text_comment
},
error:function(){$("#erconts").html("Произошла ошибка!");},
/* если произойдет ошибка в элементе с id erconts выведится сообщение*/
beforeSend: function() {
$("#erconts").html("Отправляем данные...");
},
success: function(result){
/* В случае удачной обработки и отправки выполнится следующий код*/
$('#erconts').html(result);
console.log("ntcn");
}
});
});
});PHP обработчик
Теперь мы прописывает в PHP файл код Ajax запроса. У меня это файл send.php
<?php
/*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$text_comment = $_POST["text_comment"];
/*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
if($name=="" or $email=="" or $phone=="" or $text_comment==""){
echo "Заполните все поля";
}
else{
/*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
$to = "your_mail@mail.ru"; /* Адрес, куда отправляем письма*/
$subject = "Письмо с обратной связи"; /*Тема письма*/
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: <test@mail.ru>\r\n";/*ОТ КОГО*/
/*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
$message .= "Имя пользователя: ".$name."\n";
$message .= "Почта: ".$email."\n";
$message .= "Телефон: ".$phone."\n";
$message .= "Сообщение: ".$text_comment."\n";
/*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/
$send = mail($to, $subject, $message, $headers);
/*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
if ($send == "true")
{
echo "Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n";
}
/*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
else
{
echo "Не удалось отправить, попробуйте снова!";
}
}
?>Не отправляется письмо!
Если вы пользуетесь Open Server, то у вас не получится отправить письмо на реальную почту. Вместо этого Open Server создает текстовый документ, в который записывается письмо. Все подобные текстовые документы отправки, находятся в \userdata\temp\email
Если вы тестируете данный код на хостинге, то убедитесь что на вашем хостинге разрешена отправка писем. Многие бесплатные хостинги запрещают отправку писем, отключая данный модуль в PHP. Для решения этой проблемы вам нужно обратиться в тех. поддержку.
