WPForms: заполнение формы через AJAX без перезагрузки страницы

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

Почему важно использовать AJAX для отправки форм WPForms

Отправка формы через AJAX позволяет:
- Сократить время ожидания пользователя, так как не происходит полной перезагрузки страницы.
- Сделать интерфейс более отзывчивым и динамичным.
- Легко обрабатывать ошибки и выводить сообщения без обновления страницы.
- Улучшить показатели конверсии, снижая раздражение пользователя.

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

Подготовка формы WPForms к AJAX отправке

Для начала нам понадобится ID формы, который можно получить в админке WordPress в списке форм WPForms. Предположим, что ID нашей формы — 123.

Создаем в теме или плагине JavaScript скрипт, который перехватит событие отправки формы и выполнит AJAX запрос.

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

Добавим код в functions.php вашей темы (или в отдельный плагин):

function wpform_ajax_enqueue_scripts() {
    wp_enqueue_script('wpform-ajax-submit', get_stylesheet_directory_uri() . '/js/wpform-ajax-submit.js', array('jquery'), null, true);
    wp_localize_script('wpform-ajax-submit', 'wpform_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'form_id' => 123,
        'nonce' => wp_create_nonce('wpform_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpform_ajax_enqueue_scripts');

Этот код подключит JS-файл и передаст в него необходимые параметры.

Написание JavaScript для перехвата отправки

Создайте файл wpform-ajax-submit.js в папке js вашей темы с таким содержанием:

jQuery(document).ready(function($) {
    $('#wpforms-form-' + wpform_ajax_obj.form_id).on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var formData = form.serialize();
        form.find('button[type="submit"]').attr('disabled', true);

        $.ajax({
            url: wpform_ajax_obj.ajax_url,
            type: 'POST',
            data: formData + '&action=wpform_ajax_submit&nonce=' + wpform_ajax_obj.nonce,
            success: function(response) {
                form.find('.wpforms-error, .wpforms-success').remove();
                if(response.success) {
                    form.append('<div class="wpforms-success">' + response.data.message + '</div>');
                    form[0].reset();
                } else {
                    form.append('<div class="wpforms-error">' + response.data.message + '</div>');
                }
                form.find('button[type="submit"]').attr('disabled', false);
            },
            error: function() {
                form.append('<div class="wpforms-error">Ошибка отправки формы. Попробуйте позже.</div>');
                form.find('button[type="submit"]').attr('disabled', false);
            }
        });
    });
});

В этом коде мы отменяем стандартное поведение формы, собираем данные и отправляем их AJAX-запросом на сервер.

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

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

PHP-обработчик для AJAX-запроса

В functions.php вашей темы добавьте следующий код:

function wpform_ajax_handle_submit() {
    check_ajax_referer('wpform_ajax_nonce', 'nonce');

    $form_id = isset($_POST['wpforms']['id']) ? intval($_POST['wpforms']['id']) : 0;
    if($form_id !== 123) {
        wp_send_json_error(array('message' => 'Неверный ID формы'));
    }

    // Подключаем WPForms класс
    if(!class_exists('WPForms')) {
        wp_send_json_error(array('message' => 'Плагин WPForms не активен'));
    }

    // Используем встроенный метод обработки отправки
    $wpforms_instance = WPForms::get_instance();
    $result = $wpforms_instance->process($_POST);

    if($result['status'] === 'ok') {
        wp_send_json_success(array('message' => 'Форма успешно отправлена!'));
    } else {
        wp_send_json_error(array('message' => implode('\n', $result['errors'])));
    }
}
add_action('wp_ajax_wpform_ajax_submit', 'wpform_ajax_handle_submit');
add_action('wp_ajax_nopriv_wpform_ajax_submit', 'wpform_ajax_handle_submit');

Этот обработчик проверит nonce, ID формы и вызовет стандартную функцию обработки WPForms. В ответ отправится JSON с результатом.

Дополнительные советы по улучшению работы AJAX формы

Обработка ошибок валидации

WPForms возвращает ошибки валидации в массиве. В JS их можно красиво отобразить рядом с соответствующими полями, для этого потребуется более сложный парсинг ответа и добавление элементов в DOM. Это улучшит UX и снизит количество повторных ошибок.

Интеграция с другими сервисами

AJAX-отправка форм хорошо комбинируется с интеграциями, например, с сервисами email-рассылок или CRM. Благодаря асинхронной отправке можно запускать дополнительные действия сразу после успешной отправки, не перегружая пользователя.

Оптимизация производительности

Чтобы не перегружать сервер, рекомендуется добавить защиту от частых отправок — например, сессии, временные блокировки или CAPTCHA. Также важно минимизировать размер JS-скрипта и кешировать страницы.

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

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

• WPForms AJAX Submit — плагин расширения, упрощающий AJAX-отправку.
• Ajaxify WordPress Contact Form — универсальный плагин для AJAX-форм.
• Contact Form 7 AJAX Submission — если вы используете Contact Form 7, этот плагин поможет.

Но имейте в виду, что самостоятельная реализация дает больше гибкости и контроля.

Для покупки лицензий плагина WPForms и других полезных инструментов для WordPress посетите официальный магазин WPSHOP.