Динамические формы — это отличный способ повысить интерактивность сайта и улучшить опыт пользователей. В WordPress с помощью плагина WPForms можно создать базовые формы, но для создания динамических форм с изменяемыми полями и логикой потребуется добавить небольшой кастомный код. В этой статье разберём, как создавать динамические формы, которые меняют свои поля в зависимости от выбора пользователя, используя WPForms и собственные PHP- и JavaScript-скрипты.
Что такое динамические формы и зачем они нужны
Динамические формы — это формы, у которых поля появляются, исчезают или меняются в зависимости от действий пользователя. Например, если в форме заказа выбран определённый товар, то автоматически появляются дополнительные поля для выбора характеристик именно этого товара.
Это удобно, когда нужно собирать разные данные для разных случаев без перегрузки формы. Такой подход улучшает UX, сокращает количество ошибок и повышает конверсию.
В WordPress стандартные формы часто статичны. WPForms — популярный плагин для создания форм с визуальным конструктором, но нативно динамические поля реализованы ограниченно. Поэтому мы рассмотрим, как расширить WPForms для динамического поведения.
Обзор плагина WPForms для создания форм
WPForms — один из самых дружелюбных плагинов для создания любых форм в WordPress. В бесплатной версии можно создавать простые контактные формы, а в PRO доступны более мощные функции, включая условную логику.
Для динамических форм нам понадобится PRO-версия с поддержкой условных полей. Но даже с ней иногда нужно добавить кастомный код, чтобы добиться гибкости, например, загрузка данных из базы или изменение полей без перезагрузки страницы.
Для примера ниже предполагается, что у вас есть WPForms PRO, установленный и активированный на сайте.
Создание простой формы с условной логикой в WPForms
Для начала создадим простую форму с условным отображением полей:
- В админке WordPress перейдите в WPForms > Add New.
- Выберите шаблон «Blank Form».
- Добавьте поле «Dropdown» (выпадающий список) с названием «Выберите тип запроса».
- Добавьте несколько полей с дополнительными вопросами, например, «Введите детали запроса».
- В настройках каждого дополнительного поля задайте условие отображения — показывать только если выбран определённый тип запроса.
Это базовый способ сделать форму динамической. Но что если вариантов слишком много и вы хотите загружать поля динамически из базы или API? Тогда поможет следующий раздел.
Добавление динамических полей с помощью кастомного кода
Допустим, у нас есть список категорий товаров, и для каждой категории нужно показать особые поля. Мы хотим, чтобы при выборе категории в форме появлялись соответствующие поля без перезагрузки страницы.
Шаг 1. Добавляем в форму основной селект
Создайте форму с одним выпадающим списком, например, с ID поля 1.
Шаг 2. Подключаем скрипт для динамической подгрузки полей
Добавим JavaScript, который будет отслеживать изменение селекта и подгружать дополнительные поля через AJAX.
function wpwebsite_enqueue_dynamic_form_scripts() {
wp_enqueue_script('wpwebsite-dynamic-form', get_stylesheet_directory_uri() . '/js/dynamic-form.js', array('jquery'), null, true);
wp_localize_script('wpwebsite-dynamic-form', 'wpwebsite_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpwebsite_dynamic_form_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpwebsite_enqueue_dynamic_form_scripts');В файле dynamic-form.js напишем обработчик:
jQuery(document).ready(function($) {
$('#wpforms-1-field_1').on('change', function() {
var category = $(this).val();
$.ajax({
url: wpwebsite_ajax.ajax_url,
type: 'POST',
data: {
action: 'wpwebsite_load_dynamic_fields',
nonce: wpwebsite_ajax.nonce,
category: category
},
success: function(response) {
if (response.success) {
$('#dynamic-fields-container').html(response.data);
}
}
});
});
});Шаг 3. Создаём обработчик AJAX в PHP
В functions.php темы добавим функцию:
function wpwebsite_load_dynamic_fields_callback() {
check_ajax_referer('wpwebsite_dynamic_form_nonce', 'nonce');
$category = sanitize_text_field($_POST['category']);
// Пример: вернуть разные поля в зависимости от категории
$fields_html = '';
if ($category === 'books') {
$fields_html = '<label>Введите автора книги:</label><input type="text" name="author" />';
} elseif ($category === 'electronics') {
$fields_html = '<label>Выберите бренд:</label><select name="brand"><option>Sony</option><option>Samsung</option></select>';
} else {
$fields_html = '<p>Дополнительных полей нет</p>';
}
wp_send_json_success($fields_html);
}
add_action('wp_ajax_wpwebsite_load_dynamic_fields', 'wpwebsite_load_dynamic_fields_callback');
add_action('wp_ajax_nopriv_wpwebsite_load_dynamic_fields', 'wpwebsite_load_dynamic_fields_callback');Как интегрировать динамические поля в отправку формы WPForms
Чтобы данные из динамически добавленных полей попадали в email и сохранялись, нужно немного доработать обработчик отправки WPForms.
Добавим фильтр, который обработает дополнительные поля:
function wpwebsite_wpforms_process_dynamic_fields($fields, $entry, $form_data) {
// Получаем данные из $_POST
if (!empty($_POST['author'])) {
$fields['author'] = sanitize_text_field($_POST['author']);
}
if (!empty($_POST['brand'])) {
$fields['brand'] = sanitize_text_field($_POST['brand']);
}
return $fields;
}
add_filter('wpforms_process_filter', 'wpwebsite_wpforms_process_dynamic_fields', 10, 3);Теперь динамические поля попадут в массив данных формы и будут отображаться в уведомлениях.
Дополнительные советы по работе с динамическими формами
Используйте Clearfy Pro для оптимизации работы форм
Плагин Clearfy Pro поможет оптимизировать загрузку скриптов и убрать лишний код, что особенно важно при использовании AJAX и динамических форм.
Тестируйте работу форм на разных устройствах
Проверьте, что динамические поля корректно отображаются и работают на мобильных и планшетах. Часто JavaScript ведёт себя по-разному, и нужно подстраиваться под особенности браузеров.
Обеспечьте защиту от спама
Для динамических форм рекомендуем использовать встроенные возможности WPForms или дополнительные плагины, чтобы избежать спам-отправок через AJAX.
Заключение
Создание динамических форм в WordPress с помощью WPForms и кастомного кода — задача вполне решаемая. В статье мы рассмотрели, как подключить JavaScript для динамического изменения формы, как обрабатывать AJAX-запросы в PHP и интегрировать данные в WPForms. Такой подход позволяет создавать гибкие и удобные формы для любых задач.
Для более сложных сценариев можно использовать REST API WordPress или расширять функциональность плагина WPForms дополнительными хуками. Если хотите попробовать WPForms PRO, рекомендуем ознакомиться с ними на официальном сайте.