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

Автор: Диана Морозова | Опубликовано: 15.12.2025

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

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

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

Отправлять данные без перезагрузки страницы;
Показывать динамические сообщения об ошибках или успехе;
Оптимизировать взаимодействие с сервером;
Улучшать пользовательский опыт и повышать вовлеченность.

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

Подготовка: Создаем простую форму WordPress

Для начала создадим базовую HTML-форму, которую будем отправлять с помощью AJAX. Добавим ее в шаблон темы или с помощью шорткода.

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

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

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

Обратите внимание, что у формы есть уникальный ID и блок для вывода ответа от сервера.

Добавление JavaScript для обработки AJAX-запроса

Теперь подключим JavaScript, который будет перехватывать отправку формы, собирать данные и отправлять их на сервер с помощью AJAX.

Лучше всего добавить этот скрипт в отдельный файл и подключить его через функцию WordPress wp_enqueue_script. Ниже пример подключения и сам JS-код.

function wppremium_enqueue_ajax_script() {
  wp_enqueue_script( 'wppremium-ajax-script', get_template_directory_uri() . '/js/wppremium-ajax.js', array('jquery'), null, true );
  wp_localize_script( 'wppremium-ajax-script', 'wppremium_ajax_obj', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
  ) );
}
add_action( 'wp_enqueue_scripts', 'wppremium_enqueue_ajax_script' );

В файле wppremium-ajax.js разместим следующий код:

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

    var name = $('#wppremium-name').val();
    var email = $('#wppremium-email').val();

    $.ajax({
      url: wppremium_ajax_obj.ajaxurl,
      type: 'POST',
      data: {
        action: 'wppremium_handle_form',
        name: name,
        email: email
      },
      success: function(response) {
        $('#wppremium-response').html('<p style="color:green;">' + response.data + '</p>');
        $('#wppremium-ajax-form')[0].reset();
      },
      error: function(xhr) {
        $('#wppremium-response').html('<p style="color:red;">Произошла ошибка. Попробуйте позже.</p>');
      }
    });
  });
});

Здесь мы отменяем стандартную отправку формы, собираем данные и вызываем AJAX запрос по адресу admin-ajax.php с определенным действием wppremium_handle_form.

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

Для обработки запроса нужно добавить PHP-функцию, которая получит данные, проверит их, и отправит ответ обратно в JS.

function wppremium_handle_form_callback() {
  // Проверка nonce и прав доступа можно добавить для безопасности

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

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

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

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

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

  wp_die();
}
add_action( 'wp_ajax_wppremium_handle_form', 'wppremium_handle_form_callback' );
add_action( 'wp_ajax_nopriv_wppremium_handle_form', 'wppremium_handle_form_callback' );

Данная функция проверяет входные данные, отправляет письмо администратору и возвращает JSON-ответ с результатом.

Дополнительные советы по безопасности и улучшению

1. Добавьте nonce для защиты от CSRF атак. В форму добавьте wp_nonce_field('wppremium_ajax_nonce','wppremium_nonce'), а в JS передавайте nonce в данные запроса, а в PHP проверяйте через check_ajax_referer.

2. Обрабатывайте ошибки и выводите полезные сообщения пользователю.

3. При необходимости интегрируйте с плагинами, например, с Clearfy Pro для оптимизации и безопасности сайта.

4. Для сложных форм можно использовать JavaScript библиотеки валидации, чтобы улучшить UX.

Итоги

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

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