Разработка формы обратной связи без перезагрузки страницы с использованием Bootstrap 5 и jQuery

Форма обратной связи является важным элементом взаимодействия с пользователями на веб-сайтах. Однако обновление страницы при отправке формы может быть неудобным для пользователей. В этой статье мы рассмотрим, как создать форму обратной связи без перезагрузки страницы, используя Bootstrap 5 и jQuery.

Введение
Веб-технологии постоянно развиваются, и создание динамичных форм обратной связи становится все более популярным. Мы рассмотрим простой и эффективный способ реализации формы обратной связи в модальном окне с использованием Bootstrap 5 и jQuery.

Подготовка среды
Прежде чем начать, убедитесь, что на вашем сайте подключены Bootstrap 5 и jQuery. Если они уже подключены, то дополнительное подключение не требуется.

<!-- Подключение Bootstrap 5 CSS и JS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Подключение jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Создание формы обратной связи
Давайте создадим простую форму обратной связи в модальном окне. При отправке формы данные будут переданы на сервер без перезагрузки страницы.

<!-- Код кнопки, открывающей модальное окно -->
<button type="button" class="btn btn-primary btn-lg shadow" data-bs-toggle="modal" data-bs-target="#itdformModal">Оставить заявку</button>

<!-- Модальное окно для формы обратной связи -->
<div class="modal fade" id="itdformModal" tabindex="-1" aria-labelledby="itdformModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="itdformModalLabel">ОСТАВИТЬ ЗАЯВКУ</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Форма обратной связи -->
                <form id="feedbackForm">
                    <input type="text" class="form-control mb-1" id="user_name" placeholder="Ваше имя">    
                    <input type="text" class="form-control mb-1" id="user_tel" placeholder="Контактный тел.">
                    <textarea id="text_comment" class="form-control mb-1" placeholder="Комментарий (необязательно)"></textarea>
                    <div class="d-grid gap-2">
                        <input type="button" class="btn btn-primary" value="Отправить" id="btn_submit"> 
                    </div>
                </form>
            </div>
            <div class="modal-footer fw-lighter">
                <div class="messages"></div>
            </div>
        </div>
    </div>
</div>

Обработка данных на сервере с использованием PHP
Теперь создадим серверный скрипт (назовем его action.php), который будет обрабатывать данные, полученные из формы, и отправлять уведомление на указанную почту.

<?php
    $msg_box = ""; // переменная для хранения сообщений формы
    $errors = array(); // контейнер для ошибок

    // проверяем корректность полей
    if(empty($_POST['user_name']))    $errors[] = "Поле 'Ваше имя' не заполнено!";
    if(empty($_POST['user_tel']))   $errors[] = "Поле 'Контактный тел.' не заполнено!";

    // если форма без ошибок
    if(empty($errors)){     
        // собираем данные из формы
        $message  = "<b>Имя пользователя:</b> " . $_POST['user_name'] . "<br>";
        $message .= "<b>Контактный телефон:</b> " . $_POST['user_tel'] . "<br>";
        $message .= "<b>Комментарий:</b> " . $_POST['text_comment'];

        send_mail($message); // отправим письмо

        // выведем сообщение об успехе
        $msg_box = "Сообщение успешно отправлено!";
    } else {
        // если были ошибки, то выводим их
        $msg_box = "";
        foreach($errors as $one_error){
            $msg_box .= "$one_error<br>";
        }
    }

    // делаем ответ на клиентскую часть в формате JSON
    echo json_encode(array(
        'result' => $msg_box
    ));

    // функция отправки письма
    function send_mail($message){
        // почта, на которую придет письмо
        $mail_to = "[email protected]"; 
        // тема письма
        $subject = "Запрос с сайта";
        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Тестовое письмо <[email protected]>\r\n"; // от кого письмо

        // отправляем письмо 
        mail($mail_to, $subject, $message, $headers);
    }
?>

Обработка данных на клиенте с использованием jQuery
Теперь давайте добавим обработчик события на стороне клиента, который будет отправлять данные формы на сервер при клике на кнопку "Отправить".

<script>
    $(document).ready(function(){
        $('#btn_submit').click(function(){
            // собираем данные с формы
            var user_name    = $('#user_name').val();
            var user_tel   = $('#user_tel').val();
            var text_comment = $('#text_comment').val();

            // отправляем данные
            $.ajax({
                url: "action.php", // куда отправляем
                type: "post", // метод передачи
                dataType: "json", // тип передачи данных
                data: { // что отправляем
                    "user_name":    user_name,
                    "user_tel":   user_tel,
                    "text_comment": text_comment
                },
                // после получения ответа сервера
                success: function(data){
                    $('.messages').html(data.result); // выводим ответ сервера
                }
            });
        });
    });
</script>

Заключение
Теперь у вас есть простая и эффективная форма обратной связи без перезагрузки страницы. Этот метод особенно удобен для пользователей, и он легко настраивается под различные дизайны и потребности веб-сайта. Внимательно следите за кодом и адаптируйте его под свои требования.