В современных веб-проектах важно обеспечить удобство для пользователей при заполнении форм. Один из эффективных способов улучшить UX — реализовать автоматическое сохранение данных, чтобы посетители не потеряли введённую информацию при случайном обновлении страницы или переходе между разделами сайта.
Зачем нужно автоматическое сохранение данных в формах WordPress
Многие сталкивались с ситуацией, когда форма на сайте была заполнена, но из-за технических сбоев, закрытия вкладки или случайного нажатия кнопки «назад» данные потерялись. Это вызывает раздражение и снижает конверсию на сайте. Автоматическое сохранение помогает:
- Сохранять промежуточные данные, даже если пользователь не отправил форму;
- Позволять возобновить заполнение формы с того места, где остановился;
- Уменьшать количество брошенных форм и увеличивать вовлечённость.
Реализация автоматического сохранения с помощью JavaScript и AJAX
Самый универсальный способ — использовать JavaScript для отслеживания изменений в полях формы и AJAX для отправки данных на сервер без перезагрузки страницы.
Пример реализации функции сохранения данных в localStorage
Для начала можно сохранить данные в браузере с помощью localStorage. Это не требует обращения к серверу и работает мгновенно.
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('#my-wpassist-form');
if (!form) return;
// Загрузка сохранённых данных
for (let element of form.elements) {
if (element.name) {
const savedValue = localStorage.getItem('wpassist_' + element.name);
if (savedValue !== null) {
element.value = savedValue;
}
}
}
// Сохранение данных при изменении
form.addEventListener('input', function(e) {
if (e.target.name) {
localStorage.setItem('wpassist_' + e.target.name, e.target.value);
}
});
});Этот код сохраняет каждое изменение в полях формы с id my-wpassist-form в localStorage с префиксом wpassist_. При загрузке страницы значения из localStorage подгружаются.
Отправка данных на сервер через AJAX для постоянного хранения
LocalStorage подходит для одного устройства и браузера. Чтобы данные сохранялись между устройствами, нужно отправлять их на сервер.
В WordPress можно создать собственный AJAX-эндпоинт. Пример PHP-функции в functions.php:
add_action('wp_ajax_wpassist_save_form_data', 'wpassist_save_form_data');
add_action('wp_ajax_nopriv_wpassist_save_form_data', 'wpassist_save_form_data');
function wpassist_save_form_data() {
// Проверяем nonce для безопасности
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'wpassist_form_nonce')) {
wp_send_json_error('Неверный nonce');
}
// Обработка данных
$form_data = isset($_POST['form_data']) ? $_POST['form_data'] : array();
// Здесь можно сохранить данные в пользовательские мета или отдельную таблицу
$user_id = get_current_user_id();
if ($user_id) {
update_user_meta($user_id, 'wpassist_saved_form_data', $form_data);
wp_send_json_success('Данные сохранены');
} else {
wp_send_json_error('Пользователь не авторизован');
}
}JavaScript для отправки данных:
const saveFormDataWpassist = (form) => {
const formData = {};
for (let element of form.elements) {
if (element.name) {
formData[element.name] = element.value;
}
}
fetch(wpassist_ajax_object.ajax_url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
action: 'wpassist_save_form_data',
nonce: wpassist_ajax_object.nonce,
form_data: JSON.stringify(formData),
}),
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('Данные формы успешно сохранены');
} else {
console.error('Ошибка сохранения данных:', data.data);
}
})
.catch(error => {
console.error('Ошибка AJAX:', error);
});
};
// Пример вызова при изменении
form.addEventListener('input', () => saveFormDataWpassist(form));Для работы данного кода нужно добавить локализацию скрипта в functions.php:
wp_localize_script('your-script-handle', 'wpassist_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpassist_form_nonce'),
));Плагины для автоматического сохранения форм в WordPress
Если вы не хотите писать код с нуля, можно использовать готовые решения.
1. WPForms с функцией автосохранения
WPForms — популярный конструктор форм с поддержкой автосохранения данных пользователя. В настройках формы можно включить опцию сохранения черновика, что позволит пользователям возобновлять заполнение.
2. Fluent Forms
Fluent Forms поддерживает функцию автосохранения и восстановления формы при повторном посещении. Это удобно для длинных форм с большим количеством полей.
3. Formidable Forms
Плагин предоставляет расширенные возможности для сохранения данных в процессе заполнения, а также интеграцию с пользовательскими мета WordPress.
Практические рекомендации по внедрению автосохранения
Для успешной реализации автоматического сохранения стоит учитывать несколько важных аспектов:
- Безопасность: обязательно используйте nonce и проверяйте права пользователя при сохранении на сервер;
- Объём данных: не сохраняйте избыточную информацию, ограничивайте размер передаваемых данных;
- Производительность: минимизируйте частоту AJAX-запросов, добавьте debounce или throttle для событий input;
- Совместимость: тестируйте работу с различными браузерами и плагинами, чтобы избежать конфликтов;
- Юзабилити: информируйте пользователя о статусе сохранения, показывайте индикаторы или сообщения об успешном сохранении.
Как восстановить данные формы после автосохранения
При загрузке страницы можно подгружать сохранённые данные из localStorage или получать их с сервера через AJAX и заполнять поля формы.
Пример восстановления данных из user meta для авторизованных пользователей (PHP):
function wpassist_prefill_form_data() {
$user_id = get_current_user_id();
if ($user_id) {
$saved_data = get_user_meta($user_id, 'wpassist_saved_form_data', true);
if ($saved_data) {
echo '<script>document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("#my-wpassist-form");
if (!form) return;
const data = ' . wp_json_encode($saved_data) . ';
for (let key in data) {
const field = form.elements.namedItem(key);
if (field) {
field.value = data[key];
}
}
});</script>';
}
}
}
add_action('wp_footer', 'wpassist_prefill_form_data');Таким образом, пользователь увидит свои ранее введённые данные и сможет продолжить заполнение без потерь.
Выводы и рекомендации
Автоматическое сохранение данных в формах WordPress — востребованная и полезная функция, которую можно реализовать как самостоятельно, так и с помощью плагинов. Основные шаги включают сохранение данных в localStorage для быстрого доступа и отправку на сервер для долгосрочного хранения. Важно уделить внимание безопасности, производительности и удобству для пользователя.
Для дополнительной оптимизации и комплексного управления формами рекомендуем ознакомиться с плагинами, например, WPForms или Fluent Forms, которые уже включают продвинутые функции автосохранения и восстановления данных.