PHP и jQuery: Простая форма обратной связи без перезагрузки страницы

Под простотой подразумевается наличие лишь текстовых полей. По желанию, вы можете внедрить чекбоксы, селекты, прикрепление файлов и даже свою капчу. Технология Ajax, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

Поскольку для отправки формы мы будем использовать PHP, то не стоит делать акцент на том, что на вашем хостинге должна быть его поддержка.

Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

<div>Ваше Имя:</div>
<input type="text" name="name" id="name" value="" />

<div>Ваш E-mail <span>*</span>:</div>
<input type="text" name="email" id="email" value="" />

<div>Сообщение <span>*</span>:</div>
<textarea name="message" id="message"></textarea>

<div class="result"></div>

<a href="javascript: void(0);" id="submit">Отправить</a>

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

<script>
$(document).ready(function() {
$("#submit").on("click", function() {

    var name = $("#name").val(); // Получаем имя
    var email = $("#email").val(); // Получаем e-mail
    var message = $("#message").val(); // Получаем сообщение

    $.ajax({
        url: "/form.php", // Куда отправляем данные (обработчик)
        type: "post",
        data: {
            "name": name,
            "email": email,
            "message": message
        },
        success: function(data) {
            $(".result").html(data); // Выводим результат
        }
    });
});

});
</script>

Скрипт вставляем перед закрывающим тегом </body>. После того, как мы напишем обработчик, не забудьте в этом скрипте прописать корректную ссылку до него.

Ну и собственно последним шагом будет написание обработчика:

header("Content-Type: text/html; charset=utf-8");

if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest") {

    if(!isset($_POST["name"]) || !isset($_POST["email"]) || !isset($_POST["message"])) {
        die();
    }

    function send_form($message) {
        $mail_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: Система уведомлений <no-reply@".$_SERVER['HTTP_HOST'].">\r\n";
        mail($mail_to, $subject, $message, $headers);
    }
    $name = strip_tags($_POST["name"]); // Имя
    $email = strip_tags($_POST["email"]); // E-mail
    $mess = strip_tags($_POST["message"]); // Сообщение
    if(!preg_match("|^([a-z0-9_.-]{1,20})@([a-z0-9.-]{1,20}).([a-z]{2,4})|is", strtolower($email))) { // Если e-mail пустой или невалиден
        echo "E-mail указан некорректно.";
        die();
    }
    if($mess == "") { // Если сообщение пустое
        echo "Не указан текст сообщения.";
        die();
    }
    if($name == "") { // Если имя не указано
        $name = "Не указано";
    }
    $message = <<<HTML
        <b>Имя отправителя</b>: {$name}<br>
        <b>E-mail</b>: {$email}<br><br>
        <b>Текст письма</b>: {$mess}
      HTML;
    send_form($message); // Если ранее описанных ошибок нет - отправляем сообщение

    echo "Сообщение успешно отправлено!";
} else {
die();
}

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