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

Теги

#PHP #Jquery #AJAX

Поддержи проект:

Андрей

Привет. Есть вопрос, как сделать чтобы приходило от кого сообщение ?

26/05/2017 17:18:08

Администрация

Если я правильно понял, то вы хотите получить на почту E-mail отправителя почты? Если так, то нужно в файле обработчике mail.php добавить строку, где формируем HTML верстку для письма перед отправкой.


<?php
//Формируем HTML верстку письма для отправки
$msg  = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />';
$msg .= nl2br($_POST['text']);
?>


<?php
//Формируем HTML верстку письма для отправки
$msg  = 'Мобильный телефон <strong>'. $_POST['mobile'].'</strong><br />';
$msg .= 'E-mail отправителя <strong>'. $_POST['email'].'</strong><br />';
$msg .= nl2br($_POST['text']);
?>

28/05/2017 17:22:31

Артем

все сделал но почему то не отправляет на почту пишет идет отправка и все

19/04/2017 05:47:36

Администрация

Скорей всего где-то ошибка. Чтобы ее отловить нужно установить firebug на firefox и отловить ошибку в консоле.

20/04/2017 19:19:48

я заметил

Админчик огромное спасибо, я пересмотрю что и как тут в данном коде и отпишусь еще)

08/03/2017 00:28:27

Администрация

ОК

09/03/2017 20:10:30

JerryWen

Вам ( ͠° ͟ʖ ͡°)

27/02/2017 15:29:14

Администрация

Спасибо!

27/02/2017 15:33:59

JerryWen

Уже сделал себе ( ͠° ͟ʖ ͡°) Вы молодец, продолжайте в том же духе, студентов спасаете и помогаете многим челикам. Насчет новых уроков, могу посоветовать показать вам как создать Админ панель или Формы для редактирования записей в базе данных.

27/02/2017 15:28:17

Администрация

Обязательно сделаю, как будет время, его катастрофически не хватает ))

27/02/2017 15:33:44