Как отключить AJAX в Gravity Forms и использовать собственный AJAX-обработчик в WordPress

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

В этой статье мы подробно разберём, как отключить встроенный AJAX в Gravity Forms и заменить его собственным AJAX-обработчиком на базе WordPress, что позволит вам полностью контролировать процесс отправки и обработки данных формы.

Почему стоит отключить стандартный AJAX Gravity Forms

Стандартный AJAX в Gravity Forms удобен, но имеет ограничения:

• Трудно кастомизировать поведение после отправки, например, выводить динамический контент на странице без перезагрузки;
• Нельзя легко интегрировать с внешними API или выполнять дополнительные проверки на стороне сервера;
• Трудно обрабатывать ошибки в пользовательском формате и демонстрировать их прямо в интерфейсе;
• Ограниченные возможности для логирования и отладки отправок в реальном времени.

Если вам нужно расширенное управление формами или интеграция с внешними системами, лучше отключить AJAX Gravity Forms и реализовать собственный AJAX-запрос.

Как отключить AJAX в Gravity Forms

Отключить AJAX-режим можно прямо в шорткоде формы. Например, если у вас есть шорткод:

[gravityform id="1" ajax="true"]

просто замените его на:

[gravityform id="1" ajax="false"]

Или если вы вызываете форму с помощью PHP-функции gravity_form(), выставьте параметр AJAX в false:

gravity_form( 1, false, false, false, '', false );

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

Реализация собственного AJAX-обработчика для Gravity Forms

Теперь создадим собственный AJAX-обработчик, который будет перехватывать отправку формы, обрабатывать данные и возвращать ответ без перезагрузки страницы.

1. Добавьте AJAX-скрипт в тему или плагин

В файле functions.php вашей темы или в файле плагина подключите скрипт и передайте параметры:

function wpcommunity_enqueue_custom_gf_ajax() {
    wp_enqueue_script('wpcommunity-gf-ajax', get_template_directory_uri() . '/js/wpcommunity-gf-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('wpcommunity-gf-ajax', 'wpcommunity_gf_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpcommunity_gf_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpcommunity_enqueue_custom_gf_ajax');

Этот код подключит JavaScript и передаст URL для AJAX и nonce для безопасности.

2. Создайте JavaScript для отправки формы

В файле js/wpcommunity-gf-ajax.js напишите следующий код:

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

        var formData = $(this).serialize();
        formData += '&action=wpcommunity_process_gf_form';
        formData += '&nonce=' + wpcommunity_gf_ajax_obj.nonce;

        $.post(wpcommunity_gf_ajax_obj.ajax_url, formData, function(response) {
            if(response.success) {
                $('#gform_1').html('<p>Спасибо за отправку формы!</p>');
            } else {
                $('#gform_1 .validation_error').remove();
                $('#gform_1').prepend('<div class="validation_error">' + response.data.message + '</div>');
            }
        });
    });
});

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

3. Обработайте AJAX-запрос на сервере

Добавьте в functions.php следующий обработчик:

function wpcommunity_process_gf_form() {
    check_ajax_referer('wpcommunity_gf_nonce', 'nonce');

    // Обработка данных формы
    $input = [];
    foreach ($_POST as $key => $value) {
        if (strpos($key, 'input_') === 0) {
            $input[$key] = sanitize_text_field($value);
        }
    }

    // Пример проверки обязательного поля
    if (empty($input['input_1'])) { // замените input_1 на ваш ID поля
        wp_send_json_error(['message' => 'Поле "Имя" обязательно для заполнения.']);
    }

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

    wp_send_json_success();
}
add_action('wp_ajax_wpcommunity_process_gf_form', 'wpcommunity_process_gf_form');
add_action('wp_ajax_nopriv_wpcommunity_process_gf_form', 'wpcommunity_process_gf_form');

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

Преимущества собственного AJAX-обработчика

Использование собственного AJAX-обработчика даёт:

• Полный контроль над процессом валидации и обработки данных;
• Возможность интеграции с внешними API, например, CRM или сервисами рассылок;
• Гибкие способы вывода сообщений об ошибках и успешной отправке;
• Упрощение отладки и ведение логов.

Дополнительные рекомендации и плагины для расширения Gravity Forms

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

• Clearfy Pro — оптимизация и ускорение сайта, в том числе управление скриптами;
• WPCommunity — набор хуков и функций для расширенной автоматизации;
• Используйте встроенные хуки Gravity Forms для расширения логики, например, gform_pre_submission_filter и gform_after_submission для дополнительной обработки данных.

Выводы по теме

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