Как создать динамические формы в WordPress с помощью AJAX и REST API

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

Что такое AJAX и REST API в WordPress и зачем они нужны для динамических форм

AJAX (Asynchronous JavaScript and XML) — технология, которая позволяет обмениваться данными с сервером в фоновом режиме без перезагрузки страницы. В контексте WordPress AJAX обычно используется для отправки данных формы и получения ответа.

REST API — это современный способ взаимодействия с WordPress через HTTP-запросы, который позволяет создавать, читать, обновлять и удалять данные, используя стандартизированные маршруты.

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

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

Почему не использовать только admin-ajax.php для обработки форм

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

Создание REST API endpoint для обработки данных формы

Первый шаг — зарегистрировать собственный REST API endpoint, который будет принимать POST-запросы с данными формы.

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

add_action('rest_api_init', function () {
    register_rest_route('wpquery/v1', '/submit-form', array(
        'methods' => 'POST',
        'callback' => 'wpquery_handle_form_submit',
        'permission_callback' => '__return_true',
    ));
});

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

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

    // Дополнительная валидация email
    if (!filter_var($params['email'], FILTER_VALIDATE_EMAIL)) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'Неверный формат email.'
        ), 400);
    }

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

    // Для демонстрации — просто возвращаем успех
    return new WP_REST_Response(array(
        'success' => true,
        'message' => 'Форма успешно отправлена!'
    ), 200);
}

В этом коде мы создаём маршрут /wp-json/wpquery/v1/submit-form, который принимает POST запросы с параметрами name и email, проверяет их и возвращает JSON-ответ.

Создание фронтенд-формы и JavaScript для отправки данных через AJAX

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

Пример формы:

<form id="wpquery-dynamic-form">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Отправить</button>
</form>
<div id="wpquery-form-response"></div>

JavaScript для отправки:

document.getElementById('wpquery-dynamic-form').addEventListener('submit', function(e) {
    e.preventDefault();

    const name = document.getElementById('name').value.trim();
    const email = document.getElementById('email').value.trim();
    const responseContainer = document.getElementById('wpquery-form-response');

    fetch('/wp-json/wpquery/v1/submit-form', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: name, email: email })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            responseContainer.textContent = data.message;
            responseContainer.style.color = 'green';
            document.getElementById('wpquery-dynamic-form').reset();
        } else {
            responseContainer.textContent = data.message;
            responseContainer.style.color = 'red';
        }
    })
    .catch(error => {
        responseContainer.textContent = 'Ошибка отправки формы. Попробуйте позже.';
        responseContainer.style.color = 'red';
        console.error(error);
    });
});

Этот скрипт перехватывает отправку формы, собирает данные и отправляет их на созданный нами REST API endpoint. В ответе выводится сообщение об успехе или ошибке.

Обработка безопасности и защита от спама

Для защиты формы от CSRF и спама рекомендуется добавить nonce и проверку на сервере.

Добавим nonce в форму через PHP:

<?php wp_nonce_field('wpquery_form_nonce_action', 'wpquery_form_nonce_field'); ?>

И передадим nonce в AJAX-запрос:

const nonce = document.querySelector('input[name="wpquery_form_nonce_field"]').value;

fetch('/wp-json/wpquery/v1/submit-form', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-WP-Nonce': nonce
    },
    body: JSON.stringify({ name: name, email: email })
})

На сервере добавим проверку nonce в колбэк:

function wpquery_handle_form_submit(WP_REST_Request $request) {
    $nonce = $request->get_header('X-WP-Nonce');
    if (!wp_verify_nonce($nonce, 'wpquery_form_nonce_action')) {
        return new WP_REST_Response(array(
            'success' => false,
            'message' => 'Ошибка безопасности. Неверный nonce.'
        ), 403);
    }
    // Далее валидация и обработка данных
}

Также можно использовать плагины для защиты от спама, например, Clearfy Pro, который добавляет расширенные антиспам-функции и ускоряет работу сайта.

Дополнительные возможности: интеграция с плагинами и сохранение данных

После создания базовой формы можно расширить функционал:

• Сохранять данные в кастомные таблицы или посты, используя функции WordPress.
• Отправлять уведомления на email с помощью wp_mail().
• Интегрировать с плагинами, например, для сбора лидов или CRM.
• Добавить валидацию на стороне клиента и сервера для улучшения UX и безопасности.

Пример сохранения данных в пост типа "lead":

function wpquery_save_lead($name, $email) {
    $post_data = array(
        'post_title' => sanitize_text_field($name),
        'post_type' => 'lead',
        'post_status' => 'publish',
        'meta_input' => array(
            'email' => sanitize_email($email)
        )
    );
    return wp_insert_post($post_data);
}

Вызывайте эту функцию внутри обработчика REST API после успешной валидации.

Заключение по созданию динамических форм в WordPress

Использование AJAX и REST API для создания динамических форм в WordPress делает взаимодействие пользователя с сайтом плавным и современным. Такой подход позволяет повысить удобство, улучшить безопасность и расширить функциональность. В статье приведён полный пример создания REST endpoint, фронтенд-формы и JavaScript для отправки данных. Также рассмотрены способы защиты и расширения возможностей.