Как автоматизировать обработку форм на WordPress с помощью AJAX и REST API

В современных проектах на WordPress часто возникает задача: сделать обработку форм максимально быстрой, интерактивной и при этом безопасной. В этой статье мы подробно разберем, как с помощью AJAX и REST API WordPress организовать асинхронную обработку форм без перезагрузки страницы. Такой подход улучшит пользовательский опыт и даст гибкость в работе с данными.

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

Традиционно формы в WordPress обрабатываются через отправку POST-запроса на сервер с перезагрузкой страницы. Это не всегда удобно и не соответствует современным требованиям UX. AJAX позволяет отправлять данные формы в фоновом режиме, не перезагружая страницу. REST API дает более гибкий и стандартизированный способ взаимодействия с сервером.

Использование AJAX в связке с REST API повышает безопасность, так как можно использовать nonce-проверки и аутентификацию. Кроме того, REST API облегчает создание универсальных и расширяемых интерфейсов для обработки данных.

Настройка REST API эндпоинта для обработки данных формы

Для начала создадим собственный REST API маршрут, который будет принимать данные формы и возвращать ответ.

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

function wpdirect_register_form_endpoint() {
    register_rest_route('wpdirect/v1', '/submit-form', array(
        'methods' => 'POST',
        'callback' => 'wpdirect_handle_form_submission',
        'permission_callback' => function () {
            return current_user_can('edit_posts'); // или true, если форма открыта всем
        },
    ));
}
add_action('rest_api_init', 'wpdirect_register_form_endpoint');

function wpdirect_handle_form_submission(WP_REST_Request $request) {
    $params = $request->get_json_params();

    // Пример валидации
    if (empty($params['user_name']) || empty($params['user_email'])) {
        return new WP_REST_Response(array('error' => 'Пожалуйста, заполните все обязательные поля'), 400);
    }

    // Здесь можно добавить вашу логику: сохранение в базу, отправка почты и т.д.

    return new WP_REST_Response(array('message' => 'Форма успешно отправлена'), 200);
}

В этом коде мы регистрируем маршрут /wpdirect/v1/submit-form, который принимает POST-запросы с JSON-данными. В функции-обработчике реализуем простую валидацию и возвращаем JSON-ответ.

Реализация AJAX-запроса на стороне клиента

Теперь настроим отправку формы с помощью AJAX на фронтенде. Предположим, у вас есть HTML-форма:

<form id="wpdirect-form">
    <input type="text" name="user_name" placeholder="Ваше имя" required>
    <input type="email" name="user_email" placeholder="Ваш email" required>
    <button type="submit">Отправить</button>
</form>
<div id="wpdirect-response"></div>

Добавим JavaScript, который будет ловить событие отправки формы и выполнять AJAX-запрос к REST API:

document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('wpdirect-form');
    const responseContainer = document.getElementById('wpdirect-response');

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

        const formData = {
            user_name: form.user_name.value.trim(),
            user_email: form.user_email.value.trim()
        };

        fetch('/wp-json/wpdirect/v1/submit-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) throw response;
            return response.json();
        })
        .then(data => {
            responseContainer.textContent = data.message;
            form.reset();
        })
        .catch(async err => {
            let errorText = 'Ошибка при отправке формы';
            if (err.json) {
                const errorData = await err.json();
                errorText = errorData.error || errorText;
            }
            responseContainer.textContent = errorText;
        });
    });
});

Этот скрипт отправляет JSON с данными формы на созданный нами REST API маршрут, получает ответ и выводит сообщение пользователю без перезагрузки страницы.

Добавление проверки безопасности с nonce

Чтобы защитить обработку формы от CSRF-атак, рекомендуется использовать nonce WordPress. Для этого в functions.php добавим локализацию скрипта с nonce и URL REST API:

function wpdirect_enqueue_scripts() {
    wp_enqueue_script('wpdirect-form-script', get_template_directory_uri() . '/js/wpdirect-form.js', array(), null, true);
    wp_localize_script('wpdirect-form-script', 'wpdirectData', array(
        'nonce' => wp_create_nonce('wp_rest'),
        'rest_url' => esc_url_raw(rest_url('wpdirect/v1/submit-form'))
    ));
}
add_action('wp_enqueue_scripts', 'wpdirect_enqueue_scripts');

В JavaScript подправим заголовки запроса, добавив nonce:

fetch(wpdirectData.rest_url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-WP-Nonce': wpdirectData.nonce
    },
    body: JSON.stringify(formData)
})

В PHP добавим проверку nonce в функцию-обработчик:

function wpdirect_handle_form_submission(WP_REST_Request $request) {
    $nonce = $request->get_header('X-WP-Nonce');
    if (!wp_verify_nonce($nonce, 'wp_rest')) {
        return new WP_REST_Response(array('error' => 'Ошибка безопасности: неверный nonce'), 403);
    }
    // остальной код обработки
}

Пример расширения: отправка письма с данными формы

В дополнение к сохранению данных можно реализовать отправку уведомления на почту администратора. Ниже пример, как это сделать в обработчике:

function wpdirect_handle_form_submission(WP_REST_Request $request) {
    $nonce = $request->get_header('X-WP-Nonce');
    if (!wp_verify_nonce($nonce, 'wp_rest')) {
        return new WP_REST_Response(array('error' => 'Ошибка безопасности: неверный nonce'), 403);
    }

    $params = $request->get_json_params();
    if (empty($params['user_name']) || empty($params['user_email'])) {
        return new WP_REST_Response(array('error' => 'Пожалуйста, заполните все обязательные поля'), 400);
    }

    $to = get_option('admin_email');
    $subject = 'Новая заявка с формы на сайте';
    $message = "Имя: " . sanitize_text_field($params['user_name']) . "\nEmail: " . sanitize_email($params['user_email']);
    wp_mail($to, $subject, $message);

    return new WP_REST_Response(array('message' => 'Форма успешно отправлена'), 200);
}

Полезные плагины для работы с формами и REST API

Если вы хотите расширить функциональность или сделать реализацию проще, обратите внимание на следующие плагины:

• Clearfy Pro — помогает оптимизировать и обезопасить WordPress, включая работу с AJAX и REST API.
• WPRemark — плагин для расширенного управления комментариями, может быть полезен при создании кастомных форм.
• My Popup — для создания всплывающих окон с формами, которые можно интегрировать с AJAX-обработкой.

Все эти решения можно найти на WPSHOP.RU.

Итог: преимущества использования AJAX и REST API для форм на WordPress

Использование AJAX вместе с REST API позволяет сделать работу с формами более интерактивной и удобной для пользователей. Вы получаете:

• Асинхронную отправку без перезагрузки страницы
• Удобную валидацию и обработку ошибок
• Безопасность за счет nonce и прав доступа
• Гибкость и расширяемость за счет стандартизированного API

Надеемся, что этот пример поможет вам автоматизировать обработку форм на ваших проектах WordPress быстро и надежно.