Форма обратной связи в модальном окне

Форма обратной связи в модальном окне на PHP и Ajax

Сегодня я вам покажу как сделать форму обратной связи в модальном окне. Модальное окно будет написано на jQuery. Мы соберем код из ранее выпущенных записей и создадим новую форму обратной связи.

Демо

HTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flat Modal Window</title>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- КНОПКА-->
<div class="page-wrapper">
  <a class="btn trigger" href="#">Открыть форму</a>
</div>

<!-- МОДАЛЬНОЕ ОКНО-->
<div class="modal-wrapper">
  <div class="head"></div>
  <div class="modal">
    <div class="content">
        <div class="good-job">
          <p style="padding: 20px 0 0;color: gray;margin: 0;font-size: 14px;">ОСТАВЬТЕ СВОИ ДАННЫЕ И МЫ С ВАМИ СВЯЖЕМСЯ</p>
          <div class="text">
            <p>и мы удешевим решение вашей задачи без потери качества</p>
          </div>
          <form class="form_modal_window" action="">
            <input type="text" name="name" placeholder="Ваше имя" required>
            <input type="email" name="email" placeholder="Ваш email" required>
            <input type="phone" name="phone" placeholder="Ваш телефон" required>
            <input class="form_sub" name="sub" type="submit" value="ОТПРАВИТЬ">
          </form>
          <div id="erconts"></div>
        </div>
    </div>
  </div>
</div>

<!--СКРИПТ ДЛЯ МОДАЛЬНОГО ОКНА-->
  <script  src="js/index.js"></script>

