Блог / JavaScript + Ajax / Всплывающая форма обратной связи готовый пример

Всплывающая форма обратной связи готовый пример

В этом примере создадим модальное окно с формой обратной связи. Выглядеть наше окно будет вот так:

Вот что мы будем использовать:
   Bootstrap – стили и скрипты фреймфорка для создания адаптивного модального окна.
   jquery ajax - для отправки запроса к обработчику php без перезагрузки страницы.
   php – обработка данных и отправка Email.

Для создания адаптивного модального окна будем использовать фреймворк bootstrap.
Для начала подключим bootstrap и jquery.
Для лучшего быстродействия сайта лучше скачать bootstrap и jquery.
В этом уроке мы подключим стили bootstrap с другого сайта, межу тегами <head> … <.head> пропишем:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Перед закрывающимся тегом </body> подключим jquery и javascript bootstrap.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Теперь приступим к созданию нашй всплывающей формы обратной связи. Возмем пример модального окна с сайта bootstrap и переделаем его в нашу форму обатной связи.
Кнопочка для отображения нашей формы связи будет иметь вид:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Форма обратной связи</button>

Само модальное окно:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" 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="myModalLabel">Форма обратной связи</h4>
      </div>
      <div class="modal-body"> 
            <input type="text" class="form-control" id="email" placeholder="Email">
            <textarea class="form-control" id="text" cols="30" rows="10" placeholder="Сообщение"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-primary" id="btn-send">Отправить письмо</button>
      </div>
    </div>
  </div>
</div>

Теперь создадим скрипт, который будет выполнять Ajax-запрос.
Для начала напишем функцию обработки клика кнопки «Отправить письмо», обращаемся к селектору id=”btn-send”

<script type="text/javascript">
 $(document).ready(function(){
$('#btn-send').click(function () {   
 	…
    	});
});    
</script>

При нажатии на кнопку нам нужно получить данные введенные в input и textarea, запишем их в переменные email и text.

<script type="text/javascript">
 $(document).ready(function(){   
    $('#btn-send').click(function () {
        var email = $('#email').val();
        var text = $('#text').val();

    });
});    
</script>

Теперь отправим полученные данные Ajax-запросом в php файл.

<script type="text/javascript">
 $(document).ready(function(){   
    $('#btn-send').click(function () {
        var email = $('#email').val();
        var text = $('#text').val();
        $.ajax({
            type: "POST", //метод передачи данных
            url: '/page.php', //обработчик php
            data: {email: email, text:text}, //передаваемые данные
            success: function(data) { //получение результата
			…
                }
            });
    });
});    
</script>

Создадим файл page.php, в этом файле получим пришедшие данные и отправим email.

page.php:

<?php
//получаем данные пришедшие post
$email=$_POST[email];
$text=$_POST[text];
$mess='email: '.$email.'; сообщение: '.$text;//сообщение
$headers  = "Content-type: text/html; charset=utf-8 \r\n";//кодировка 
$headers .= "From: mail@email.ru";//откуда отправлено письмо
//отправляем email админу
if(mail('admin@email.ru', 'Форма обратной связи', $mess, $headers)){
echo '<div class="alert alert-success alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    Сообщение успешно отправлено!'.$email.', '.$text.'
    </div>';
}else{
    echo '<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>Ошибка !</strong> Сообщение не отправлено!
    </div>';
}
?>

Теперь осталось в нашем JS только вывести сообщениt об успешной отправки. В переменную data поподут данные которые мы выводили в php обработчике при помощи функции echo. В <div class="modal-header"> добавим сообщение.

<script type="text/javascript">
 $(document).ready(function(){   
    $('#btn-send').click(function () {
        var email = $('#email').val();
        var text = $('#text').val();
        $.ajax({
            type: "POST", //метод передачи данных
            url: '/page.php', //обработчик php
            data: {email: email, text:text},//передаваемые данные
            success: function(data) { //получение результата
                var old = $('.modal-header').html();//получаем содежимое div
                $('.modal-header').html(old + data); //добавляем сообщение об отправке
                }
            });
    });
});    
</script>

Вот и все у нас получилось адаптивная всплывающая форма связи для сайта.

Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на:
скайп: olegg.pann
telegram, viber - +380937663911
додавайтесь у телеграм-канал: t.me/webyk
email: oleggpann@gmail.com
ми у fb: www.facebook.com/webprograming24
Обов`язково оперативно відповімо на усі запитіння