Разработка модальной формы обратной связи с отправкой на e-mail

Конечно, есть готовые плагины, реализующие модальную форму обратной связи. Но, если не хотите подвешивать быстродействие сайта, можете разработать собственную.

HTML

Модальная форма будет вызываться при нажатии на кнопку. Прописываем кнопку:

<button id="modal_open">оставить заявку</button>

Далее необходимо прописать непосредственно форму. При загрузке страницы она будет скрыта, для этого используются id элементов. Помещаем код вниз страницы. Минимальные стили прописаны грубо в форме, вы можете вынести их и оформить как следует и как вам нравится:

<div id="modal_wrapper">
    <div id="modal_window">
        <div>
            <a id="modal_close" href="#">закрыть <b>X</b></a>
        </div>
        <p>Для отправки сообщения заполните форму:</p>
        <form id="modal_feedback" method="POST" action="/" onsubmit="return checkForm(this)" accept-charset="UTF-8">
            <p><label>Имя<strong>*</strong><br>
                    <input type="text" autofocus required size="48" name="name_send" value=""></label></p>
            <p><label>E-mail<strong>*</strong><br>
                    <input type="email" required title="Действующий адрес электронной почты" size="48" name="email" value=""></label></p>
            <p><label>Тема<br>
                    <input type="text" size="48" name="subject" value=""></label></p>
            <p><label>Сообщение<strong>*</strong><br>
                    <textarea required name="message" cols="48" rows="8"></textarea></label></p>
            <p><input type="submit" name="feedbackForm" value="Отправить сообщение"></p>
        </form>
    </div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->

Следом прописываем форму благодарности при успешной отправке на e-mail сообщения, задавая ей собственные id.

<div id="modal_wrapper_answer">
    <div id="modal_window_answer">
            <a id="modal_close_answer" href="#">x</a>
            <br>
            Cпасибо! Ваше сообщение успешно отправлено       
    </div> <!-- #modal_window_answer -->
</div> <!-- #modal_wrapper_answer -->

Ниже запускаем функцию отправки письма на e-mail (ее мы запрограммируем дальше), и если письмо успешно отправлено, то вызываем окно ответа с помощью js:

<?php
if (send_mail()) { ?>

<script>  
modal_init_answer();
</script>

<?php } ?>

CSS

Все стили, которые будут отвечать за внешний вид и красоту модальной формы, вы пропишите сами под стиль вашего сайта. Данные стили, описанные ниже, являются минимально необходимыми для разработки правильного выполнения задачи. Добавьте их в основой файл со стилями, или создайте отдельный (тогда не забудьте его прописать в HEAD).

#modal_wrapper.overlay::before,
#modal_wrapper_answer.overlay::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    content: "";    
    background: rgba(0,0,0,0.7);
  }

  #modal_window,   #modal_window_answer {
    display: none;
    z-index: 200;
    position: fixed;
    left: 50%;
    top: 50%;
    width: 360px;
    background: #fff;
    padding: 10px 20px;
    border: 5px solid #999;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    overflow: auto;
  }

  #modal_window input, #modal_window textarea {
    width: 100%;
    margin: 10px 0;
  }

  #modal_wrapper.overlay #modal_window,
  #modal_wrapper_answer.overlay #modal_window_answer {
    display: block;
  }

  #modal_close, #modal_close_answer {
    display:block;
    text-align: right;
  }

  #modal_open {
    width: 200px;
  }

JS

Данный скрипт нужен нам, чтобы проверить правильность заполнения полей пользователями. Большинство современных браузеров выполняет данную задачу при помощи HTML5, но мы оставляем js для всех остальных. Вы можете добавить данный код в свой js файл, либо создать новый (тогда не забудьте его прописать в HEAD):

let checkForm = function (e) {
    let form = (e.target) ? e.target : e.srcElement;
    if (form.name.value == "") {
        alert("Пожалуйста, заполните имя");
        form.name.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (form.email.value == "") {
        alert("Пожалуйста, заполните правильный e-mail адрес");
        form.email.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
    if (form.message.value == "") {
        alert("Пожалуйста, заполните поле сообщения");
        form.message.focus();
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        return;
    }
};

Также на javascript возлагается задача поведения обоих модальных окон. Мы хотим, чтобы окна закрывались не только по крестику «закрыть», но и при нажатии клавиши esc, и при нажатии мышкой на любом участке, кроме самого окна:

let modal_init = function () {
    let modalWrapper = document.getElementById("modal_wrapper");
    let modalWindow = document.getElementById("modal_window");

    let openModal = function (e) {
        modalWrapper.className = "overlay";
        let overflow = modalWindow.offsetHeight - document.documentElement.clientHeight;
        if (overflow > 0) {
            modalWindow.style.maxHeight = (parseInt(window.getComputedStyle(modalWindow).height) - overflow) + "px";
        }
        modalWindow.style.marginTop = (-modalWindow.offsetHeight) / 2 + "px";
        modalWindow.style.marginLeft = (-modalWindow.offsetWidth) / 2 + "px";
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    let closeModal = function (e) {
        modalWrapper.className = "";
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    let clickHandler = function (e) {
        if (!e.target) e.target = e.srcElement;
        if (e.target.tagName == "DIV") {
            if (e.target.id != "modal_window") closeModal(e);
        }
    };

    let keyHandler = function (e) {
        if (e.keyCode == 27) closeModal(e);
    };

    document.getElementById("modal_open").addEventListener("click", openModal, false);
    document.getElementById("modal_close").addEventListener("click", closeModal, false);
    document.addEventListener("click", clickHandler, false);
    document.addEventListener("keydown", keyHandler, false);
}

let modal_init_answer = function () {
    let modalWrapper = document.getElementById("modal_wrapper_answer");
    let modalWindow = document.getElementById("modal_window_answer");

    let openModal = function (e) {
        modalWrapper.className = "overlay";
        let overflow = modalWindow.offsetHeight - document.documentElement.clientHeight;
        if (overflow > 0) {
            modalWindow.style.maxHeight = (parseInt(window.getComputedStyle(modalWindow).height) - overflow) + "px";
        }
        modalWindow.style.marginTop = (-modalWindow.offsetHeight) / 2 + "px";
        modalWindow.style.marginLeft = (-modalWindow.offsetWidth) / 2 + "px";
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

    let closeModal = function (e) {
        window.location.href = "/";
    };

    let clickHandler = function (e) {
        if (!e.target) e.target = e.srcElement;
        if (e.target.tagName == "DIV") {
            if (e.target.id != "modal_window_answer") {
                window.location.href = "/";
            }
        }
    };

    let keyHandler = function (e) {
        if (e.keyCode == 27) {
            window.location.href = "/";
        }

    };
    document.getElementById("modal_close_answer").addEventListener("click", closeModal, false);
    document.addEventListener("click", clickHandler, false);
    document.addEventListener("keydown", keyHandler, false);

    openModal();
};

Поведение реализуется за счет удаления/добавления класса overlay.

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

document.getElementById("modal_feedback").addEventListener("submit", checkForm, false);
document.addEventListener("DOMContentLoaded", modal_init, false);

PHP

Далее программируем обработчик PHP отправки письма, для чего напишем функцию send_mail() Проверяем только наличие переменных (берем их из POST), так как их значения проверяются раньше на предыдущих шагах:

function send_mail()
{    
    if (isset($_POST['feedbackForm'])) {        
        extract($_POST);        
        if (isset($name_send, $email, $subject, $message)) {                       
            $to = "example@mail.ru";           
            $headers ="From: " . $name_send . " MIME-Version: 1.0 " . "\r\n" . "Content-type: text/html; charset=UTF-8 " . "\r\n";
            mail($to, $subject, $name_send . '<br >' . $email . '<br >' . $message, $headers);            
            return true;            
        }
    } 
    return false;
}

Не забудьте поменять условный e-mail на настоящий (на который вы собираетесь получать сообщения).

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

Если все это для вас сложно или вы не хотите тратить свое время, вы можете заказать эту разработку мне.