Как создать динамическую форму обратной связи в WordPress с AJAX

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

Почему стоит использовать AJAX в формах обратной связи

AJAX (Asynchronous JavaScript and XML) позволяет отправлять данные на сервер и получать ответ без полной перезагрузки страницы. Это значительно улучшает пользовательский опыт, так как форма становится отзывчивой и быстрой.

Преимущества использования AJAX для формы обратной связи в WordPress:

• Отправка данных без перезагрузки страницы;
• Мгновенная проверка и вывод ошибок;
• Возможность отображать статус отправки (успешно, ошибка);
• Снижение нагрузки на сервер за счет уменьшения количества полных запросов.

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

Рассмотрим пример создания простой формы обратной связи, которая отправляет имя, email и сообщение, а затем сохраняет данные и отправляет уведомление на почту администратора.

1. Создание HTML формы

Добавим форму в файл темы, например, в page-contact.php или в любой шаблон, где нужна форма:

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

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

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

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

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

В файл темы functions.php добавим регистрацию скрипта и локализацию данных для AJAX:

function wpconsult_enqueue_scripts() {
  wp_enqueue_script('wpconsult-contact-ajax', get_template_directory_uri() . '/js/contact-ajax.js', array('jquery'), null, true);
  wp_localize_script('wpconsult-contact-ajax', 'wpconsult_ajax_obj', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpconsult_contact_nonce')
  ));
}
add_action('wp_enqueue_scripts', 'wpconsult_enqueue_scripts');

Создаем файл js/contact-ajax.js с кодом обработки отправки формы:

jQuery(document).ready(function($) {
  $('#wpconsult_contact_form').on('submit', function(e) {
    e.preventDefault();

    var formData = {
      action: 'wpconsult_send_contact',
      nonce: wpconsult_ajax_obj.nonce,
      name: $('#name').val(),
      email: $('#email').val(),
      message: $('#message').val()
    };

    $('#form_response').html('Отправка...');

    $.post(wpconsult_ajax_obj.ajax_url, formData, function(response) {
      if(response.success) {
        $('#form_response').html('<span style="color:green">' + response.data + '</span>');
        $('#wpconsult_contact_form')[0].reset();
      } else {
        $('#form_response').html('<span style="color:red">' + response.data + '</span>');
      }
    });
  });
});

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

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

function wpconsult_handle_contact_ajax() {
  check_ajax_referer('wpconsult_contact_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('Пожалуйста, заполните все поля.');
  }

  if(!is_email($email)) {
    wp_send_json_error('Укажите корректный email.');
  }

  $to = get_option('admin_email');
  $subject = 'Новое сообщение с сайта';
  $body = "Имя: $name\nEmail: $email\nСообщение: $message";
  $headers = array('Content-Type: text/plain; charset=UTF-8');

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

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

Расширение функционала: защита от спама и валидация на стороне сервера

Чтобы защитить форму от спама, можно добавить Google reCAPTCHA или простой вопрос-ответ (капчу). Также на сервере мы уже делаем базовую валидацию, но можно расширить проверки, например, запрещать определённые слова или IP-адреса.

Пример добавления вопроса-капчи

В форму добавим поле:

<label for="captcha">Сколько будет 3 + 4?</label>
<input type="text" id="captcha" name="captcha" required />

В PHP проверим ответ:

$captcha = intval($_POST['captcha']);
if($captcha !== 7) {
  wp_send_json_error('Неверный ответ на вопрос капчи.');
}

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

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

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

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

Выводы и рекомендации

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

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

Если хотите расширить функционал, можете интегрировать форму с плагинами из WPShop, например, My Popup для вывода формы в модальном окне или Expert Review для сбора отзывов с AJAX.