Динамические формы — это мощный инструмент для сбора данных, который адаптируется под ответы пользователя, показывая или скрывая поля в зависимости от выбора. В WordPress одним из самых популярных плагинов для создания форм является WPForms. В этой статье подробно разберём, как создавать подобные динамические формы с помощью WPForms, а также рассмотрим примеры кода и полезные советы для разработчиков.
Что такое динамические формы и зачем они нужны в WordPress
Динамические формы позволяют улучшить взаимодействие с пользователем, делая формы более компактными и логичными. Вместо того чтобы показывать все поля сразу, мы можем показывать только те, которые релевантны ответам пользователя. Это снижает количество ошибок при заполнении, повышает конверсию и улучшает UX.
Например, если пользователь выбирает определённый тип услуги, можно автоматически показывать дополнительные поля, которые относятся только к этому типу, скрывая остальные.
Настройка WPForms для создания динамической логики
WPForms поддерживает условную логику, которая позволяет показывать или скрывать поля в зависимости от значений других полей. Вот как это сделать:
- Установите и активируйте плагин WPForms.
- Создайте новую форму и добавьте необходимые поля (например, выпадающий список, текстовые поля и т.д.).
- Для поля, которое должно отображаться динамически, включите условную логику. В редакторе формы найдите вкладку «Условная логика» и настройте правило, например: показывать поле, если «Тип услуги» равен «Консультация».
Таким образом, вы можете строить сложные формы с разветвлённой логикой, не прибегая к дополнительному коду.
Пример динамической формы с WPForms и пользовательским кодом
Иногда стандартных возможностей WPForms недостаточно. Например, нужно динамически подгружать данные в выпадающий список из базы данных или менять поведение формы по сложным правилам. Рассмотрим пример добавления кастомного фильтра для изменения опций поля select на лету.
Допустим, у нас есть кастомный тип записей «Проекты», и мы хотим, чтобы выпадающий список в форме показывал их список. Добавим следующий код в functions.php вашей темы или в плагин:
function wp7ru_wpforms_dynamic_project_options( $field, $form_data ) {
if ( $field['id'] == '5' && $field['type'] == 'select' ) { // замените 5 на ID вашего поля
$args = array(
'post_type' => 'project',
'posts_per_page' => -1,
'post_status' => 'publish'
);
$projects = get_posts( $args );
$choices = array();
foreach ( $projects as $project ) {
$choices[] = array(
'label' => $project->post_title,
'value' => $project->ID
);
}
$field['choices'] = $choices;
}
return $field;
}
add_filter( 'wpforms_fields_show', 'wp7ru_wpforms_dynamic_project_options', 10, 2 );Этот код динамически заменит опции поля select с ID 5 на заголовки всех опубликованных записей типа «project». Таким образом, список всегда актуален без ручного обновления формы.
Улучшение UX динамических форм с помощью AJAX
Для более плавной работы форм и отсутствия перезагрузки страницы удобно использовать AJAX. WPForms из коробки поддерживает AJAX-подачу, но можно расширить функционал, чтобы динамически менять поля без обновления формы.
Например, можно добавить скрипт, который при выборе значения в одном поле будет отправлять AJAX-запрос и подгружать данные в другое поле. Ниже пример простого jQuery кода, который слушает изменение поля с ID #wpforms-123-field_1 и обновляет поле #wpforms-123-field_2:
jQuery(document).ready(function($) {
$('#wpforms-123-field_1').on('change', function() {
var selected = $(this).val();
$.ajax({
url: wp7ru_ajax_object.ajax_url,
type: 'POST',
data: {
action: 'wp7ru_load_dynamic_options',
selected_value: selected
},
success: function(response) {
var options = '';
$.each(response.data, function(key, value) {
options += '<option value="' + key + '">' + value + '</option>';
});
$('#wpforms-123-field_2').html(options);
}
});
});
});И серверный обработчик в functions.php:
function wp7ru_load_dynamic_options_callback() {
$selected = sanitize_text_field( $_POST['selected_value'] );
// Пример логики: в зависимости от выбранного значения возвращаем разные опции
$options = array();
if ( $selected == 'option1' ) {
$options = array('sub1' => 'Подопция 1', 'sub2' => 'Подопция 2');
} elseif ( $selected == 'option2' ) {
$options = array('sub3' => 'Подопция 3', 'sub4' => 'Подопция 4');
}
wp_send_json_success( $options );
}
add_action( 'wp_ajax_wp7ru_load_dynamic_options', 'wp7ru_load_dynamic_options_callback' );
add_action( 'wp_ajax_nopriv_wp7ru_load_dynamic_options', 'wp7ru_load_dynamic_options_callback' );Для работы не забудьте локализовать скрипт, чтобы передать ajax_url:
function wp7ru_enqueue_scripts() {
wp_enqueue_script( 'wp7ru-dynamic-forms', get_template_directory_uri() . '/js/dynamic-forms.js', array('jquery'), null, true );
wp_localize_script( 'wp7ru-dynamic-forms', 'wp7ru_ajax_object', array(
'ajax_url' => admin_url( 'admin-ajax.php' )
) );
}
add_action( 'wp_enqueue_scripts', 'wp7ru_enqueue_scripts' );Советы по оптимизации и безопасности динамических форм
При работе с динамическими формами важно учитывать несколько моментов:
- Валидация данных: Все данные, отправляемые с форм, должны валидироваться и санитизироваться как на клиенте, так и на сервере.
- Ограничение доступа: Если данные загружаются через AJAX, учитывайте права пользователя, чтобы не раскрывать конфиденциальную информацию.
- Минимизация запросов: Избегайте лишних AJAX-запросов, кэшируйте данные, если это возможно.
- Оптимизация UX: Используйте индикаторы загрузки и понятные сообщения об ошибках.
WPForms уже включает базовые механизмы безопасности и валидации, но кастомный код требует дополнительного внимания.
Заключение
Создание динамических форм в WordPress с помощью WPForms — отличный способ повысить удобство и эффективность сбора данных. Используя встроенную условную логику и добавляя кастомные решения с помощью PHP и AJAX, можно построить формы любой сложности. Если вы хотите попробовать WPForms, скачайте плагин с официального сайта WPSHOP.