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

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

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

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

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

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 скрипту

                                
                            

$(".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);
        }
    });
});

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

Код 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>

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

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

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

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

X