Разработка формы обратной связи для любого сайта

В статье дан пример реализации простой и надежной отправки контактных данных с любого сайта, без использования CMS и тяжелых плагинов, на примере можно увидеть как просто реализовать такой функционал

Для чего подойдет такая форма

Часто в работе приходится сталкиваться с задачей отправки формы с данными клиента, при этом не перезагружая страницу. У CMS есть для этого плагины, и при разработке корпоративных сайтов мы используем MODX Revo и плагин к нему, но если нужен лэндинг, на простой файловой CMS то для него лучше использовать простой обработчик заявок. Будем использовать JS код для сбора заполненных полей из формы и передачу их PHP скрипту

Внешний вид формы

Необходимые библиотеки и фреймворки

Форма и скрипт использует стили Bootstrap 5 и jquery, он часто используется на проектах, если у вас он не подключен и вы используете другой фреймворк или свой чистый css то добавьте себе класс d-none, или просто подключите Bootstrap.

Вставьте в теге HEAD 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css"

И до закрывающего тего </body> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>

HTML верстка формы

Для примера используем рабочий пример с одного из клиентских проектов

<div class="form__container" id="cbf">
    <div class="title title--white pb-3">Заявка</div>
    <form class="feedback__form form feedback__form__getMoney text-light"><input class="form__input" type="text"
                                                                                 placeholder="Сумма кредита *"
                                                                                 name="sum" required/> <select
            class="form__input" required name="credit_type">
        <option selected value="">Тип кредита</option>
        <option value="Господдержка">Господдержка</option>
        <option value="Ипотека">Ипотека</option>
        <option value="Рефинансирование">Рефинансирование</option>
        <option value="Кредит под залог">Кредит под залог</option>
        <option value="Кредит наличными">Кредит наличными</option>
        <option value="Кредит для бизнеса">Кредит для бизнеса</option>
    </select> <input class="form__input" type="text" placeholder="Имя *" name="name" required/> <input
            class="form__input js-maskPhone" type="text" placeholder="Телефон *" name="phone" required/>
        <button class="button form__button btn btn-success py-3 px-5 w-100">отправить</button>
    </form>
    <div class="feedback__info">Нажимая кнопку «Отправить», я даю свое согласие на обработку моих персональных данных, в
        соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей,
        определенных в Согласии на обработку персональных данных
    </div>
</div>
<div id="success__getMoney" class="feedback__tagtitle d-none">Форма успешно отправлена. <br>Спасибо за Ваше обращение,
    наш менеджер свяжется с Вами в ближайшее время
</div>

Стили CSS для формы

.feedback {
    padding: 55px 0;
    background: #4c8354;
}

.feedback__tagtitle {
    margin: 0 0 30px 0;
    font-size: 18px;
    color: #FFF;
    text-align: center;
}

.feedback__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    margin: 0 0 40px 0;
    gap: 30px 65px;
}

@media (max-width: 992px) {
    .feedback__form {
        gap: 15px;
    }
}

.feedback__info {
    font-size: 9px;
    font-weight: var(--regular);
    color: #FFF;
    text-align: center;
}

.form__input {
    width: 100%;
    height: 52px;
    padding: 0 17px;
    font-size: 15px;

    background: #65946c;
    border: 1px solid #65946c;
    border-radius: 5px;
    color: #f3f0ec;
}
.form__input::placeholder {
    color: white;
}

.form__input::-webkit-input-placeholder {
    font-size: 15px;
    color: #fff;
}

.form__input::-moz-placeholder {
    font-size: 15px;
    color: #fff;
}

.form__input:-ms-input-placeholder {
    font-size: 15px;
    color: #fff;
}

.form__input::-ms-input-placeholder {
    font-size: 15px;
    color: #fff;
}

.form__input::placeholder {
    font-size: 15px;
    color: #fff;
}

.form__button {
    width: 250px;
    padding: 16.5px 0;
    font-weight: var(--extrabold);
    font-size: 14px;
}

.mx-icon-sq {
    border-radius: 20%;
    padding: 10px;
    background-color: #d8edda;
    min-height: 75px;
    min-width: 75px;
}
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
    border-radius: .75rem;
}

JS обработчик формы который отправляет данные PHP скрипту 

<pre>

$(".feedback__form__getMoney").submit(function(e) {
    e.preventDefault();
    var form_data = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "form_callback/mail.php", //измените путь к скрипту на свой
        data: form_data,
        success: function() {
            $('#getmoney .form__container').addClass('d-none');
            $('.feedback__form__getMoney')[0].reset();
            $('#success__getMoney').removeClass('d-none');
            setTimeout(function() {
                    $('#success__getMoney').addClass('d-none');
                },
                5000);
            setTimeout(function() {
                    $('#getmoney .form__container').removeClass('d-none');
                },
                5000);
        }
    });
});</pre>

Что происходит в JS обработчике я попросил объяснить ChatGPT

$(".feedback__form__getMoney").submit(function(e) {...}); - Это обработчик события, который срабатывает при попытке отправить форму с классом "feedback__form__getMoney".

e.preventDefault(); - Это предотвращает стандартное поведение браузера при отправке формы (то есть перезагрузка страницы).

var form_data = $(this).serialize(); - Здесь данные формы сериализуются в строку для дальнейшей отправки на сервер.

$.ajax({...}); - Это функция jQuery, которая делает асинхронный HTTP запрос. В вашем случае она выполняет POST запрос.

