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

Автор: Вера Крылова | Опубликовано: 05.04.2026

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

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

REST API — это современный способ взаимодействия с данными WordPress, который позволяет создавать динамичные и интерактивные приложения. Применение REST API при создании форм даёт несколько важных преимуществ:

Асинхронная отправка и получение данных без перезагрузки страницы;
Гибкость в обработке и валидации данных на сервере;
Возможность интеграции с фронтенд-фреймворками (React, Vue, Angular);
Безопасность благодаря nonce и аутентификации;
Универсальность: REST API позволяет работать с кастомными типами записей, таксономиями, метаданными.

Эти возможности делают REST API оптимальным выбором для динамических форм в современных проектах на WordPress.

Создание собственного REST API эндпоинта для обработки форм

Первый шаг — зарегистрировать свой REST API маршрут, который будет принимать данные формы и сохранять их. Ниже пример кода, который можно добавить в файл functions.php вашей темы или в отдельный плагин:

add_action('rest_api_init', function () {
    register_rest_route('wp1/v1', '/submit-form', [
        'methods' => 'POST',
        'callback' => 'wp1_handle_form_submission',
        'permission_callback' => function () {
            return current_user_can('edit_posts'); // Проверка прав пользователя
        },
    ]);
});

function wp1_handle_form_submission(WP_REST_Request $request) {
    $params = $request->get_json_params();
    // Валидация данных
    if (empty($params['name']) || empty($params['email'])) {
        return new WP_REST_Response(['error' => 'Необходимо указать имя и email'], 400);
    }
    // Пример сохранения данных в пользовательские мета
    $user_id = get_current_user_id();
    update_user_meta($user_id, 'wp1_form_name', sanitize_text_field($params['name']));
    update_user_meta($user_id, 'wp1_form_email', sanitize_email($params['email']));
    return ['success' => true, 'message' => 'Данные успешно сохранены'];
}

В этом примере мы создаём маршрут /wp1/v1/submit-form, который принимает POST-запрос с JSON-данными. Функция wp1_handle_form_submission валидирует данные и сохраняет их в мета пользователя.

Пояснения к коду REST API

Важно контролировать права доступа через permission_callback, чтобы защитить эндпоинт от неавторизованных запросов. Для публичных форм можно изменить логику или добавить nonce-проверку.

Валидация и очистка данных обязательна, чтобы избежать инъекций и ошибок.

Создание фронтенд-формы с AJAX запросом к REST API

Теперь создадим простую HTML-форму и добавим JavaScript для отправки данных на наш REST API маршрут без перезагрузки страницы.

<form id="wp1-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="wp1-form-response"></div>

<script>
document.getElementById('wp1-dynamic-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const data = {
    name: this.name.value.trim(),
    email: this.email.value.trim()
  };

  fetch('/wp-json/wp1/v1/submit-form', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-WP-Nonce': wpApiSettings.nonce
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    const responseDiv = document.getElementById('wp1-form-response');
    if (result.success) {
      responseDiv.textContent = result.message;
      this.reset();
    } else {
      responseDiv.textContent = result.error || 'Произошла ошибка';
    }
  })
  .catch(() => {
    document.getElementById('wp1-form-response').textContent = 'Ошибка сети';
  });
});
</script>

Не забудьте добавить локализацию скрипта с передачей wpApiSettings.nonce через wp_localize_script в PHP, чтобы обеспечить безопасность запросов.

Локализация скрипта для nonce

function wp1_enqueue_scripts() {
    wp_enqueue_script('wp1-form-script', get_template_directory_uri() . '/js/wp1-form.js', ['wp-api'], null, true);
    wp_localize_script('wp1-form-script', 'wpApiSettings', [
        'nonce' => wp_create_nonce('wp_rest')
    ]);
}
add_action('wp_enqueue_scripts', 'wp1_enqueue_scripts');

Использование плагинов для расширения функционала форм

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

Contact Form 7 — популярный плагин форм, который можно расширить через REST API с помощью дополнительного плагина Contact Form 7 REST API;
Fluent Forms — современный плагин с визуальным конструктором и поддержкой API;
Gravity Forms — мощный плагин для сложных форм с возможностью работы с REST API через расширения.

Для интеграции с WPShop можно рассмотреть плагин WPRemark, если требуется собирать отзывы через динамичные формы.

Обработка ошибок и валидация данных на стороне сервера

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

Проверку формата email через is_email();
Ограничения по длине и символам для текстовых полей;
Проверку наличия обязательных полей;
Антиспам защиту (например, Google reCAPTCHA или собственные механизмы).

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

Организация хранения данных форм

В зависимости от задачи можно хранить данные, полученные через REST API, разными способами:

В пользовательских мета (как в примере выше) — удобно для персональных данных;
В пользовательских типах записей (Custom Post Types) — если нужно вести учёт заявок или обращений;
В отдельных таблицах базы данных — для сложных структур и высокой нагрузки.

Рассмотрим пример создания CPT для заявок и сохранения данных формы туда:

add_action('init', function() {
    register_post_type('wp1_lead', [
        'labels' => [
            'name' => 'Заявки',
            'singular_name' => 'Заявка'
        ],
        'public' => false,
        'show_ui' => true,
        'supports' => ['title', 'custom-fields'],
    ]);
});

function wp1_handle_form_submission(WP_REST_Request $request) {
    $params = $request->get_json_params();
    if (empty($params['name']) || empty($params['email'])) {
        return new WP_REST_Response(['error' => 'Необходимо указать имя и email'], 400);
    }

    $post_id = wp_insert_post([
        'post_type' => 'wp1_lead',
        'post_title' => sanitize_text_field($params['name']),
        'post_status' => 'publish'
    ]);

    if (is_wp_error($post_id)) {
        return new WP_REST_Response(['error' => 'Ошибка при сохранении заявки'], 500);
    }

    update_post_meta($post_id, 'email', sanitize_email($params['email']));

    return ['success' => true, 'message' => 'Заявка успешно сохранена'];
}

Такой подход позволяет удобно управлять заявками из админки WordPress.

Вывод динамических форм с помощью шорткода

Чтобы разместить форму на любой странице сайта, можно обернуть HTML и JS в шорткод:

function wp1_dynamic_form_shortcode() {
    ob_start();
    ?>
    <form id="wp1-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="wp1-form-response"></div>
    <script>
    // JS код из примера выше
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wp1_dynamic_form', 'wp1_dynamic_form_shortcode');

Теперь достаточно вставить [wp1_dynamic_form] в контент страницы, и форма отобразится с нужной логикой.

Заключение по теме

Создание динамических форм с помощью REST API в WordPress — мощное решение для интерактивных сайтов. Оно позволяет разделить фронтенд и бэкенд, повысить UX и гибко управлять данными. Используйте приведённые примеры кода и рекомендации для реализации собственных проектов.

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