Отправка формы обратной связи без перезагрузки страницы

WebDev

Форма обратной связи – популярное средство для быстрой отправки сообщения владельцу сайта. В свою очередь, вебмастер должен позаботиться о том, чтобы процесс отправления письма осуществлялся максимально удобно для пользователя. Для этого можно прибегнуть к способу отсылки почты без перезагрузки страницы с выводом результата, реализуемой с помощью библиотеки JQuery, JavaScript и PHP.

Нам понадобится 2 файла:

form.html
send.php

Создаем в HTML-файле простейшую форму, при этом в заголовке документа подключим библиотеку JQuery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<section id="up_form">
  <div id="result_div_id"></div>
  <form id="form" action="" method="post">
    <div>
      <label for="name">Имя</label>
      <input id="name" name="name" required="" type="text" />
    </div>
    <div>
      <label for="e-mail">E-mail</label>
      <input id="e-mail" name="e-mail" required="" type="text" />
    </div>
    <div>
      <label for="message">Сообщение</label>
      <textarea id="message" name="message"></textarea>
    </div>
    <div>
      <input id="button" type="button" value="Отправить" />
    </div>
  </form>
</section>

Оставляем пустой блок с якорем “result_div_id” для вывода результата.

Помимо этого дополним шапку документа необходимыми скриптами, где первый отвечает за связь с файлом send.php, а второй прокручивает окно браузера к выводу отчета:

<script type="text/javascript">
function AjaxFormRequest(result_id, form_id,url) {
jQuery.ajax({url: url, type: "POST", dataType: "html", data: jQuery("#"+form_id).serialize(), success: function(response) {document.getElementById(result_id).innerHTML = response;}, error: function(response) {document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";}});
}
</script>

<script type="text/javascript">
jQuery(document).ready(function(){jQuery("#button").click(function() {$("html, body").animate({scrollTop: $("#up_form").offset().top}, 800);});});
</script>

Отправка данных формы осуществляется в фоне, непосредственно через файл send.php, с обработкой HTML-тегов. Добавим туда код:

<?php
$to = "Адрес_получателя";
$subject = "Тема_письма";
$message = "Имя: ".$_POST['name']."
E-mail: ".$_POST['e-mail']."
Сообщение: ".$_POST['message'];
$header = "From: Имя_отправителя <Адрес_отправителя>\r\nContent-type: text/html; charset=utf-8\r\n;";
if (mail($to, $subject, $message, $header)) {
  echo ('Успешно отправлено!');
}
else {
  echo ('Ошибка!');
}
?>

2,757 total views, 2 views today