<!--AJAX СКРИПТ ДЛЯ ФОРМЫ-->
  <script>
      $(document).ready(function() {
          $('.form_sub').click(function(){
              $.ajax({
                  type: "POST", //указываем что метод отправки POST
                  url:"form.php", // указываем адрес обработчика
                  data:$('.form_modal_window').serialize(), //указываем данные которые будут передаваться обработчику
                /* Мы указываем id формы - $('#callbacks'), и методом serialize() забираем значения всех полей. */
                  error:function(){$("#erconts").html("Произошла ошибка!");},
                /* если произойдет ошибка в элементе с id erconts выведется сообщение*/
                  beforeSend: function() {
                      $("#erconts").html("<p style='color: orangered;'>Отправляем данные...</p>");
                  },
                  success: function(result){
                    /* В случае удачной обработки и отправки выполнится следующий код*/
                      $('#erconts').html(result);
                      checkThis();
                  }
              });
              return false;
          });
      });
  </script>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.page-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
}
a.btn {
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;
}
.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: rgba(0, 0, 0, 0.5);
}
.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}
.modal {
  width: 500px;
  display: block;
  margin: 30% 0 0 -250px;
  position: relative;
  top: 50%; 
  left: 50%;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #fafafa;
}
.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}
.head{
  width: 100%;
  height: 100%;
  margin: 0 0 14px;
  padding: 5px 30px;
  overflow: hidden;
  position: absolute;
}
.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}
.modal .content {
  padding: 0 0 20px 0;
}
.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 45px;
}
.form_modal_window{
  max-width: 70%;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.modal .content .text{
  background: url("../Bright-Purple-Wallpaper-59-images.jpg");
  color: #fff;
  padding: 10px;
  margin: 20px 0;
}
.modal .content .text h2{
  margin:0;
  font-size: 35px;
}
.modal .content .text p{
  margin:0;
  font-size: 14px;
}
.modal-wrapper{
  margin: 0 0 20px 0;
}
.modal .content form input {
  color: #000;
  padding: 15px;
  border: none;
  margin-bottom: 15px;
  box-shadow: 0px 1px 3px 1px #e9e9e9;
  font-size: 15px;
}
.modal .content form input[type=submit]{
  padding: 10px 40px;
  max-width: 200px;
  margin: auto;
  border-radius: 54px;
  color: #fff;
  background: #f7b231;
  background: -moz-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: -webkit-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: linear-gradient(to bottom, #ffc281 0%, #ff8c97 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-yellow', endColorstr='$color-pink', GradientType=0);
  font-size: 15px;
  text-shadow: 0px 0px 6px #e54242;
  display: inline-block;
  border: none;
  outline: none;
}

Скрипт для модального окна

$( document ).ready(function() {
  $('.trigger').on('click', function() {
      $('.modal-wrapper').toggleClass('open');
      $('.page-wrapper').toggleClass('blur-it');
      return false;
  });
  $('.head').on('click', function (){
      $('.modal-wrapper').removeClass('open');
  })
});

PHP

<?php
/*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["phone"];


/*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
if($name=="" or $email=="" or $tel==""){
    echo "Заполните все поля";
}

else{
    /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
    $to = "your_mail@mail.ru"; /* Адрес, куда отправляем письма*/
    $subject = "Письмо с обратной связи"; /*Тема письма*/
    $headers = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: <test@mail.ru>\r\n";/*ОТ КОГО*/

    /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
    $message .= "Имя пользователя: ".$name."\n";
    $message .= "Почта: ".$email."\n";
    $message .= "Телефон: ".$tel."\n";

    /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/
    //print_r($message);

    $send = mail($to, $subject, $message, $headers);

    /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
    if ($send == "true")
    {
        echo "<p style='color: green;'>Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n</p>";
    }
    /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
    else
    {
        echo "<p style='color: red;'>Не удалось отправить, попробуйте снова!</p>";
    }
}
?>
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

13
Оставить комментарий

avatar
9 Цепочка комментария
4 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
10 Авторы комментариев
DoreenHumDonaldbewThomasFlestHuakin_cluroRickygat Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Турал
Гость
Турал

Хотел установить форму на сайт, но возникла проблема
Uncaught ReferenceError: checkThis is not defined
at Object.success (index.html:155)
at l (core.min.js:8)
at Object.fireWith [as resolveWith] (core.min.js:8)
at r (core.min.js:8)
at XMLHttpRequest. (core.min.js:8)

кукушка
Гость
кукушка

как сделать что бы не было перезагрузки!?

Oleg
Гость
Oleg

какие строки убрать что бы php работал без e-mail адреса!? только имя и телефон!?

Вячеслав
Гость
Вячеслав

Все отлично, но хотелось бы поставить такую форму на опенкарт cms, не могу понять куда прикрутить php?

Rickygat
Гость

usabuycialis delivery! Comfort. Joy.
[url=https://usabuyciali.com]buy cialis pharmacy[/url]

See you later in USA
[url=https://usabuyciali.com]Cialis low price[/url]

Huakin_cluro
Гость
Huakin_cluro

WaspKiller lied to me.
I sent him 8,000 euros via Western Union to Poland in the name of Ludmila Lvova.
WaspKiller doesn’t answer my Telegram. He blocked me.
He put me and my family in danger.
He lives in Poland, Wroclaw.
Waspkiller scamer!

[b]His contact:[/b]
Telegram @WaspKiller
+359879089778
+79663398020
89663398020
Wasp Killer
ВаспКиллер

ThomasFlest
Гость

Tadalafil, sold beneath the waves the type label Cialis volume others, is a medication occupied to freebie behaviour towards erectile dysfunction, genial prostatic hyperplasia, and pulmonary arterial hypertension. It is a tablet taken before mouth. [url=https://usacialisd.com]generic pills cialis[/url] Common side effects include headache, muscle tribulation, flushed husk, and nausea. Forethought is advised in those with cardiovascular disease. Rare but serious side effects take in a prolonged erection that can lead to indemnity to the penis, foresightedness problems, and hearing loss. Tadalafil is not recommended in people taking nitrovasodilators such as nitroglycerin, as this may result in a solemn pinch in… Подробнее »

Donaldbew
Гость

Ламинин Норвежский http://1541.ru в 4 раза дешевле, чем американский Laminine Lpgn. Если медицина уже бессильна. Не опоздайте. Viber/whаtsapp +380976131437

DoreenHum
Гость

Результат измерений в цифровом виде передается по кабелю в любой момент весовой терминал. Каскадное регулирование температуры приточного воздуха. Весы железнодорожные для взвешивания в статике реконструированные Сохранившиеся механические вагонные весы можно модернизировать, получив при этом все преимущества электронных весов вдобавок сэкономив значительные хлеб. В процессе реконструкции демонтируется рычажная система, восстанавливаются продольные также поперечные упоры, грузоприемная платформа усиливается (при необходимости) как и устанавливается до гроба тензометрические датчики колонного типа. Реконструированные весы могут быть изготовлены в цифровом исполнении. Холодильные витрины, морозильные лари, морозильники, пищевое оборудование в Краснодаре Конструкция равным образом размеры грузоприемной платформы вагонных весов определяются способом взвешивания в свой черед парком вагонов… Подробнее »