Автоматическое заполнение форм — это удобная функциональность, которая значительно улучшает пользовательский опыт на сайте. В WordPress это можно реализовать несколькими способами: с помощью плагинов, кастомного кода или сочетания этих методов. В этой статье разберём, как добавить автоматическое заполнение формы на примере пользовательских полей и контактных форм, а также рассмотрим практические примеры кода и полезные плагины.
Зачем нужно автоматическое заполнение форм в WordPress
Автозаполнение форм помогает:
- Ускорить процесс заполнения формы пользователем — особенно если форма большая.
- Снизить количество ошибок при вводе данных.
- Повысить конверсию за счёт улучшения UX.
- Сохранить данные пользователя для повторного использования.
Например, если пользователь уже регистрировался или авторизовался, можно автоматически подставлять его имя, email или другие данные.
Использование плагинов для автоматического заполнения форм
Для большинства сайтов проще всего использовать готовые решения. Вот несколько популярных плагинов, которые поддерживают автозаполнение:
1. Contact Form 7 + Flamingo + автозаполнение
Contact Form 7 — один из самых популярных плагинов для форм. Он не поддерживает автозаполнение из коробки, но можно реализовать это через JavaScript или использовать дополнительные расширения.
Пример простого автозаполнения с использованием локального хранилища браузера:
document.addEventListener('DOMContentLoaded', function() {
const emailField = document.querySelector('input[name="your-email"]');
if (!emailField) return;
// Заполняем поле, если в localStorage есть email
const savedEmail = localStorage.getItem('wpfront_email');
if (savedEmail) {
emailField.value = savedEmail;
}
// Сохраняем email при изменении
emailField.addEventListener('input', function() {
localStorage.setItem('wpfront_email', emailField.value);
});
});Вы можете добавить этот код в файл темы или через плагин для пользовательских скриптов.
2. WPForms
WPForms поддерживает автозаполнение полей для зарегистрированных пользователей автоматически. Также можно настроить сохранение и предварительное заполнение данных.
Для реализации автозаполнения в WPForms достаточно использовать встроенную функцию «Populate Fields Dynamically» и указать параметры, например:
add_filter('wpforms_field_value_name', 'wpfront_wpforms_populate_name');
function wpfront_wpforms_populate_name($value) {
if (is_user_logged_in()) {
$current_user = wp_get_current_user();
return $current_user->display_name;
}
return $value;
}Реализация автозаполнения форм с помощью пользовательского кода
Если нужно более гибкое или специфичное автозаполнение, можно написать собственный код. Например, добавим автозаполнение для пользовательской формы, которая выводится в шаблоне:
<form method="post" action="" id="wpfront-autofill-form">
<label for="name">Имя:</label>
<input type="text" name="name" id="name" value="<?php echo esc_attr(wpfront_get_autofill_value('name')); ?>" />
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="<?php echo esc_attr(wpfront_get_autofill_value('email')); ?>" />
<input type="submit" value="Отправить" />
</form>Для этого создадим функцию wpfront_get_autofill_value, которая будет возвращать значение из сессии, куки или текущего пользователя:
function wpfront_get_autofill_value($field) {
if (is_user_logged_in()) {
$user = wp_get_current_user();
switch ($field) {
case 'name':
return $user->display_name;
case 'email':
return $user->user_email;
}
}
if (isset($_COOKIE['wpfront_form_'.$field])) {
return sanitize_text_field($_COOKIE['wpfront_form_'.$field]);
}
return '';
}Также добавим сохранение значений полей в куки при отправке формы:
add_action('init', 'wpfront_save_autofill_cookies');
function wpfront_save_autofill_cookies() {
if (!empty($_POST['name'])) {
setcookie('wpfront_form_name', sanitize_text_field($_POST['name']), time() + 30 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
}
if (!empty($_POST['email'])) {
setcookie('wpfront_form_email', sanitize_email($_POST['email']), time() + 30 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
}
}Автоматическое заполнение форм с помощью AJAX и REST API
Для сложных форм и динамического наполнения данных можно использовать AJAX и REST API WordPress. Например, при вводе имени пользователя подгружать дополнительные данные.
Пример AJAX-запроса для автозаполнения адреса пользователя:
jQuery(document).ready(function($) {
$('#username').on('change', function() {
var username = $(this).val();
$.ajax({
url: wpfront_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'wpfront_get_user_address',
username: username
},
success: function(response) {
if(response.success) {
$('#address').val(response.data.address);
}
}
});
});
});PHP-обработчик для этого запроса:
add_action('wp_ajax_wpfront_get_user_address', 'wpfront_get_user_address_callback');
add_action('wp_ajax_nopriv_wpfront_get_user_address', 'wpfront_get_user_address_callback');
function wpfront_get_user_address_callback() {
if (empty($_POST['username'])) {
wp_send_json_error('Username required');
}
$user = get_user_by('login', sanitize_text_field($_POST['username']));
if (!$user) {
wp_send_json_error('User not found');
}
$address = get_user_meta($user->ID, 'address', true);
wp_send_json_success(['address' => $address]);
}Рекомендации по безопасности и производительности
При реализации автозаполнения форм важно учитывать безопасность:
- Обязательно фильтруйте и валидируйте все данные, получаемые из пользовательского ввода и куки.
- При работе с AJAX и REST API проверяйте права доступа и nonce для предотвращения CSRF-атак.
- Не храните в куки или локальном хранилище конфиденциальные данные без шифрования.
Также учитывайте производительность — не перегружайте страницу и сервер лишними запросами. Используйте кэширование данных, если это возможно.
Заключение
Автоматическое заполнение форм в WordPress — полезная функция, которую можно реализовать разными способами: от простого JavaScript до сложных AJAX-решений с REST API. Использование плагинов упрощает задачу, но кастомные решения позволяют гибко настраивать функциональность под конкретные задачи.
Если хотите быстро добавить автозаполнение в формы Contact Form 7, попробуйте добавить предложенный JavaScript-код. Для более интегрированных форм рассмотрите WPForms с динамическим заполнением полей через фильтры. А для сложной логики используйте AJAX и свой REST API.
Полезные ссылки: