Создание формы обратной связи в модальном окне на PHP + AJAX

Создание формы обратной связи в модальном окне на 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. Данный Фреймворк очень сильно облегчает жизнь верстальщикам. Чтобы быть в тренде будем использовать технологию 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">&times;</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

Внимание: Если вы используете данный скрипт на локальном сервере типа DENWER, XAMPP, то не стоит ждать писем на свой почтовый ящик. Письма лежат в заглушке sendmail. В Denwer вы их можете найти по пути Z:\tmp\!sendmail\ открыть данные файлы вы сможете в любом почтовом клиенте.

Скачать: Создание формы обратной связи в модальном окне на 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

    Все правильно, свой адрес почты пишет конкретный человек, а при отправки мы используем свой "транспортный" почтовый адрес для отправки самому себе.

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