Создание формы обратной связи в модальном окне на PHP + AJAX
На заре русского сегмента интернета электронная коммерция не имела такого бурного роста как сейчас. Это обусловливалось тем что доступ к сети интернет имело ограниченное число лиц и это не начало 90-х, а уже в начале 00-х. Я помню те времена кода для выхода в интернет использовали dial up модемы, скорость загрузки страниц был очень медленной, а о скачивании файлов я вообще молчу. Далее на смену dial up пришли DSL технологии и интернет заиграл другими красками. Скорость доступа выросла в разы. В это время началась общая интернатизация общества России. Но и DSL продержался не долго, на смену ему пришел широкополосный интернет использующий Ethernet технологию.
За эти 16 лет интернет прочно вошел в нашу повседневную жизнь и является не отъемлемой частью бизнес-процессов. Соответственно и бизнес сайтов в сети стало очень много, а как вы понимаете бизнесу нужны клиенты. Исходя из потребностей рынка мы свами создадим форму обратной связи в модальном окне и будем использовать AJAX + PHP.
Этапы создания формы обратной связи AJAX + PHP:
- Верстка формы обратной связи (HTML + Bootstrap 3)
- Написание кода отправки формы с помощью AJAX технологии (JQuery)
- Написание обработчика формы обратной связи (PHP)
Все библиотеки будут установлены из CDN при желании вы можете их скачать с офф. сайтов.
Структура каталогов
www/ │ ├── js/ │ └── command.js │ ├── img/ │ └── 35.gif │ ├── index.html └── mail.php
Для работы мы будем использовать:
- Фреймворк Bootstrap 3
- Библиотеку JQuery
Для быстрой верстки формы и создания модального окна воспользуемся Фреймворком Bootstrap 3. Данный Фреймворк очень сильно облегчает жизнь верстальщикам. Чтобы быть в тренде будем использовать технологию AJAX для отправки данных с формы без перезагрузки самой страницы.
Создаем файл index.html в нем создаем разметку нашей формы обратной связи.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>AJAX - отправка формы обратной связи в модальном окне</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>AJAX - отправка формы обратной связи в модальном окне</h3>
</div>
<div class="col-md-12">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Напиши нам</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Форма обратной связи</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="hide" id="respons"></div>
<form method="POST" action="mail.php" id="mailForm">
<div class="form-group">
<label for="labelEmail">Email адрес</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="labelPhone">Телефон</label>
<input type="text" class="form-control" name="mobile" id="mobile" placeholder="7927XXXXXXX" required>
</div>
<div class="form-group">
<label for="labelText">Текст</label>
<textarea name="text" id="text" cols="30" rows="10" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-default">Отправить</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JQuery AJAX SCRIPT-->
<script src="./js/command.js"></script>
</html>
После создания формы нам необходим обработчик данной формы на стороне клиента. Для этого будем использовать библиотеку JQuery. С помощью ее мы подготовим наш AJAX запрос далее методом POST передадим данные серверу для дальнейшей обработки.
Создаем файл command.js в котором опишем отправку данных с помощью AJAX технологии.
//Отправляем данные формы
$('#mailForm').submit(function(e){
e.preventDefault();
//Получаем объект формы
var form = $('#mailForm');
//Создаем прелоадер перед отправкой для красоты
var preloader = '<img src="./img/35.gif" alt="preloader"> Отправляем письмо...';
$('#respons').removeClass('hide').addClass('alert alert-warning').html(preloader)
//Устанавливаем задержку перед отправкой на 1,5 сек
setTimeout(function(){
//Отправляем AJAX запрос на сервер
$.ajax({
//Каким методом отправляем данные POST или GET
type: form.attr('method'),
//Адрес скрипта обработчика
url: form.attr('action'),
//Данные с полей формы
data: form.serialize(),
//Данный в формате JSON
dataType: "JSON",
success: function( data ) {
//Получаем AJAX ответ от сервера
//Проверяем на ошибки
if(data.status == 0)
{
err = '<ul>'
$.each(data.err, function(key, val){
err += '<li>'+ val +'</li>'
})
err += '</ul>'
//Выводим ошибки
$('#respons').removeClass().addClass('alert alert-danger').html(err)
}
else
{
$('#respons').removeClass().addClass('alert alert-success').html(data.ok)
//Очищаем форму и скрываем ее
setTimeout(function(){
form.trigger('reset');
$('#respons').removeClass().addClass('hide').empty();
$('.bs-example-modal-lg').modal('hide');
}, 1500)
}
}
})
}, 1500)
})
})
Как видно из скрипта command.js мы отлавливаем событие формы submit, далее все данные с формы отправляем на сервер. На сервере данные проверяются и если форма валидна, то письмо отправляется адресату. Если форма не валидна, то выводим ошибки пользователю.
Создадим файл mail.php обработчик формы с отправкой письма данных с формы.
<?php
/**
* Форма обратной связи, отправка письма
* Site: http://bezramok-tlt.ru
* Регистрация пользователя письмом
*/
// Устанавливаем константы
//Адрес почты кому отправляем
define('BEZ_MAIL_TO','Office <yourmail@yandex.ru>');
//Адрес почты от кого отправляем
define('BEZ_MAIL_AUTOR','Bezramok-tlt <no-reply@bezramok-tlt.ru>');
/**Отпровляем сообщение на почту
* @param string $to - Кому
* @param string $from - От кого
* @param string $title - Заголовок письма
* @param string $message - Тело письма
*/
function sendMail($to, $from, $title, $message)
{
//Формируем заголовок письма
$subject = $title;
$subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
/*Формируем заголовки для почтового сервера,
Говорим серверу что используем HTML*/
$headers = "Content-type: text/html; charset=\"utf-8\"\r\n";
$headers .= "From: ". $from ."\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
//Отправляем данные на ящик
if(!mail($to, $subject, $message, $headers))
return 'Ошибка отправки письма!';
else
return true;
}
//Если отправили форму, проверяем данные
if(isset($_POST['email']))
{
//Определяем переменные
$resp = array();
//Утюжим переменные
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$resp['err'][] = 'Не верный Email';
}
//Шаблон проверки мобильного телефона
$pattern = '/(8|7|\+7)?9\d{9}/';
//Проверяем мобильный телефон
if(!preg_match($pattern, $_POST['mobile'])){
$resp['err'][] = 'Не верный мобильный телефон';
}
//Формируем заголовок письма
$title = 'Ура нам письмо пришло!';
//Формируем HTML верстку письма для отправки
$msg = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />';
$msg .= nl2br($_POST['text']);
//Проверяем ошибки
if(!empty($resp['err']))
{
//Выводим ошибки
$resp['status'] = 0;
echo json_encode($resp);
}
else
{
//Вызываем функцию отправки письма
if(sendMail(BEZ_MAIL_TO, BEZ_MAIL_AUTOR, $title, $msg))
{
//Отправляем сообщение пользователю
$resp['ok'] = 'Письмо отправленно...';
$resp['status'] = 1;
echo json_encode($resp);
}
}
}
?>
Чтобы не было проблем с кодировкой, рекомендую создать в корневой директории файл .htaccess с вот таким содержимым: AddDefaultCharset utf-8
Скачать: Создание формы обратной связи в модальном окне на PHP + AJAX
-
Kvarcus 06:41:42 16/11/2017
Спасибо то что надо и работает ) !!! Есть правда пару вопросов. Форма использует jquery-2.2.4.min.js а у меня уже подключен jquery-3.2.1.slim.min.js он нужен для работы в dootstrap 4 конфликтов правда не заметил но знаю что использовать 2 jquery разных версий не есть хорошо если отключить jquery-2.2.4.min.js прелойдер крутиться без остановки и форма не отправляется. И второй вопрос зачем в форме первым пунктом идет email если информации по нему ни какой не приходит. Если не считать эти два пункта, в остальном все замечательно Спасибо.
Администрация 22:52:29 16/11/2017
По поводу совместимости версий Jquery вам лучше на Хабре статью почитать https://habrahabr.ru/post/303034/
Возможно она поможет решить Вашу проблему
По поводу формы, упустил момент с отправкой email, чуть позже поправлю скрипт и перезалью. Спасибо что заметили )
Pavel 07:27:16 11/11/2017
Использую шаблон bootstrap. В общем - не стал заморачиваться с темным сайтом и сделал перенаправление на страницу Спасибо сразу после заполнения формы. Спасибо за Форму..)
Администрация 09:37:49 11/11/2017
Не за что. Приходите еще ))
Pavel 00:38:15 10/11/2017
Вроде разобрался. Скрипт не вписал в html. Сейчас все отрабатывает так, как нужно, но после отправки письма, форма уезжает, но сайт весь остается темным, словно форма еще активна, и не реагирует на клики.
Администрация 08:11:27 10/11/2017
Тут сложно сказать. Однозначно проблема с версткой. Надеюсь в своем шаблоне вы используете bootstrap
Pavel 00:03:18 10/11/2017
Здравствуйте. Пытаюсь встроить вашу форму в сайт. Все работает, письма приходят, за что - огромное спасибо. Однако после отправки письма на экране, вместо подтверждения отправки открывается такая строчка:{"ok":"\u041f\u0438\u0441\u044c\u043c\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e...","status":1}Либо, если в поле телефона ошибка то такая:{"err":["\u041d\u0435 \u0432\u0435\u0440\u043d\u044b\u0439 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043b\u0435\u0444\u043e\u043d"],"status":0}А если неверен адрес, то:{"err":["\u041d\u0435 \u0432\u0435\u0440\u043d\u044b\u0439 Email"],"status":0}Подскажете, где ошибку искать?
Администрация 08:08:32 10/11/2017
Доброго времени суток Павел. Проблема в таков выводе заключается в кодировке. Нужно использовать UTF-8 и тогда тест у вас корректно отразится. Вам нужно проверить заголовки сервера на предмет кодировки, если с ним все в порядке то нужно проверить сам файл command.js возможно что при редактировании его вы сменили кодировку сами того не подозревая.
Андрей 00:54:54 27/05/2017
Я имею в виду с какого мыла отправлялось, ввод мыла есть а приходит с того которое само запишешь
Администрация 17:28:15 28/05/2017
Все правильно, свой адрес почты пишет конкретный человек, а при отправки мы используем свой "транспортный" почтовый адрес для отправки самому себе.
Форма обратной связи
