Динамические формы в WordPress — это мощный инструмент для сбора информации, проведения опросов и взаимодействия с пользователями. В отличие от статичных форм, динамические формы могут изменяться в зависимости от действий пользователя, условий, данных из базы и других факторов. В этой статье мы разберём, как создавать такие формы с помощью популярных плагинов и собственного кода, а также рассмотрим примеры их практического применения.
Почему важны динамические формы в WordPress
Статичные формы часто не покрывают все потребности сайта, особенно если требуется адаптация к ответам пользователя или к условиям. Динамические формы позволяют:
- Показывать или скрывать поля в зависимости от предыдущих ответов;
- Изменять содержание формы без перезагрузки страницы;
- Интегрироваться с внешними API для подгрузки данных;
- Повышать удобство и конверсию за счёт интерактивности.
Для реализации таких функций в WordPress можно использовать как плагины, так и кастомный код с использованием AJAX, хуков и фильтров.
Популярные плагины для создания динамических форм
1. Gravity Forms
Gravity Forms — один из самых мощных и гибких плагинов для создания форм. Он поддерживает условную логику, позволяющую показывать или скрывать поля в зависимости от ответов пользователя. Также есть возможность создавать многостраничные формы, загружать файлы и интегрировать формы с внешними сервисами.
Чтобы включить условную логику в Gravity Forms, нужно при редактировании поля активировать опцию «Enable Conditional Logic» и настроить правила отображения.
2. WPForms
WPForms предлагает удобный конструктор форм с поддержкой условной логики в Pro-версии. Например, вы можете настроить форму так, чтобы дополнительные поля появлялись только при выборе определённого варианта в выпадающем списке.
Плагин поддерживает AJAX-подгрузку, что улучшает пользовательский опыт.
3. Formidable Forms
Этот плагин выделяется возможностью создавать сложные формы с вычислениями, динамическим заполнением полей из базы данных и интеграцией с внешними источниками. Поддерживает создание форм с несколькими шагами и условной логикой.
Пример создания динамической формы с условной логикой в WPForms
Рассмотрим простой пример, где поле для ввода номера телефона отображается только если пользователь выбрал в выпадающем списке «Связаться по телефону».
1. Создайте форму в WPForms и добавьте поле «Выпадающий список» с вариантами «Связаться по почте» и «Связаться по телефону».
2. Добавьте поле «Номер телефона» и в его настройках активируйте условную логику:
- Показывать это поле, если «Выпадающий список» равно «Связаться по телефону».
3. Опубликуйте форму на странице. Теперь поле номера телефона появится только при выборе соответствующего варианта.
Создание динамической формы с помощью собственного кода в WordPress
Если вы хотите иметь полный контроль над формой и её поведением, можно создать динамическую форму с AJAX-подгрузкой. Ниже пример создания простой формы с полем, которое меняется в зависимости от выбора пользователя.
Шаг 1. Добавляем шорткод для формы
function wplinkru_dynamic_form_shortcode() {
ob_start();
?>
<form id="wplinkru-dynamic-form">
<label for="contact_method">Как с вами связаться?</label>
<select id="contact_method" name="contact_method">
<option value="email">По Email</option>
<option value="phone">По телефону</option>
</select>
<div id="dynamic-field"></div>
<input type="submit" value="Отправить">
</form>
<script>
document.getElementById('contact_method').addEventListener('change', function() {
var dynamicField = document.getElementById('dynamic-field');
if(this.value === 'phone') {
dynamicField.innerHTML = '<label for="phone_number">Номер телефона:</label><input type="text" id="phone_number" name="phone_number" required />';
} else {
dynamicField.innerHTML = '<label for="email_address">Email:</label><input type="email" id="email_address" name="email_address" required />';
}
});
// Инициализация поля при загрузке
document.getElementById('contact_method').dispatchEvent(new Event('change'));
</script>
<?php
return ob_get_clean();
}
add_shortcode('wplinkru_dynamic_form', 'wplinkru_dynamic_form_shortcode');Этот код создаёт форму с выпадающим списком и динамически меняющимся полем ввода.
Шаг 2. Обработка данных формы через AJAX
Чтобы обработать данные без перезагрузки страницы, добавим AJAX-обработчик.
function wplinkru_handle_dynamic_form() {
// Проверяем nonce и права доступа при необходимости
$contact_method = sanitize_text_field($_POST['contact_method'] ?? '');
$response = [];
if($contact_method === 'phone') {
$phone = sanitize_text_field($_POST['phone_number'] ?? '');
if(empty($phone)) {
$response['error'] = 'Пожалуйста, укажите номер телефона.';
} else {
$response['success'] = 'Спасибо! Мы свяжемся с вами по телефону: ' . esc_html($phone);
}
} else {
$email = sanitize_email($_POST['email_address'] ?? '');
if(!is_email($email)) {
$response['error'] = 'Пожалуйста, укажите корректный email.';
} else {
$response['success'] = 'Спасибо! Мы отправим письмо на: ' . esc_html($email);
}
}
wp_send_json($response);
}
add_action('wp_ajax_wplinkru_submit_form', 'wplinkru_handle_dynamic_form');
add_action('wp_ajax_nopriv_wplinkru_submit_form', 'wplinkru_handle_dynamic_form');Шаг 3. Добавляем AJAX-запрос в форму
document.getElementById('wplinkru-dynamic-form').addEventListener('submit', function(e) {
e.preventDefault();
var form = e.target;
var data = new FormData(form);
data.append('action', 'wplinkru_submit_form');
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
body: data
})
.then(response => response.json())
.then(json => {
if(json.error) {
alert(json.error);
} else {
alert(json.success);
form.reset();
document.getElementById('contact_method').dispatchEvent(new Event('change'));
}
});
});Так мы реализуем полноценную динамическую форму без плагинов, полностью контролируя и логику, и внешний вид, и обработку данных.
Использование плагина Clearfy Pro для оптимизации форм и безопасности
Плагин Clearfy Pro поможет защитить ваши формы от спама и повысить производительность сайта, отключая лишние скрипты и добавляя антиспам-функции без капчи, что улучшает пользовательский опыт при работе с динамическими формами.
Рекомендации по созданию удобных и эффективных динамических форм
При создании динамических форм важно помнить:
- Не перегружайте пользователя. Показывайте только необходимые поля.
- Используйте подсказки и валидацию. Это снизит ошибки при заполнении.
- Оптимизируйте загрузку. Загружайте скрипты и стили только на страницах с формами.
- Тестируйте на разных устройствах. Убедитесь, что динамика работает корректно.
Так вы сделаете формы не только функциональными, но и удобными для посетителей.
Заключение
Динамические формы — мощный инструмент для повышения интерактивности и сбора данных на сайте WordPress. Выбор между плагинами и собственным кодом зависит от ваших задач и навыков. Плагины, такие как Gravity Forms, WPForms и Formidable Forms, предлагают удобные решения с минимальными усилиями, а собственный код даёт полный контроль и гибкость. Используйте рекомендации из этой статьи, чтобы создавать удобные, эффективные и безопасные формы для вашего сайта.