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

Форма обратной связи с Ajax без перезагрузки страниц, чтобы пользователь остался там, где писал сообщение для нас, а не отправлялся сайтом куда-либо. Форма будет реализована с помощью HTML, CSS, PHP, JavaScript с технологией Ajax. Собственно последнее и даст нам возможность сделать так, чтобы форма получила данные из PHP скрипта и не осуществляла перезагрузку страницы сайта.

Итак, давайте сразу начнем. Успешно реализованный пример можно посмотреть здесь — mst-info.ru.

Форма связи на сайт

Первым делом давайте добавим наш код в  HTML. Заметьте Вы можете использовать данный скрипт и в различных CMS, ресурсов он много от Вас не съест, а работает очень шустро, так что пользуйтесь. Ну да ладно. Вот наша форма.

<div id="fields">
<form id="my_form_contact" action="send.php" method="POST">
<input name="name" placeholder="Имя*" required>
<input name="email" placeholder="E-mail*" required>
<input name="mytel" placeholder="Телефон">
<textarea name="message" placeholder="Сообщение*" required></textarea>
<input type="text" name="captcha_code" placeholder="*Три умножить на четыре равно?" required>
<button type="reset">Сбросить форму</button>
<button type="submit">Отправить сообщение</button>
</form>
</div>
<div id="note"></div>

Форма обратной связи как видно самая обычная. Я предполагаю, что Вы уже знакомы с CSS и оформите форму самостоятельно, если же Вы не знаете что это, то сначала ознакомьтесь с CSS. Итак, вот форма, Вы ее оформили, она красивая, но ясен красен не работает. Но это ничего, сейчас поправим. Но забегу немного вперед, я в этой форме еще небольшую проверку, аля каптча сделал. 🙂 Тоже иногда люди спрашивают. Да и еще, в форме используется атрибут required — он нужен для того, чтобы дать указание браузеру, что данное поле обязательно для заполнения. Но мы сделаем еще и свою дополнительную проверку. Как видно из формы, при нажатии на кнопку она нас отправит на обработчик send.php. Кстати, в своей форме сделайте корректную ссылку.

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

Пояснение к форме ниже. Переменная $sub — тема сообщения, там где мой емейл указан, укажите свой, чтобы все работало корректно. Данный скрипт принимает данные отправленные из нашей формы обратной связи и осуществляет их проверку. Тут же и каптча наша проверяется, можете добавлять дополнительные поля по аналогии с этими, а также осуществлять их проверки на наличие каких-либо данных и так далее.

<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $mytel = $_POST['mytel'];
  $message = $_POST['message'];
  $captcha_code = $_POST['captcha_code'];
  $error = '';
  if(!$name) {$error .= 'Укажите свое имя. ';}
  if(!$email) {$error .= 'Укажите электронную почту. ';}
  if($captcha_code != 12) {$error .= 'Код проверки введен некорректно, либо пуст. ';}
  if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
  if(!$error) {
    $address = "pishchenkov@yandex.ru";
    $sub = "Тема сообщения здесь";
    $mes = "Имя: ".$name."\n\nE-mail: ".$email."\n\nТелефон: ".$mytel."\n\nСообщение: ".$message."\n\n";
    $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
    if($send) {echo 'OK';}
  }
  else {echo '<div class="err">'.$error.'</div>';}
}
?>

Огромное внимание уделите результату обработчика, это очень важно. Смотрите скрипт при успешном результате выводит данные, и наш ajax обработчик, сейчас мы его напишем, эти данные проверяет, поэтому советую тут оставить все как есть, я имею ввиду OK и Error.

Последний штрих

Так, форма обратной связи, кстати, уже будет работать, но, она будет нас отсылать на этот вот send.php. Поэтому пришло включить немного магии и сделать все красивенько. Для этого подключаем библиотеку jQuery, если Вы этого еще не сделали. Подключаем ее перед закрывающимся тегом </head>. Код ниже.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

После подключения этого скрипта к нашему сайту, мы создаем третий файл, либо непосредственно в код пишем, в принципе я предполагаю, что Вы уже используете какие-либо скрипты на javascript и сможете воткнуть мой код куда нужно, если же нет, то ниже jQuery вставляем следующий код.

jQuery(document).ready(function($) {
 $("#my_form_contact").submit(function() {
 var str = $(this).serialize();
 $.ajax({
 type: "POST",
 url: "send.php",
 data: str,
 success: function(msg) {
 if(msg == 'OK') {
 result = '<div class="ok">Сообщение отправлено</div>';
 $("#fields").hide();
 }
 else {result = msg;}
 $('#note').html(result);
 }
 });
 return false;
 });
});

Собственно и все. Особое внимание обратите на путь к файлу send.php и пропишите его согласно Вашему расположению этого файла на сервере на Вашем. В остальном форма прекрасно себя зарекомендовала. И отлично работает. Вопросы? Если есть, ниже там у меня комментарии к статье. Пишите. Мне важно Ваше мнение.

P.S. Решение проблемы отправки файлов через форму AJAX

Друзья. Тут мне многие в личку задают вопросы, что форма не работает, если, например, отправлять файл, прикрепляя его к форме. Это действительно так. Работать метод serialize() не будет. Поэтому используйте вместо предыдущего кода следующий, все остальное остается без изменений.

jQuery(document).ready(function($) {
var form = document.forms.commentForm;

 var formData = new FormData(form);  

 var xhr = new XMLHttpRequest();
 xhr.open("POST", "send.php");

 xhr.onreadystatechange = function() {
 if (xhr.readyState == 4) {
 if(xhr.status == 200) {
 data = xhr.responseText;
 if(data == "true") {
 $(".sending").replaceWith("<p>Принято!<p>");
 } else {
 $(".sending").replaceWith("<p >Ошибка! Обновите страницу...<p>");
 }
 }
 }
 };
 
 xhr.send(formData);
}

Не забывайте, что Вы можете выводить любое сообщение, что формирует Ваш PHP файл. По всем вопросам пишите.