Как отключить перезагрузку страницы при отправке формы в WordPress

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

Почему важно отключить перезагрузку страницы при отправке формы

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

Реализация отправки через AJAX позволяет:

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

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

1. Создаём HTML-форму

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

<form id="wpunit_ajax_form" method="post" action="">
  <input type="email" name="email" placeholder="Введите ваш email" required>
  <input type="submit" value="Отправить">
</form>
<div id="wpunit_form_response"></div>

2. Добавляем JavaScript для отправки формы без перезагрузки

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

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpunit_ajax_form');
  const responseContainer = document.getElementById('wpunit_form_response');

  form.addEventListener('submit', function(e) {
    e.preventDefault(); // отключаем стандартную отправку с перезагрузкой
    const formData = new FormData(form);
    formData.append('action', 'wpunit_submit_form'); // указываем действие для WordPress AJAX

    fetch(wpunit_ajax_object.ajax_url, {
      method: 'POST',
      credentials: 'same-origin',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        responseContainer.innerHTML = '<span style="color:green;">' + data.data.message + '</span>';
        form.reset();
      } else {
        responseContainer.innerHTML = '<span style="color:red;">' + data.data.message + '</span>';
      }
    })
    .catch(error => {
      responseContainer.innerHTML = '<span style="color:red;">Произошла ошибка при отправке формы.</span>';
      console.error('Ошибка AJAX:', error);
    });
  });
});

3. Регистрируем AJAX-обработчик в functions.php

Теперь создадим функцию, которая будет обрабатывать AJAX-запросы на сервере. Она должна проверить данные и вернуть результат.

function wpunit_handle_ajax_form() {
  if ( ! isset( $_POST['email'] ) || ! is_email( sanitize_email( $_POST['email'] ) ) ) {
    wp_send_json_error( array( 'message' => 'Пожалуйста, введите корректный email.' ) );
  }

  $email = sanitize_email( $_POST['email'] );

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

  wp_send_json_success( array( 'message' => 'Спасибо! Ваш email принят.' ) );
}
add_action( 'wp_ajax_wpunit_submit_form', 'wpunit_handle_ajax_form' );
add_action( 'wp_ajax_nopriv_wpunit_submit_form', 'wpunit_handle_ajax_form' );

4. Локализуем скрипт и передаём ajax_url

Для работы fetch-запроса нам нужно передать URL для AJAX-запросов WordPress. Сделаем это через локализацию скрипта.

function wpunit_enqueue_scripts() {
  wp_enqueue_script( 'wpunit-ajax-script', get_template_directory_uri() . '/js/wpunit-ajax.js', array(), '1.0', true );
  wp_localize_script( 'wpunit-ajax-script', 'wpunit_ajax_object', array(
    'ajax_url' => admin_url( 'admin-ajax.php' )
  ) );
}
add_action( 'wp_enqueue_scripts', 'wpunit_enqueue_scripts' );

Использование плагинов для создания AJAX-форм

Если вы не хотите писать код самостоятельно, можно воспользоваться готовыми плагинами с поддержкой AJAX:

• Contact Form 7 – популярный плагин с поддержкой AJAX по умолчанию, легко настраиваемый.
• WPForms – мощный конструктор форм с функцией AJAX (в премиум-версии).
• Caldera Forms – удобный плагин с возможностью включения AJAX-отправки.

Например, Contact Form 7 уже интегрирован с AJAX, и достаточно просто вставить шорткод формы в нужное место, чтобы избежать перезагрузки страницы.

Дополнительные советы по оптимизации AJAX-форм в WordPress

Валидация данных на клиенте и сервере

Обязательно реализуйте проверку данных как на стороне клиента (JavaScript), так и на сервере (PHP). Это защитит от некорректного ввода и повысит безопасность.

Обработка ошибок и обратная связь

Показывайте пользователю информативные сообщения об ошибках и успехе. Это можно делать динамически с помощью DOM-манипуляций, как в нашем примере.

Защита от спама

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

Итог

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

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