WPForms: отправка формы через REST API без перезагрузки страницы

Автор: Алексей Борисов | Опубликовано: 02.06.2026

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

WPForms по умолчанию отправляет формы через стандартный POST-запрос с перезагрузкой страницы. Для улучшения UX и интеграций часто требуется отправлять данные формы асинхронно через REST API WordPress без перезагрузки. В статье разберём, как реализовать такую отправку на примере WPForms, не используя сторонние плагины и не ломая стандартную функциональность.

Диагностика текущей реализации отправки формы

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

Откройте форму WPForms на странице сайта.
Отправьте тестовый запрос и посмотрите, происходит ли перезагрузка страницы.
Включите консоль браузера (F12) и вкладку Network — проверьте тип запроса, статус и ответ.
Если запрос отправляется методом POST с перезагрузкой — стандартная отправка.

Если хотите использовать REST API для отправки формы, нужно зарегистрировать свой endpoint и перехватить отправку на фронтенде через JavaScript.

Пошаговое решение: отправка WPForms через REST API

1. Создаём REST API endpoint для приёма данных формы

Добавьте следующий код в файл темы functions.php или в свой плагин:

add_action('rest_api_init', function () {
    register_rest_route('custom-wpforms/v1', '/submit', [
        'methods' => 'POST',
        'callback' => 'custom_wpforms_submit_handler',
        'permission_callback' => '__return_true',
    ]);
});

function custom_wpforms_submit_handler(WP_REST_Request $request) {
    $params = $request->get_json_params();
    if (empty($params['form_id']) || empty($params['fields'])) {
        return new WP_REST_Response(['error' => 'Missing form_id or fields'], 400);
    }

    $form_id = intval($params['form_id']);
    $fields = $params['fields'];

    // Подключаем WPForms API
    if (!class_exists('WPForms')) {
        return new WP_REST_Response(['error' => 'WPForms plugin not active'], 500);
    }

    // Создаём объект формы
    $form = new WPForms_Form($form_id);
    if (!$form) {
        return new WP_REST_Response(['error' => 'Form not found'], 404);
    }

    // Формируем данные для отправки в WPForms
    $entry_data = [];
    foreach ($fields as $field_id => $value) {
        $entry_data[$field_id] = sanitize_text_field($value);
    }

    // Сохраняем отправку в базе WPForms
    $entry_id = wpforms()->entry->add($form_id, $entry_data);
    if (!$entry_id) {
        return new WP_REST_Response(['error' => 'Failed to save entry'], 500);
    }

    // Можно добавить дополнительные действия, например, отправку email

    return new WP_REST_Response(['success' => true, 'entry_id' => $entry_id], 200);
}

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

В файле темы или плагина добавьте скрипт:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.wpforms-form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const formId = form.getAttribute('data-formid');
        if (!formId) {
            console.error('Form ID not found');
            return;
        }

        // Собираем данные полей
        const fields = {};
        form.querySelectorAll('input, select, textarea').forEach(function(input) {
            if (!input.name) return;
            fields[input.name] = input.value;
        });

        fetch('/wp-json/custom-wpforms/v1/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                form_id: formId,
                fields: fields
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Форма успешно отправлена!');
                form.reset();
            } else {
                alert('Ошибка: ' + (data.error || 'Неизвестная ошибка'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Ошибка отправки формы');
        });
    });
});

Проверка результата после внедрения

Обновите страницу с формой.
Откройте консоль браузера (F12) и перейдите в Network.
Отправьте форму — должна появиться AJAX-запрос на /wp-json/custom-wpforms/v1/submit с кодом 200.
В ответе будет {"success":true,...}.
Страница не должна перезагружаться, поля очищаются.
Проверьте в админке WPForms, что новая запись появилась.

Частые ошибки и как их исправить

Форма не отправляется, ошибка 404 REST API: проверьте, что REST API включён и endpoint зарегистрирован корректно.
Ошибка «Form not found»: убедитесь, что передаете правильный ID формы в data-formid.
Данные не сохраняются: проверьте права доступа, что WPForms активен и wpforms()->entry->add() доступен.
JavaScript не работает: убедитесь, что скрипт подключён и форма имеет класс wpforms-form и атрибут data-formid.

Практические советы по безопасности и производительности

Обязательно используйте sanitize_text_field или другие функции для очистки данных на сервере.
Добавьте nonce проверки и permission_callback для REST API, если форма не публичная.
Кэширование страницы с формой отключите или настройте исключения по REST API.
Для больших форм используйте дебаунсинг отправки в JS, чтобы избежать нескольких запросов.

Сравнение вариантов реализации отправки формы без перезагрузки

Метод	Плюсы	Минусы
Использование плагина AJAX для WPForms	Простая установка, минимальный код	Меньше контроля, возможны конфликты
Кастомная отправка через REST API (наш вариант)	Полный контроль, расширяемость, интеграции	Требует разработки, отладки
Отправка через стандартный AJAX WPForms	Использует встроенные хуки WPForms	Ограничена функционалом плагина

Отправка формы через REST API без перезагрузки страницы