Как сделать автоматическое сохранение формы в WordPress через AJAX

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

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

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

Автоматическое сохранение позволяет:

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

Подготовка: подключение AJAX в WordPress

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

function wpmake_enqueue_ajax_script() {
    wp_enqueue_script('wpmake-ajax-form', get_template_directory_uri() . '/js/wpmake-ajax-form.js', array('jquery'), '1.0', true);
    wp_localize_script('wpmake-ajax-form', 'wpmake_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpmake_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpmake_enqueue_ajax_script');

Это позволит в JavaScript обращаться к wpmake_ajax_obj.ajax_url для отправки запросов.

Создание простой формы с автосохранением

Добавим форму, например, в шаблон или через шорткод:

function wpmake_autosave_form_shortcode() {
    ob_start();
    ?>
    <form id="wpmake-autosave-form">
        <label for="wpmake_name">Имя:</label>
        <input type="text" name="name" id="wpmake_name">

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

        <p id="wpmake-status"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpmake_autosave_form', 'wpmake_autosave_form_shortcode');

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

JavaScript для отправки данных при изменении

В файле wpmake-ajax-form.js напишем код для отправки данных на сервер при изменении полей с небольшой задержкой — debounce, чтобы не перегружать сервер.

jQuery(document).ready(function($) {
    let timer;
    $('#wpmake-autosave-form input').on('input', function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            let data = {
                action: 'wpmake_autosave_form',
                nonce: wpmake_ajax_obj.nonce,
                name: $('#wpmake_name').val(),
                email: $('#wpmake_email').val()
            };
            $.post(wpmake_ajax_obj.ajax_url, data, function(response) {
                $('#wpmake-status').text(response.data.message);
            });
        }, 800);
    });
});

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

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

function wpmake_handle_autosave_form() {
    check_ajax_referer('wpmake_ajax_nonce', 'nonce');

    $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
    $email = isset($_POST['email']) ? sanitize_email($_POST['email']) : '';

    if (!is_user_logged_in()) {
        wp_send_json_error(array('message' => 'Требуется авторизация для сохранения данных'));
    }

    $user_id = get_current_user_id();
    update_user_meta($user_id, 'wpmake_autosave_name', $name);
    update_user_meta($user_id, 'wpmake_autosave_email', $email);

    wp_send_json_success(array('message' => 'Данные успешно сохранены'));
}
add_action('wp_ajax_wpmake_autosave_form', 'wpmake_handle_autosave_form');

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

Вывод сохраненных данных при загрузке формы

Чтобы пользователь видел сохраненные данные при повторном открытии страницы, подгрузим значения в форму из метаполей:

function wpmake_autosave_form_shortcode() {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        $name = get_user_meta($user_id, 'wpmake_autosave_name', true);
        $email = get_user_meta($user_id, 'wpmake_autosave_email', true);
    } else {
        $name = '';
        $email = '';
    }

    ob_start();
    ?>
    <form id="wpmake-autosave-form">
        <label for="wpmake_name">Имя:</label>
        <input type="text" name="name" id="wpmake_name" value="<?php echo esc_attr($name); ?>">

        <label for="wpmake_email">Email:</label>
        <input type="email" name="email" id="wpmake_email" value="<?php echo esc_attr($email); ?>">

        <p id="wpmake-status"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpmake_autosave_form', 'wpmake_autosave_form_shortcode');

Расширение функционала: использование плагина Clearfy Pro для оптимизации AJAX

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

Советы и рекомендации по реализации автосохранения в WordPress

• Используйте nonce и проверяйте права пользователя для безопасности.
• Реализуйте debounce или throttle для уменьшения количества запросов при вводе.
• Сохраняйте данные в подходящих местах — пользовательские мета, опции, кастомные таблицы.
• Обрабатывайте ошибки и информируйте пользователя о статусе сохранения.
• Тестируйте работу на разных устройствах и браузерах для стабильности.

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