Ajax форма для WordPress

Использование ajax при отправке формы позволяет отправить форму без перезагрузки страницы. В WordPress это достаточно просто реализовать. Допустим, у нас есть следующая форма заказа звонка:

<form class="form-container recall-form-validate">
    <div class="form-title"><h2>Заказать звонок</h2></div>
    <div class="form-title">Введите Ваше имя:</div>
    <input class="form-field form-name" type="text"  name="name" /><br />
    <div class="form-title">Введите номер телефона:</div>
    <input class="form-field form-tel" type="text"  name="tel" /><br />
    <div id="submit-ajax" class="submit-container">
        <input class="submit-button" type="submit" value="Отправить"/>
    </div>
</form>

Теперь напишем скрипт, обрабатывающий событие нажатия на кнопку "Отправить":

$(".submit-button").on("click", function (event) {
        event.preventDefault();
        var name = $(".form-name").val();
        var tel = $(".form-tel").val();
        $.ajax({
            url: "/wp-admin/admin-ajax.php",
            method: 'post',
            data: {
                action: 'ajax_order',
                name: name,
                tel: tel

            },
            success: function (response) {
                $('#submit-ajax').html(response);
            }
        });
    });

Скрипт отменяет отправку данных на сервер, затем записывает значения полей формы и отправляет их через ajax. Получив результат обработки запроса, скрипт выводит в блоке с id = submit-ajax сообщение, полученное от сервера.

Улучшенный вариант скрипта, который обрабатывает поля формы автоматически:

<script>

    jQuery(document).ready(function($){
        var form = $(".form-container");

        form.on("submit", function (event) {
            event.preventDefault();
            var vanilaForm = this;
            var form = $(vanilaForm);

            var way = form.data('action') || "ajax_order";

            var formData = new FormData(vanilaForm);
            formData.append("action", way);

             $.ajax({
               url: "/wp-admin/admin-ajax.php",
               method: 'post',
               data: formData,
               success: function (response) {
                $('#submit-ajax').html(response);
            }});
        });
    });

</script>

Осталось написать функцию, которая будет обрабатывать отправленные на сервер данные (её можно поместить в файл темы functions.php):

function ajax_form(){
    $name = $_REQUEST['name'];
    $tel = $_REQUEST['tel'];
    $response = '';
    $thm  = 'Заказ звонка';
    $thm  = "=?utf-8?b?". base64_encode($thm) ."?=";
    $msg = "Имя: ".$name."<br/>
        Телефон: ".$tel ."<br/>";
    $mail_to = 'здесь адрес почты, на которую будет отправляться сообщение';
    $headers = "Content-Type: text/html; charset=utf-8\n";
    $headers .= 'From: имя отправителя' . "\r\n";

// Отправляем почтовое сообщение

    if(mail($mail_to, $thm, $msg, $headers)){
        $response = 'Сообщение отправлено';
    }else
        $response = 'Ошибка при отправке';

// Сообщение о результате отправки почты

    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_order', 'ajax_form' );
add_action('wp_ajax_ajax_order', 'ajax_form' );