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

Автор: Антон Панин | Опубликовано: 25.02.2026

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

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

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

Преимущества AJAX:

Отсутствие перезагрузки страницы при отправке
Быстрая обработка и мгновенный отклик
Возможность динамически менять содержимое страницы
Уменьшение нагрузки на сервер и трафика

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

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

1. Добавляем HTML форму в шаблон

Для начала создадим простую форму с полем email и кнопкой отправки:

<form id="wpsetup-ajax-form" method="post">
  <input type="email" name="email" id="wpsetup-email" required placeholder="Введите ваш email" />
  <input type="submit" value="Подписаться" />
  <div id="wpsetup-form-response"></div>
</form>

Эту форму можно разместить в любом месте темы — в файле шаблона или через do_shortcode с добавленным шорткодом.

2. Подключаем JavaScript для отправки AJAX-запроса

Создайте файл wpsetup-ajax.js в папке темы или плагина и добавьте следующий скрипт:

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpsetup-ajax-form');
  const responseDiv = document.getElementById('wpsetup-form-response');

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('wpsetup-email').value;

    if (!email) {
      responseDiv.textContent = 'Пожалуйста, введите email.';
      return;
    }

    responseDiv.textContent = 'Отправка...';

    fetch(wpsetup_ajax_object.ajax_url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },
      body: new URLSearchParams({
        action: 'wpsetup_check_email',
        email: email,
        security: wpsetup_ajax_object.nonce
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        responseDiv.textContent = data.data.message;
        form.reset();
      } else {
        responseDiv.textContent = data.data.message;
      }
    })
    .catch(() => {
      responseDiv.textContent = 'Произошла ошибка. Попробуйте позже.';
    });
  });
});

Этот скрипт перехватывает отправку формы, собирает email и делает POST запрос к серверу, ожидая JSON-ответ.

3. Регистрируем и подключаем скрипт с локализацией

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

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

Здесь мы подключаем JavaScript и передаём в него URL для AJAX и nonce для безопасности.

4. Создаём обработчик AJAX-запроса на PHP

В том же файле functions.php добавьте:

function wpsetup_handle_ajax_email() {
  check_ajax_referer('wpsetup-ajax-nonce', 'security');

  $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

  if (!is_email($email)) {
    wp_send_json_error(array('message' => 'Неверный формат email.'));
  }

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

  wp_send_json_success(array('message' => 'Спасибо за подписку!')); 
}
add_action('wp_ajax_wpsetup_check_email', 'wpsetup_handle_ajax_email');
add_action('wp_ajax_nopriv_wpsetup_check_email', 'wpsetup_handle_ajax_email');

Этот обработчик проверяет nonce, валидирует email и возвращает JSON-ответ с результатом.

Расширение функционала: сохранение email в пользовательскую таблицу

Чтобы сделать пример более практичным, рассмотрим, как сохранить email в отдельной таблице базы данных WordPress.

Создание таблицы при активации плагина или функции

Добавьте код для создания таблицы в functions.php или плагине:

function wpsetup_create_email_table() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wpsetup_emails';
  $charset_collate = $wpdb->get_charset_collate();

  $sql = "CREATE TABLE IF NOT EXISTS $table_name (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    email varchar(100) NOT NULL,
    subscribed_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
    PRIMARY KEY  (id),
    UNIQUE KEY email (email)
  ) $charset_collate;";

  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  dbDelta($sql);
}
register_activation_hook(__FILE__, 'wpsetup_create_email_table');

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

Сохранение email в таблицу в AJAX обработчике

function wpsetup_handle_ajax_email() {
  check_ajax_referer('wpsetup-ajax-nonce', 'security');

  $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

  if (!is_email($email)) {
    wp_send_json_error(array('message' => 'Неверный формат email.'));
  }

  global $wpdb;
  $table_name = $wpdb->prefix . 'wpsetup_emails';

  $exists = $wpdb->get_var($wpdb->prepare("SELECT email FROM $table_name WHERE email = %s", $email));
  if ($exists) {
    wp_send_json_error(array('message' => 'Этот email уже подписан.'));
  }

  $inserted = $wpdb->insert($table_name, array('email' => $email), array('%s'));

  if ($inserted) {
    wp_send_json_success(array('message' => 'Спасибо за подписку!')); 
  } else {
    wp_send_json_error(array('message' => 'Ошибка при сохранении. Попробуйте позже.'));
  }
}
add_action('wp_ajax_wpsetup_check_email', 'wpsetup_handle_ajax_email');
add_action('wp_ajax_nopriv_wpsetup_check_email', 'wpsetup_handle_ajax_email');

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

При работе с AJAX важно учитывать безопасность:

Используйте wp_create_nonce и check_ajax_referer для защиты от CSRF-атак.
Обязательно фильтруйте и валидируйте входные данные через функции WordPress, например sanitize_email, sanitize_text_field.
Обрабатывайте ошибки и возвращайте информативные сообщения пользователю.
Для отладки используйте консоль браузера и инструменты разработчика, а также логи сервера.

Если форма не работает, проверьте правильность путей к скриптам, наличие ошибок JavaScript и корректность AJAX-обработчиков в PHP.

Альтернативные плагины для AJAX форм на WordPress

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

My Popup — поддерживает AJAX отправку и кастомизацию попап форм.
Quizle — плагин для создания интерактивных форм и опросов с AJAX.

Однако, если нужна лёгкая и контролируемая форма, лучше написать собственное решение, как описано выше.