Динамические методы отправки данных из форм WPForms на сервер без перезагрузки страницы

Автор: Константин Крылов | Опубликовано: 12.12.2025

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

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

Основные причины внедрения AJAX-отправки:

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

WPForms из коробки не предоставляет полноценного AJAX API для отправки данных, кроме встроенного AJAX для некоторых типов форм, но часто его недостаточно или он конфликтует с кастомными сценариями. Поэтому мы рассмотрим, как написать свой собственный AJAX-обработчик.

Подготовка: подключение скриптов и локализация

Для начала нужно подключить JavaScript файл, который будет перехватывать отправку формы и посылать данные через AJAX. В файле темы functions.php добавим регистрацию и подключение скрипта с передачей URL для AJAX-запроса:

function wpformsru_enqueue_ajax_script() {
    wp_enqueue_script('wpformsru-ajax', get_template_directory_uri() . '/js/wpformsru-ajax.js', array('jquery'), '1.0', true);

    wp_localize_script('wpformsru-ajax', 'wpformsru_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpformsru_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpformsru_enqueue_ajax_script');

В этом коде мы создаем объект wpformsru_ajax_obj, содержащий URL для AJAX-запросов и nonce для безопасности.

JavaScript: перехват отправки формы и отправка данных через AJAX

Теперь создадим файл js/wpformsru-ajax.js с кодом, который будет перехватывать событие отправки формы WPForms и передавать данные на сервер:

jQuery(document).ready(function($) {
    $(document).on('submit', 'form.wpforms-form', function(e) {
        e.preventDefault();
        var form = $(this);

        // Собираем данные формы
        var formData = form.serialize();

        // Добавляем nonce
        formData += '&security=' + wpformsru_ajax_obj.nonce;

        $.ajax({
            url: wpformsru_ajax_obj.ajax_url,
            type: 'POST',
            data: formData + '&action=wpformsru_ajax_submit',
            dataType: 'json',
            beforeSend: function() {
                form.find('button[type="submit"]').attr('disabled', true);
            },
            success: function(response) {
                if (response.success) {
                    form.trigger('wpformsru_success');
                    form[0].reset();
                    alert('Форма успешно отправлена!');
                } else {
                    alert('Ошибка: ' + response.data);
                }
            },
            error: function(xhr, status, error) {
                alert('Произошла ошибка при отправке формы. Попробуйте позже.');
            },
            complete: function() {
                form.find('button[type="submit"]').attr('disabled', false);
            }
        });
    });
});

Объяснение:

Перехватываем стандартное событие отправки формы, чтобы предотвратить перезагрузку страницы.
Собираем данные формы в строку URL-кодированной формы.
Добавляем nonce для защиты.
Отправляем данные методом POST на admin-ajax.php с параметром action=wpformsru_ajax_submit.
Обрабатываем ответ и выводим уведомления.

PHP: обработка AJAX-запроса на стороне сервера

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

function wpformsru_handle_ajax_submit() {
    check_ajax_referer('wpformsru_nonce', 'security');

    if (empty($_POST['wpforms']['id'])) {
        wp_send_json_error('ID формы не передан');
    }

    $form_id = intval($_POST['wpforms']['id']);

    // Подключаем класс WPForms
    if (!class_exists('WPForms')) {
        wp_send_json_error('Плагин WPForms не активен');
    }

    // Используем стандартный метод WPForms для обработки отправки
    // Создаем объект формы
    $form = wpforms()->form->get($form_id);
    if (empty($form)) {
        wp_send_json_error('Форма не найдена');
    }

    // Обрабатываем данные через WPForms
    $process = wpforms()->process;
    $result = $process->submit($_POST);

    if ($result['success']) {
        wp_send_json_success();
    } else {
        wp_send_json_error(implode('; ', $result['errors']));
    }
}
add_action('wp_ajax_wpformsru_ajax_submit', 'wpformsru_handle_ajax_submit');
add_action('wp_ajax_nopriv_wpformsru_ajax_submit', 'wpformsru_handle_ajax_submit');

Объяснение:

Проверяем nonce для безопасности.
Проверяем, что пришел ID формы.
Получаем объект формы WPForms.
Используем стандартный метод submit WPForms для обработки данных, чтобы сохранить отправку и вызвать все хуки.
Возвращаем JSON-ответ с результатом.

Дополнительные советы и обработка ошибок

При реализации AJAX-отправки следует учесть несколько важных моментов:

Обработка ошибок валидации должна быть максимально информативной. Можно расширить JS-код для вывода ошибок рядом с полями.
Если на сайте есть кэширование, убедитесь, что AJAX-запросы не кэшируются, иначе данные не будут обновляться.
Для многоэтапных форм WPForms потребуется дополнительная логика сохранения состояния между шагами.
При необходимости можно интегрировать уведомления через wp_mail или сторонние сервисы прямо из PHP-обработчика.

Пример расширения: динамическое добавление пользовательских данных перед отправкой

Допустим, нужно добавить в отправляемые данные дополнительное поле, которое не отображается в форме, например, ID пользователя или метку сессии. В JS это делается так:

var extraData = 'user_id=12345&session_token=abcde';
formData += '&' + extraData;

В PHP эти данные будут доступны в $_POST и их можно обработать или сохранить вместе с формой.

Заключение

Реализация динамической отправки форм WPForms через AJAX требует подключения собственного JS и написания серверного обработчика. Такой подход значительно улучшает UX, делает формы более интерактивными и расширяет возможности кастомизации. Используя приведенный пример кода и рекомендации, вы сможете быстро внедрить AJAX-отправку на своем сайте с WPForms.

Если хотите использовать готовые расширения с удобным интерфейсом и дополнительными функциями, обратите внимание на решения из WPSHOP.ru.