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

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

Даниил

Отличный скрипт. Вроде все работает. Хочу в форму добавить еще ввод имени отправителя. Добавил в mail.php $msg = 'Имя <strong>'. $_POST['fullname'].'</strong><br />'; В форму добавил новое поле fullname. Но не работает. Куда-то еще надо добавить?

23/09/2024 17:36:30

Админ

Если у вас в форме есть соответствующие поле , то во время отправки письма вам нужно конкатенировать строки $msg .='';

08/10/2024 11:32:53

Алексей

Скажите, а должно ли при успешной отправке формы показываться сообщение о том, что она отправлена? У меня всё успешно отправляется, письмо приходит, но только на сайте этого понять нельзя. Там форма просто очищается без каких-либо уведомлений.

20/12/2023 01:55:40

Админ

Да должен, если вы ничего не меняли в разметке. Сообщения выводятся в модальном окне в DIV с ID #respons

07/02/2024 12:33:50

Евгений

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

02/11/2023 13:57:55

Админ

Так как отправка осуществляется через sendmail (MTA), то в текущих реалиях многие хостинги блокируют данный почтовый агент для отправки писем. Вам нужно уточнить у вашехо хостинга заблокирована передача писем через sendmail или нет.

24/11/2023 11:03:11

Виктор

Добрый день! "Данный скрипт отправляет письма через Mail Transfer Agent (MTA). Такой агент установлен на Linux системах". А если Windows система - как быть?

02/10/2022 18:10:16

Админ

Доброго времени суток.

Если вы используете локальный хостинг на Windows то смотрите в сторону PHP скрипта работающего через внешний SMTP сервер. Например PHPMailer. Можете скачать себе данный пакет из репозитория на GitHub.

03/10/2022 11:00:37

Есения

Добрый день. Все работает,успешно отправляется,но письмо не приходит. Сломала голову, где его ловить(

01/09/2022 07:38:28

Админ

Добрый день!

Данный скрипт отправляет письма через Mail Transfer Agent (MTA). Такой агент установлен на Linux системах.

Что касаемо вашей проблемы, то если вы разрабатываете локально у себя на компьютере с использованием например OpenServer то письма уходить не будут на реальный почтовый ящик, если вы не настраивали у него SMTP.

Все письма OpenServer складывает в userdata/temp/email/ Можете в этой папке проверить свои письма.

01/09/2022 08:00:19

Kvarcus

Спасибо то что надо и работает ) !!! Есть правда пару вопросов. Форма использует jquery-2.2.4.min.js а у меня уже подключен jquery-3.2.1.slim.min.js он нужен для работы в dootstrap 4 конфликтов правда не заметил но знаю что использовать 2 jquery разных версий не есть хорошо если отключить jquery-2.2.4.min.js прелойдер крутиться без остановки и форма не отправляется. И второй вопрос зачем в форме первым пунктом идет email если информации по нему ни какой не приходит. Если не считать эти два пункта, в остальном все замечательно Спасибо.

16/11/2017 06:41:42

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

По поводу совместимости версий Jquery вам лучше на Хабре статью почитать https://habrahabr.ru/post/303034/

Возможно она поможет решить Вашу проблему

По поводу формы, упустил момент с отправкой email, чуть позже поправлю скрипт и перезалью. Спасибо что заметили )

16/11/2017 22:52:29

Pavel

Использую шаблон bootstrap. В общем - не стал заморачиваться с темным сайтом и сделал перенаправление на страницу Спасибо сразу после заполнения формы. Спасибо за Форму..)

11/11/2017 07:27:16

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

Не за что. Приходите еще ))

11/11/2017 09:37:49

Pavel

Вроде разобрался. Скрипт не вписал в html. Сейчас все отрабатывает так, как нужно, но после отправки письма, форма уезжает, но сайт весь остается темным, словно форма еще активна, и не реагирует на клики.

10/11/2017 00:38:15

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

Тут сложно сказать. Однозначно проблема с версткой. Надеюсь в своем шаблоне вы используете bootstrap

10/11/2017 08:11:27

Pavel

Здравствуйте. Пытаюсь встроить вашу форму в сайт. Все работает, письма приходят, за что - огромное спасибо. Однако после отправки письма на экране, вместо подтверждения отправки открывается такая строчка:


{"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}

Подскажете, где ошибку искать?

10/11/2017 00:03:18

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

Доброго времени суток Павел. Проблема в таков выводе заключается в кодировке. Нужно использовать UTF-8 и тогда тест у вас корректно отразится. Вам нужно проверить заголовки сервера на предмет кодировки, если с ним все в порядке то нужно проверить сам файл command.js возможно что при редактировании его вы сменили кодировку сами того не подозревая.

10/11/2017 08:08:32

Андрей

Я имею в виду с какого мыла отправлялось, ввод мыла есть а приходит с того которое само запишешь

27/05/2017 00:54:54

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

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

28/05/2017 17:28:15