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

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

Почему стоит использовать AJAX в формах WordPress

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

Основные преимущества AJAX в формах:

• Улучшенный UX — мгновенная обратная связь.
• Снижение нагрузки на сервер — не перезагружается вся страница.
• Гибкость — можно добавлять кастомную логику валидации и обработки.

Рассмотрим, как реализовать такую форму самостоятельно, без плагинов.

Подготовка: создание простой HTML-формы

Начнём с создания базовой контактной формы. Добавим её, например, в шаблон темы или в шорткод.

<form id="cyrtolat-contact-form" method="post">
  <label for="name">Имя:</label>
  <input type="text" name="name" id="name" required />

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

  <label for="message">Сообщение:</label>
  <textarea name="message" id="message" required></textarea>

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

Форма содержит три обязательных поля: имя, email и сообщение. Блок cyrtolat-response будет использоваться для вывода сообщений пользователю.

Подключение JavaScript для AJAX-запроса

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

Добавим в functions.php следующий код:

function cyrtolat_enqueue_scripts() {
    wp_enqueue_script('cyrtolat-ajax-form', get_template_directory_uri() . '/js/cyrtolat-ajax-form.js', array('jquery'), null, true);
    wp_localize_script('cyrtolat-ajax-form', 'cyrtolat_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('cyrtolat_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'cyrtolat_enqueue_scripts');

Далее создадим файл js/cyrtolat-ajax-form.js с содержимым:

jQuery(document).ready(function($) {
  $('#cyrtolat-contact-form').on('submit', function(e) {
    e.preventDefault();
    var data = {
      action: 'cyrtolat_handle_form',
      nonce: cyrtolat_ajax_object.nonce,
      name: $('#name').val(),
      email: $('#email').val(),
      message: $('#message').val()
    };

    $('#cyrtolat-response').html('Отправка...');

    $.post(cyrtolat_ajax_object.ajax_url, data, function(response) {
      if(response.success) {
        $('#cyrtolat-response').html('<span style="color:green;">' + response.data.message + '</span>');
        $('#cyrtolat-contact-form')[0].reset();
      } else {
        $('#cyrtolat-response').html('<span style="color:red;">' + response.data.message + '</span>');
      }
    });
  });
});

В этом коде мы собираем данные из формы, отправляем POST-запрос на admin-ajax.php с указанием action и nonce для безопасности. При получении ответа показываем сообщение и очищаем форму при успехе.

Обработка AJAX-запроса в WordPress

Теперь создадим серверную функцию, которая будет обрабатывать запрос и выполнять валидацию. Добавим в functions.php:

function cyrtolat_handle_form() {
    check_ajax_referer('cyrtolat_ajax_nonce', 'nonce');

    $name = sanitize_text_field($_POST['name'] ?? '');
    $email = sanitize_email($_POST['email'] ?? '');
    $message = sanitize_textarea_field($_POST['message'] ?? '');

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

    if(!is_email($email)) {
        wp_send_json_error(array('message' => 'Введите корректный email.'));
    }

    // Здесь можно добавить логику отправки письма или сохранения в базу
    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта';
    $body = "Имя: $name\nEmail: $email\nСообщение: $message";
    $headers = array('Content-Type: text/plain; charset=UTF-8');

    $mail_sent = wp_mail($to, $subject, $body, $headers);

    if($mail_sent) {
        wp_send_json_success(array('message' => 'Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка при отправке сообщения. Попробуйте позже.'));
    }

    wp_die();
}
add_action('wp_ajax_cyrtolat_handle_form', 'cyrtolat_handle_form');
add_action('wp_ajax_nopriv_cyrtolat_handle_form', 'cyrtolat_handle_form');

Объяснение:

• Проверяем nonce для безопасности.
• Санитизируем и валидируем данные.
• Отправляем письмо на email администратора.
• Возвращаем JSON-ответ с результатом.

Расширение: добавление загрузки файлов с AJAX

Если вам нужно добавить загрузку файлов в форму с AJAX, то понадобится использовать объект FormData и немного изменить JS и PHP-код.

В JS вместо формирования объекта с простыми полями:

var formData = new FormData(this);

И отправка через jQuery:

$.ajax({
  url: cyrtolat_ajax_object.ajax_url,
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    // обработка ответа
  }
});

В PHP добавьте проверку и обработку файла через $_FILES, например, используя wp_handle_upload() для сохранения загруженного файла.

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

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

• Обязательно проверяйте nonce, чтобы избежать CSRF-атак.
• Санитизируйте все входящие данные — особенно если будете сохранять в базу или отображать пользователю.
• Ограничьте размер и типы загружаемых файлов.
• Используйте хук wp_ajax_nopriv_, чтобы форма работала для неавторизованных пользователей.
• Кэшируйте скрипты и минимизируйте их для ускорения загрузки.

Заключение

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