Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
- не дезориентирует пользователя ненужной перезагрузкой страницы или редиректом,
- позволяет ему продолжить навигацию по текущей странице,
- снижает нагрузку на сервер,
- работает приятней и «плавнее».
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
- ajax-запрос — функция JavaScript, делающая асинхронную отправку введённых в форму данных к обработчику.
- PHP-обработчик на сервере, который асинхронно обрабатывает переданные ему Ajax’ом данные. После обработки посылает скрипту ответ с результатом, Вам — заявку.
- JQuery — библиотека для работы с JavaScript. При создании ajax-формы удобнее пользоваться ей, как и при работе с JS во многих других случаях.
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
↓
файл JS отправляет их в PHP через Ajax, функцию JQuery
↓
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
↓
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом </head>).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Делаем простую форму (в тегах <!--- --- > закрыты комментарии к коду, их желательно удалить):
<div id="results"> </div> <!-- блок с результатами отправки формы можно оформить и поставить на месте формы, если она скрывается -->
<form id="formx" onsubmit="call()"> <!--- вызов JavaScript события --->
<legend>Оставить заявку</legend>
<label for="name">Ваше имя:</label><input id="name" name="name" value="" type="text"> <!---далее три строчка с полями--->
<label for="email">Ваш E-mail:</label><input id="email" name="email" value="" type="text">
<label for="phone">Ваш телефон:</label><input id="phone" name="phone" value="" type="text">
<input value="Отправить" type="submit">
</form>
Если вывод формы нужен на одной странице, просто вставляем в код <body>. Если вывод нужен по всему сайту или на многих страницах — вышеописанный код вставляется в шаблон.
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
<script type="text/javascript">
function call() {
var msg = $('#formx').serialize();
$.ajax({
type: 'POST',
url: 'formx.php', //обращаемся к обработчику
data: msg,
success: function(data) { //в случае успеха выводим результаты в div "results"
$('#formx').remove(); //скрываем форму после отправки
$('#results').html(data); //показываем сообщение об успехе вместо неё
},
error: function(xhr, str){ //ошибка выводит соответствующее сообщение
alert('Возникла ошибка: ' + xhr.responseCode);
}
});
}
</script>
Обработчик, в JS элементе выше мы уже назвали его formx.php:
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность
{
if (isset($_POST["name"]) && isset($_POST["email"]) )
{
if ($_POST['name'] == '')
{
echo 'Не заполнено поле Имя';
return; //проверяем наличие обязательных полей
}
if ($_POST['email'] == '')
{
echo 'Не заполнено поле E-mail';
return;
}
$name = $_POST['name'];
$email = $_POST['email'];
mail("[email protected]", "Заявка с сайта", "Имя:".$name.". E-mail: ".$email ,"From: [email protected] \r\n"); //здесь делаем отправку заявки на почту. не забудьте поменять оба адреса
echo 'Заявка отправлена!';
return; //возвращаем сообщение пользователю
}
}
?>
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).