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

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

Почему AJAX важен для форм обратной связи в WordPress

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

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

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

Подготовка: базовая форма обратной связи в WordPress

Для примера создадим простую форму в файле functions.php вашей темы или в отдельном плагине. Форма будет содержать поля для имени, email и сообщения.

<form id="premiumwp-contact-form" method="post">
  <label>Имя:</label>
  <input type="text" name="name" required />
  <label>Email:</label>
  <input type="email" name="email" required />
  <label>Сообщение:</label>
  <textarea name="message" required></textarea>
  <input type="submit" value="Отправить" />
</form>
<div id="premiumwp-response-message"></div>

Это базовая HTML-форма. Теперь добавим обработчик на стороне сервера и подключим AJAX.

Добавление AJAX-обработчика в WordPress

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

add_action('wp_ajax_premiumwp_contact_form', 'premiumwp_handle_ajax_contact_form');
add_action('wp_ajax_nopriv_premiumwp_contact_form', 'premiumwp_handle_ajax_contact_form');

function premiumwp_handle_ajax_contact_form() {
    // Проверяем nonce для безопасности
    if ( !isset($_POST['premiumwp_nonce']) || !wp_verify_nonce($_POST['premiumwp_nonce'], 'premiumwp_contact_form_nonce') ) {
        wp_send_json_error('Ошибка безопасности. Попробуйте ещё раз.');
    }

    $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<br>Email: $email<br>Сообщение:<br>" . nl2br($message);
    $headers = array('Content-Type: text/html; charset=UTF-8');

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

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

Обратите внимание, что мы используем wp_send_json_success и wp_send_json_error для возврата ответа в формате JSON.

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

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

function premiumwp_enqueue_scripts() {
    wp_enqueue_script('premiumwp-ajax-script', get_template_directory_uri() . '/js/premiumwp-ajax-contact.js', array('jquery'), null, true);
    wp_localize_script('premiumwp-ajax-script', 'premiumwp_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('premiumwp_contact_form_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'premiumwp_enqueue_scripts');

Создайте файл js/premiumwp-ajax-contact.js в вашей теме и добавьте следующий код:

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

        var data = {
            action: 'premiumwp_contact_form',
            premiumwp_nonce: premiumwp_ajax_object.nonce,
            name: $(this).find('input[name="name"]').val(),
            email: $(this).find('input[name="email"]').val(),
            message: $(this).find('textarea[name="message"]').val()
        };

        $.post(premiumwp_ajax_object.ajax_url, data, function(response) {
            var $responseDiv = $('#premiumwp-response-message');
            if(response.success) {
                $responseDiv.css('color', 'green').html(response.data);
                $('#premiumwp-contact-form')[0].reset();
            } else {
                $responseDiv.css('color', 'red').html(response.data);
            }
        });
    });
});

Скрипт перехватывает отправку формы, собирает данные и отправляет их на сервер с помощью AJAX. Ответ выводится в блок ниже формы.

Дополнительные советы и плагины для расширения функционала

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

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

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

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

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