Внутри $.ajax({...}); параметры определяют, как будет выполнен запрос:

type: "POST", - определяет тип HTTP запроса, в данном случае POST.

url: "form_callback/mail.php", - это путь к вашему обработчику PHP.

data: form_data, - это данные, которые будут отправлены на сервер. В данном случае это сериализованные данные формы.

success: function() {...} - это функция, которая будет вызвана, если запрос завершится успешно.

Внутри функции success: function() {...} происходит следующее:

$('#getmoney .form__container').addClass('d-none'); - добавляет класс 'd-none' к элементу с id 'getmoney' и классом 'form__container', скрывая его.

$('.feedback__form__getMoney')[0].reset(); - сбрасывает данные формы.

$('#success__getMoney').removeClass('d-none'); - удаляет класс 'd-none' у элемента с id 'success__getMoney', делая его видимым.

setTimeout(function() {...}, 5000); - устанавливает таймер, который через 5 секунд скрывает сообщение об успехе и возвращает форму обратно.

Код PHP скрипта который получает от JS скрипта данные из формы обратной связи

<?php
$to = 'youremail@gmail.com';

$subject = 'Заявка с сайта yoursite.ru';
$sum = htmlspecialchars($_POST['sum']);
$credit_type = htmlspecialchars($_POST['credit_type']);
$firstname = htmlspecialchars($_POST['firstname']);
$name = htmlspecialchars($_POST['name']);
$surname = htmlspecialchars($_POST['surname']);
$phone = htmlspecialchars($_POST['phone']);
$email = htmlspecialchars($_POST['email']);

$message = '
                  <html>
                      <head>
                          <title>'.$subject.'</title>
                      </head>
                      <body>
                          <table>
                              <tr>
                                  <td><b>Фамилия:</b></td>
                                  <td>'.$firstname.'</td>
                              </tr>
                              <tr>
                                  <td><b>Имя:</b></td>
                                  <td>'.$name.'</td>
                              </tr>
                              <tr>
                                  <td><b>Отчество:</b></td>
                                  <td>'.$surname.'</td>
                              </tr>
                              <tr>
                                  <td><b>Телефон:</b></td>
                                  <td>'.$phone.'</td>
                              </tr>
                              <tr>
                                  <td><b>E-mail:</b></td>
                                  <td>'.$email.'</td>
                              </tr>
                              <tr>
                                  <td><b>Тип кредита:</b></td>
                                  <td>'.$credit_type.'</td>
                              </tr>
                              <tr>
                                  <td><b>Сумма:</b></td>
                                  <td>'.$sum.'</td>
                              </tr>
                          </table>
                      </body>
                  </html>';
$headers  = "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: Заявка с сайта<noreply@yoursite.ru>\r\n";
mail($to, $subject, $message, $headers);

Полный код HTML страницы с формой обратной связи и подключенными библиотеками

Для целостности картины привожу полный код страницы

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
<!--    Подключаем файл стилей для формы, что бы она была адаптивна-->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
<div class="section" class="feedback" id="getmoney">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="form__container" id="cbf">
                    <div class="title title--white pb-3">Форма обратной связи без перезагрузки страницы</div>

                    <form class="feedback__form form feedback__form__getMoney text-light">
                        <input class="form__input" type="text" placeholder="Сумма кредита *" name="sum" required/>
                        <select class="form__input" required name="credit_type">
                            <option selected value="">Тип кредита</option>
                            <option value="Господдержка">Господдержка</option>
                            <option value="Ипотека">Ипотека</option>
                            <option value="Рефинансирование">Рефинансирование</option>
                            <option value="Кредит под залог">Кредит под залог</option>
                            <option value="Кредит наличными">Кредит наличными</option>
                            <option value="Кредит для бизнеса">Кредит для бизнеса</option>
                        </select>
                        <input class="form__input" type="text" placeholder="Имя *" name="name" required/>
                        <input class="form__input js-maskPhone" type="text" placeholder="Телефон *" name="phone" required/>
                        <button class="button form__button btn btn-success py-3 px-5 w-100">отправить</button>

                    </form>
                    <div class="feedback__info">Нажимая кнопку «Отправить», я даю свое согласие на обработку моих персональных
                        данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на
                        условиях и для целей, определенных в Согласии на обработку
                        персональных данных
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="success__getMoney" class="feedback__tagtitle text-dark d-none">Форма успешно отправлена. <br>Спасибо за Ваше
    обращение, наш менеджер свяжется с Вами в ближайшее время
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.bundle.min.js"
        integrity="sha512-sH8JPhKJUeA9PWk3eOcOl8U+lfZTgtBXD41q6cO/slwxGHCxKcW45K4oPCUhHG7NMB4mbKEddVmPuTXtpbCbFA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Подключаем файл с обработчиком JS (его код я привел выше)-->
<script src="main.js"></script>
</body>

</html>

Готовая форма

Что бы протестировать работы этой формы у себя на хостинге, можете загрузить архив, распаковав его у себя на хостинге и попробовать как работает форма.

Изменения которые нужно внести в файлы:

  • в файле form_send.php нужно указать свой реальный email
Загрузить архив с файлами

Как сделать адаптивную форму обратной связи

Проще всего для адаптации под разные разрешения экранов нужно переназначить свойства классов, для этого используются медиазапросы в файле css, можно взять их из Bootstrap 5 и применять отдельно фреймворка или вместе с ним.

Мы используем Cookie

для корректной работы сайта

X