Создать динамические формы в WordPress на AJAX без плагинов

Зачем нужны динамические формы в WordPress и преимущества AJAX

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

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

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

Создание простой формы с AJAX: структура и HTML

Для начала создадим простую форму с полями "Имя" и "Email" и кнопкой отправки. Важный момент — подключим JavaScript для работы с AJAX.

<form id="wpma-ajax-form">
  <label for="wpma-name">Имя:</label>
  <input type="text" id="wpma-name" name="wpma_name" required>

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

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

Добавим JavaScript (jQuery) для перехвата отправки формы и отправки AJAX-запроса:

jQuery(document).ready(function($) {
  $('#wpma-ajax-form').on('submit', function(e) {
    e.preventDefault();

    var data = {
      action: 'wpma_submit_form',
      wpma_name: $('#wpma-name').val(),
      wpma_email: $('#wpma-email').val(),
      security: wpma_ajax_object.nonce
    };

    $.post(wpma_ajax_object.ajax_url, data, function(response) {
      $('#wpma-form-response').html(response.data.message);
    });
  });
});

Регистрация AJAX обработчика в WordPress и безопасность

Чтобы WordPress обработал AJAX-запрос, необходимо зарегистрировать обработчики в functions.php или в своем плагине. Мы используем два хука: для авторизованных пользователей и для гостей.

add_action('wp_enqueue_scripts', 'wpma_enqueue_scripts');
function wpma_enqueue_scripts() {
  wp_enqueue_script('jquery');
  wp_enqueue_script('wpma-ajax-script', get_template_directory_uri() . '/js/wpma-ajax.js', array('jquery'), null, true);
  wp_localize_script('wpma-ajax-script', 'wpma_ajax_object', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpma-ajax-nonce')
  ));
}

add_action('wp_ajax_wpma_submit_form', 'wpma_handle_form');
add_action('wp_ajax_nopriv_wpma_submit_form', 'wpma_handle_form');

function wpma_handle_form() {
  check_ajax_referer('wpma-ajax-nonce', 'security');

  $name = isset($_POST['wpma_name']) ? sanitize_text_field($_POST['wpma_name']) : '';
  $email = isset($_POST['wpma_email']) ? sanitize_email($_POST['wpma_email']) : '';

  if (empty($name) || empty($email) || !is_email($email)) {
    wp_send_json_error(array('message' => 'Пожалуйста, заполните все поля корректно.'));
  }

  // Здесь можно добавить логику сохранения данных или отправки email

  wp_send_json_success(array('message' => 'Спасибо, ' . esc_html($name) . '! Ваша форма успешно отправлена.'));
}

В этом коде мы подключаем скрипт с AJAX, передаем URL и nonce для безопасности, а также создаем обработчик, который проверяет nonce, валидирует данные и отвечает JSON.

Расширение формы: добавление динамического контента и валидация

Динамические формы часто требуют подгрузки данных с сервера, например, списков городов, категорий или дополнительных полей, которые меняются в зависимости от выбора пользователя.

Для примера добавим поле "Город", который будет подгружаться через AJAX после ввода имени.

jQuery(document).ready(function($) {
  $('#wpma-name').on('blur', function() {
    var nameVal = $(this).val();
    if(nameVal.length > 2) {
      $.post(wpma_ajax_object.ajax_url, {
        action: 'wpma_get_cities',
        name: nameVal,
        security: wpma_ajax_object.nonce
      }, function(response) {
        if(response.success) {
          var select = '<select id="wpma-city" name="wpma_city">';
          $.each(response.data.cities, function(i, city) {
            select += '<option value="'+city+'">'+city+'</option>';
          });
          select += '</select>';
          $('#wpma-city-container').html(select);
        }
      });
    }
  });
});

И добавим в HTML контейнер для города:

<div id="wpma-city-container"></div>

Теперь создадим серверный обработчик:

add_action('wp_ajax_wpma_get_cities', 'wpma_get_cities_callback');
add_action('wp_ajax_nopriv_wpma_get_cities', 'wpma_get_cities_callback');

function wpma_get_cities_callback() {
  check_ajax_referer('wpma-ajax-nonce', 'security');

  $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';

  // Пример списка городов, можно заменить на реальный запрос к базе
  $all_cities = array('Москва', 'Санкт-Петербург', 'Новосибирск', 'Екатеринбург', 'Казань');
  $filtered = array_filter($all_cities, function($city) use ($name) {
    return mb_stripos($city, $name) !== false;
  });

  if (empty($filtered)) {
    wp_send_json_error(array('message' => 'Города не найдены.'));
  }

  wp_send_json_success(array('cities' => array_values($filtered)));
}

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

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

• Всегда проверяйте nonce — это защитит от CSRF атак.
• Валидируйте и фильтруйте все входящие данные с помощью sanitize_text_field, sanitize_email и других функций WordPress.
• Обрабатывайте ошибки и возвращайте понятные пользователю сообщения.
• Если форма используется часто, кешируйте данные, которые подгружаете динамически (например, списки городов) чтобы уменьшить нагрузку на сервер.
• Используйте wp_localize_script для передачи динамических данных в JS.

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

Пример интеграции с плагином Clearfy Pro для оптимизации и безопасности

Если на сайте установлен плагин Clearfy Pro, он поможет дополнительно обезопасить AJAX-запросы и оптимизировать работу сайта. Clearfy Pro умеет добавлять контроль доступа для AJAX, отключать неиспользуемые скрипты и тем самым снижать нагрузку.

Рекомендуется использовать Clearfy для контроля прав пользователей, чтобы только нужные роли имели доступ к обработчикам AJAX, например:

if (!current_user_can('edit_posts')) {
  wp_send_json_error(['message' => 'Недостаточно прав']);
}

Это повысит безопасность и снизит риски взлома.

Итоги и рекомендации

Создание динамических форм в WordPress на AJAX без плагинов — задача вполне выполнимая и полезная для кастомных проектов. Используя примеры из статьи, вы сможете реализовать быстрые, удобные формы с валидированной обработкой, подгрузкой динамического контента и хорошей безопасностью.

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