Как изменить метод отправки формы в WordPress на AJAX без плагинов

В WordPress часто используются формы для сбора данных от пользователей — контактные, подписочные, регистрационные. По умолчанию форма отправляется стандартным HTTP-запросом, что приводит к перезагрузке страницы. В современных веб-приложениях намного удобнее использовать AJAX для отправки формы без перезагрузки, улучшая пользовательский опыт. В этой статье подробно рассмотрим, как на WordPress изменить метод отправки формы на AJAX без использования сторонних плагинов.

Почему стоит использовать AJAX для отправки форм в WordPress

AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы на сервер в фоне и обновлять страницу без перезагрузки. Для форм это означает:

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

Использование AJAX делает сайт современным и удобным.

Создаем кастомную форму с AJAX отправкой в WordPress

Рассмотрим пример простой формы обратной связи с полями имени и email.

1. Добавляем HTML форму в шаблон или через шорткод

Для удобства создадим функцию-шорткод, чтобы вставлять форму в записи и страницы.

function wpabout_custom_ajax_form() {
    ob_start();
    ?>
    <form id="wpabout-contact-form" method="post">
        <p>
            <label for="name">Имя:</label><br />
            <input type="text" id="name" name="name" required />
        </p>
        <p>
            <label for="email">Email:</label><br />
            <input type="email" id="email" name="email" required />
        </p>
        <p>
            <input type="submit" value="Отправить" />
        </p>
        <div id="wpabout-form-message"></div>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpabout_ajax_form', 'wpabout_custom_ajax_form');

Теперь в любом месте сайта можно вставить [wpabout_ajax_form] и увидеть форму.

2. Добавляем JavaScript для отправки формы через AJAX

Подключим скрипт, который перехватит стандартную отправку и сделает AJAX-запрос.

function wpabout_enqueue_ajax_script() {
    wp_enqueue_script('wpabout-ajax-form', get_stylesheet_directory_uri() . '/js/wpabout-ajax-form.js', array('jquery'), null, true);
    wp_localize_script('wpabout-ajax-form', 'wpabout_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpabout_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpabout_enqueue_ajax_script');

В файле wpabout-ajax-form.js пишем следующий код:

jQuery(document).ready(function($) {
    $('#wpabout-contact-form').on('submit', function(e) {
        e.preventDefault();
        var data = {
            action: 'wpabout_submit_form',
            nonce: wpabout_ajax_obj.nonce,
            name: $('#name').val(),
            email: $('#email').val()
        };
        $.post(wpabout_ajax_obj.ajax_url, data, function(response) {
            $('#wpabout-form-message').html(response.data.message);
            if(response.success) {
                $('#wpabout-contact-form')[0].reset();
            }
        });
    });
});

3. Обрабатываем AJAX запрос в functions.php

Создаем функцию, которая проверит nonce, валидацию и отправит ответ.

function wpabout_handle_ajax_form() {
    check_ajax_referer('wpabout_ajax_nonce', 'nonce');

    $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
    $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

    if(empty($name) || empty($email)) {
        wp_send_json_error(array('message' => 'Пожалуйста, заполните все поля.'));
    }

    if(!is_email($email)) {
        wp_send_json_error(array('message' => 'Введите корректный email.'));
    }

    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта';
    $message = 'Имя: ' . $name . "\r\n" . 'Email: ' . $email;
    $headers = array('Content-Type: text/plain; charset=UTF-8');

    $mail_sent = wp_mail($to, $subject, $message, $headers);

    if($mail_sent) {
        wp_send_json_success(array('message' => 'Спасибо за ваше сообщение!'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка отправки. Попробуйте позже.'));
    }
}
add_action('wp_ajax_wpabout_submit_form', 'wpabout_handle_ajax_form');
add_action('wp_ajax_nopriv_wpabout_submit_form', 'wpabout_handle_ajax_form');

Отладка и расширение функционала AJAX формы

Обработка ошибок и UX

Реализуйте показ спиннера загрузки, блокировку кнопки отправки и более информативные сообщения. Можно добавить проверку на спам с помощью Google reCAPTCHA или плагина Clearfy Pro, который улучшит безопасность сайта и защитит форму от ботов.

Использование плагинов для расширения

Если в будущем понадобится более мощный функционал — например, создание многошаговых форм или интеграция с CRM, рассмотрите плагины как WPRemark или My Popup.

Безопасность AJAX форм

Всегда проверяйте nonce и валидируйте данные на сервере. Никогда не доверяйте данным, пришедшим с клиента. Это предотвратит атаки CSRF и инъекции.

Выводы по изменению метода отправки формы на AJAX

Мы рассмотрели создание кастомной формы с отправкой через AJAX без плагинов с полным примером кода для вставки в тему или плагин. Такой подход дает гибкость и контроль над процессом. При необходимости подключайте дополнительные инструменты из экосистемы WordPress и WPSHOP для расширения возможностей.