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

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

Почему важно автоматическое сохранение данных формы в WordPress

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

Автоматическое сохранение данных помогает:

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

Реализовать такую функцию можно разными способами: сохранение в localStorage браузера или отправка данных на сервер через AJAX. Мы рассмотрим второй вариант, так как он более надёжен и позволяет сохранять данные между сессиями и устройствами.

Создаем AJAX-обработчик для сохранения данных формы в WordPress

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

Добавьте следующий код в файл functions.php вашей темы или в файл собственного плагина:

add_action('wp_ajax_wpfreecourses_save_form_data', 'wpfreecourses_save_form_data');
add_action('wp_ajax_nopriv_wpfreecourses_save_form_data', 'wpfreecourses_save_form_data');

function wpfreecourses_save_form_data() {
    // Проверка nonce для безопасности
    if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'], 'wpfreecourses_form_nonce') ) {
        wp_send_json_error('Ошибка безопасности');
        wp_die();
    }

    // Получаем данные формы
    $form_data = isset($_POST['formData']) ? $_POST['formData'] : '';
    if ( empty($form_data) ) {
        wp_send_json_error('Данные формы пусты');
        wp_die();
    }

    // Идентификатор пользователя или сессии
    $user_id = get_current_user_id() ?: 'guest';

    // Формируем ключ для сохранения
    $option_key = 'wpfreecourses_form_data_' . $user_id;

    // Сохраняем данные в базе
    update_option($option_key, $form_data);

    wp_send_json_success('Данные сохранены');
    wp_die();
}

Обратите внимание, что для неавторизованных пользователей мы используем ключ guest. В реальном проекте лучше генерировать уникальный идентификатор сессии и сохранять его в cookie, чтобы разделять данные разных посетителей.

Добавляем JavaScript для автоматического сохранения формы

Теперь создадим скрипт, который будет автоматически отправлять данные формы на сервер каждые 10 секунд или при изменении полей. Пример для простой формы с id my_form:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('my_form');
    if (!form) return;

    const nonce = wpfreecourses_vars.nonce; // передаём nonce из PHP

    function serializeForm(form) {
        const formData = new FormData(form);
        const obj = {};
        formData.forEach((value, key) => {
            obj[key] = value;
        });
        return JSON.stringify(obj);
    }

    let timeoutId;

    function saveFormData() {
        const data = serializeForm(form);

        fetch(wpfreecourses_vars.ajax_url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                action: 'wpfreecourses_save_form_data',
                nonce: nonce,
                formData: data
            })
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                console.log('Данные формы сохранены');
            } else {
                console.error('Ошибка сохранения данных:', result.data);
            }
        })
        .catch(err => console.error('Ошибка запроса:', err));
    }

    form.addEventListener('input', () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(saveFormData, 10000); // сохраняем через 10 секунд после последнего изменения
    });

    // Можно также сохранить данные при уходе со страницы
    window.addEventListener('beforeunload', saveFormData);
});

Для передачи переменных из PHP в JS используйте функцию wp_localize_script в functions.php:

function wpfreecourses_enqueue_scripts() {
    wp_enqueue_script('wpfreecourses_form_autosave', get_template_directory_uri() . '/js/form-autosave.js', array(), '1.0', true);
    wp_localize_script('wpfreecourses_form_autosave', 'wpfreecourses_vars', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpfreecourses_form_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpfreecourses_enqueue_scripts');

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

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

Добавим PHP-функцию, которая выведет сохранённые данные в формате JSON, и подключим её через AJAX в JavaScript:

add_action('wp_ajax_wpfreecourses_get_form_data', 'wpfreecourses_get_form_data');
add_action('wp_ajax_nopriv_wpfreecourses_get_form_data', 'wpfreecourses_get_form_data');

function wpfreecourses_get_form_data() {
    if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'], 'wpfreecourses_form_nonce') ) {
        wp_send_json_error('Ошибка безопасности');
        wp_die();
    }

    $user_id = get_current_user_id() ?: 'guest';
    $option_key = 'wpfreecourses_form_data_' . $user_id;
    $form_data = get_option($option_key, '{}');

    wp_send_json_success(json_decode($form_data));
    wp_die();
}

В JavaScript добавим загрузку данных при старте:

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('my_form');
    if (!form) return;

    const nonce = wpfreecourses_vars.nonce;

    // Загрузка сохранённых данных
    fetch(wpfreecourses_vars.ajax_url, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({
            action: 'wpfreecourses_get_form_data',
            nonce: nonce
        })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            const data = result.data;
            for (const [key, value] of Object.entries(data)) {
                const field = form.querySelector(`[name="${key}"]`);
                if (field) {
                    field.value = value;
                }
            }
        }
    })
    .catch(err => console.error('Ошибка загрузки данных:', err));

    // ... остальной код автосохранения
});

Рекомендации и улучшения для автосохранения форм в WordPress

Чтобы повысить надёжность и удобство системы автосохранения, рекомендуем:

• Использовать уникальный идентификатор сессии для гостей, чтобы не мешать данные разных пользователей;
• Добавлять индикатор состояния сохранения формы — например, «Данные сохранены» или «Сохраняем...»;
• Ограничивать частоту запросов к серверу, чтобы не перегружать его;
• Реализовать удаление сохранённых данных при успешной отправке формы, чтобы не загромождать базу;
• Обрабатывать разные типы полей: чекбоксы, радиокнопки, select — в примерах выше показан только базовый кейс.

Если хочется упростить задачу, можно использовать готовые плагины с функцией автосохранения, например, WP Autosave или Formidable Forms с поддержкой автосохранения данных.

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