Форма заказа обратного звонка с сайта без перезагрузки страницы на PHP, HTML и Jquery
Сегодня мы все чаще сталкиваемся с необходимостью использования формы заявки обратного звонка на сайте. Причем выигрывают скрипты, которые отправляют форму без перезагрузки страницы, то есть асинхронно при помощи jаvascript.
Как это сделать мы рассмотрим в данном материале.
Как создать несложную форму читайте в статье.
Ранее мы уже рассматривали создание простейшей формы HTML и ее отправке при помощи PHP на почту.
Создаем форму обратного звонка на HTML
На первом этапе нужно создать саму форму обратного звонка. Я постараюсь рассмотреть при этом самый стандартный вариант такой формы. Итак, какие поля для ввода информации потребуются?
- Имя
- Телефон
Пропишем все поля при помощи HTML кода:
<input type="text" name="fio" placeholder="Имя" required>
<input type="text" name="tel" placeholder="Телефон" required>
<div id="form_result"></div>
<input id="submit" type="submit" value="Заказать звонок">
Обратите внимание, что мы сразу создаем кнопку “Заказать звонок”. Добавляем “ required” для того, чтобы браузер сделал эти поля обязательными для заполнения. Контейнер div в форме предназначен для вывода сообщений об ошибке.
Отправляем данные формы обратного звонка без перезагрузки страницы
Посетителю сайта будет намного удобнее, если форма отправиться без переадресации на другую страницу, особенно, если это лэндинг (одностраничный сайт). Тем самым может получиться так, что вы сами уводите посетителя со своей главной страницы. Поэтому делаем отправку данных формы заказа обратного звонка без перезагрузки страницы, то есть асинхронно.
Для этого используем jаvascript с библиотекой Jquery. Не забудьте подключить одну из последних библиотек Jquery на страницу с формой, иначе отправка не будет работать.
На первом этапе нужно получить данные из формы и проверить, не пустые ли они.
var name = $('input[name=fio]').val();
var tel = $('input[name=tel]').val();
var otpravka = true;
if(name==""){
otpravka = false;
}
if(tel ==""){
otpravka = false;
}
Создаем переменную “dannie” для функции асинхронной отправки:
dannie = {'polz_name':name, 'polz_tel':tel};
Используем функцию .post. Она позволяет асинхронно, то есть без перезагрузки страницы, отправить любые переменные из формы:
if(otpravka)
{
$.post('senda.php', dannie, function(otvet){
rezultat = '<div>'+otvet.text+'</div>';
$("#form_result").hide().html(rezultat).slideDown();
}, 'json');
}
Мы проверяем значение переменной “otpravka”. Если оно true, тогда запускаем функцию .post. Далее проверяем значения, которые пришли в виде ответа с сервера. Условие “otvet.text” содержит сообщение с сервера. Это или успешная отправка данных или ошибка.
Обработка данных формы заказа обратного звонка на сервере при помощи PHP
На следующем этапе нужно получить и обработать ответ на сервере. Для этого создаем файл “senda.php”.
Проверяем следующим условием, откуда отправлнны данные и каким способом. Если это не асинхронная отправка Jquery, то прекратить работу скрипта и показать сообщение об ошибке:
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$otvet_serv = json_encode(
array(
'text' => 'Возникла ошибка при отправке данных'
));
die($otvet_serv);
}
Мы отправляли асинхронно данные формы обратного звонка при помощи Jquery. Принимаем эти данные следующим PHP кодом:
if(!isset($_POST["polz_name"]) || !isset($_POST["polz_tel"]))
{
$otvet_serv = json_encode(array('type'=>'error', 'text' => 'Заполните форму'));
die($otvet_serv);
}
$user_Name = filter_var($_POST["polz_name"], FILTER_SANITIZE_STRING);
$user_Phone = filter_var($_POST["polz_tel"], FILTER_SANITIZE_STRING);
Сразу же проверяем эти данные на заполнение. Вы ведь не хотите получать пустые данные на Email. Если в условии выше переменные пустые, то отправляется сообщение об ошибке “Заполните форму”.
Когда мы принимаем данные мы сразу проверяем их и отсеиваем специальные символы и тэги при помощи функции filter_var(). Ведь некоторые злоумышленники могут попытаться взломать сайт, используя вашу форму обратного звонка.
Обращаю ваше внимание на то, что функция filter_var() работает в версии PHP 5 и выше.
Далее добавляем два условия. В одном из них мы проверяем имя на количество символов. Если оно меньше трех, то возвращаем сообщение об ошибке. Также проверяем переменную с телефоном. Там должны быть только цифры.
if(strlen($user_Name)<3)
{
$otvet_serv = json_encode(array('text' => 'Поле Имя слишком короткое или пустое'));
die($otvet_serv);
}
if(!is_numeric($user_Phone))
{
$otvet_serv = json_encode(array('text' => 'Номер телефона может состоять только из цифр'));
die($otvet_serv);
}
Отправляем данные на почту:
$to_Email = "example@mail.ru";
$subject = 'Запрос обратного звонка '.$_POST["polz_name"];
$message = "Имя: ".$user_Name.". Телефон: ".$user_Phone;
if(!mail($to_Email, $subject, $message, "From: example2@mail.ru \r\n"))
{
$otvet_serv = json_encode(array('text' => 'Не могу отправить почту! Пожалуйста, проверьте ваши настройки PHP почты.'));
die($otvet_serv);
}else{
$otvet_serv = json_encode(array('text' => 'Спасибо! '.$user_Name .', ваше сообщение отправлено.'));
die($otvet_serv);
}
Если письмо отправлено, то отправляем ответ об успешной отправке письма с данными пользователя на почту владельца сайта.
Мы получили полностью работающий скрипт.
Итак, полный код файла с формой index.php:
<html>
<head><title>Форма обратного звонка с сайта</title></head>
<script type="text/jаvascript" src="jquery.min.js"></script>
<body>
<input type="text" name="fio" placeholder="Имя" required>
<input type="text" name="tel" placeholder="Телефон" required>
<div id="form_result"></div>
<input id="submit" type="submit" value="Заказать звонок">
<script type="text/jаvascript" src="bootstrap.js"></script>
<script>
$("#submit").click(function() {
var name = $('input[name=fio]').val();
var tel = $('input[name=tel]').val();
var otpravka = true;
if(name==""){
otpravka = false;
}
if(tel==""){
otpravka = false;
}
if(otpravka)
{
dannie = {'polz_name':name, 'polz_tel':tel};
$.post('senda.php', dannie, function(otvet){
rezultat = '<div style="color:#D80018;">'+otvet.text+'</div>';
$("#form_result").hide().html(rezultat).slideDown();
}, 'json');
}
});
</script>
</body>
Полный код файла обработки асинхронного запроса на сервере senda.php:
<?php
if($_POST)
{
$to_Email = "example@mail.ru";
$subject = 'Запрос обратного звонка '.$_POST["polz_name"];
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$otvet_serv = json_encode(
array(
'text' => 'Возникла ошибка при отправке данных'
));
die($otvet_serv);
}
if(!isset($_POST["polz_name"]) || !isset($_POST["polz_tel"]))
{
$otvet_serv = json_encode(array('type'=>'error', 'text' => 'Заполните форму'));
die($otvet_serv);
}
$user_Name = filter_var($_POST["polz_name"], FILTER_SANITIZE_STRING);
$user_Phone = filter_var($_POST["polz_tel"], FILTER_SANITIZE_STRING);
if(strlen($user_Name)<3)
{
$otvet_serv = json_encode(array('text' => 'Поле Имя слишком короткое или пустое'));
die($otvet_serv);
}
if(!is_numeric($user_Phone))
{
$otvet_serv = json_encode(array('text' => 'Номер телефона может состоять только из цифр'));
die($otvet_serv);
}
$message = "Имя: ".$user_Name.". Телефон: ".$user_Phone;
if(!mail($to_Email, $subject, $message, "From: info@webriz.ru \r\n"))
{
$otvet_serv = json_encode(array('text' => 'Не могу отправить почту! Пожалуйста, проверьте ваши настройки PHP почты.'));
die($otvet_serv);
}else{
$otvet_serv = json_encode(array('text' => 'Спасибо! '.$user_Name .', ваше сообщение отправлено.'));
die($otvet_serv);
}
}
?>
Таким образом, мы получили форму заказа обратного звонка с сайта без перезагрузки страницы на PHP, HTML и Jquery. Код проверен и прекрасно справляется со своими функциями.
Не забывайте про ссылку по обработке персональных данных пользователя. Если вы не помещаете ее на сайте, то нарушаете закон РФ.