Как создать динамические формы в WordPress с помощью плагинов и кода

Создание динамических форм в WordPress — одна из востребованных задач, особенно если вам нужно собрать данные пользователей с различными условиями и логикой. В этой статье мы подробно рассмотрим, как можно создавать такие формы, используя популярные плагины и дополняя их собственным кодом для расширения возможностей.

Почему стоит использовать динамические формы в WordPress

Статичные формы подходят для простых задач, но если вам нужно показывать или скрывать поля в зависимости от выбора пользователя, выполнять валидацию на лету или интегрировать форму с внешними сервисами, то динамические формы — ваш выбор. Они позволяют:

• Улучшить пользовательский опыт за счёт адаптивности;
• Собрать более точные и релевантные данные;
• Автоматизировать процессы сбора и обработки информации;
• Интегрировать логику бизнес-процессов прямо в форму.

В WordPress есть несколько плагинов, которые идеально подходят для создания таких форм.

Популярные плагины для создания динамических форм

1. Gravity Forms

Gravity Forms — мощный плагин с широким функционалом для создания сложных форм с условиями отображения, логикой и интеграциями. Он позволяет добавлять условные поля, настраивать уведомления и даже выполнять вычисления прямо в форме.

Для добавления условного поля достаточно в админке выбрать условие отображения. Например, показывать дополнительное поле, если пользователь выбрал определённый вариант в выпадающем списке.

2. WPForms

WPForms — удобный конструктор форм с поддержкой логики и динамического контента. В бесплатной версии функционал ограничен, но про-версия позволяет создавать формы с условным отображением полей и интеграциями с почтовыми сервисами.

3. Formidable Forms

Formidable Forms славится возможностью строить формы с продвинутыми вычислениями и отображать результаты на сайте. Отлично подходит для калькуляторов, опросов и других интерактивных элементов.

Создание динамической формы с помощью плагина WPForms

Рассмотрим простой пример с WPForms, как создать форму с условным отображением поля.

1. Установите и активируйте WPForms.
2. Создайте новую форму, выбрав шаблон «Simple Contact Form».
3. Добавьте поле «Выпадающий список» с вопросом, например: «Выберите тип обращения».
4. Добавьте дополнительное текстовое поле, которое будет показываться только если выбран определённый тип обращения.
5. В настройках поля укажите условие отображения: показывать, если выпадающий список равен нужному значению.

Таким образом, вы получите простую динамическую форму без программирования.

Расширение функционала динамической формы через код

Иногда стандартных возможностей плагинов недостаточно. Тогда можно добавить кастомный код. Рассмотрим пример, как с помощью хука WPForms добавить кастомную валидацию.

add_filter('wpforms_process_validate_wpeditor', 'wpeditor_custom_validation', 10, 3); function wpeditor_custom_validation($fields, $entry, $form_data) {    foreach ($fields as $key => $field) {        if ($field['name'] == 'email' && !filter_var($field['value'], FILTER_VALIDATE_EMAIL)) {            wpforms()->process->errors[$form_data['id']][$key] = 'Введите корректный email';        }    }    return $fields;}

В этом коде мы добавляем проверку email поля в форме с ID "wpeditor". Если email невалидный, пользователь увидит ошибку.

Создание собственной динамической формы с помощью PHP и AJAX

Если нужно создать форму с уникальной логикой, можно написать собственный код. Пример простой формы с динамическим обновлением списка городов в зависимости от выбранной страны.

HTML и форма

<form id="wpeditor_dynamic_form">  <label for="country">Страна:</label>  <select id="country" name="country">    <option value="ru">Россия</option>    <option value="ua">Украина</option>  </select>  <label for="city">Город:</label>  <select id="city" name="city"></select>  <input type="submit" value="Отправить" /></form>

JavaScript для динамического обновления

document.getElementById('country').addEventListener('change', function() {  var country = this.value;  var citySelect = document.getElementById('city');  citySelect.innerHTML = '';  var cities = {    ru: ['Москва', 'Санкт-Петербург', 'Казань'],    ua: ['Киев', 'Харьков', 'Одесса']  };  cities[country].forEach(function(city) {    var option = document.createElement('option');    option.value = city.toLowerCase();    option.text = city;    citySelect.add(option);  });});  document.getElementById('country').dispatchEvent(new Event('change'));

Этот скрипт обновляет список городов при изменении страны. Такой подход можно расширить, отправляя AJAX-запросы на сервер для получения данных из базы.

Обработка данных на сервере в WordPress

Для приёма данных и обработки можно использовать AJAX в WordPress. Пример регистрации AJAX-обработчика:

add_action('wp_ajax_wpeditor_submit_form', 'wpeditor_handle_form'); add_action('wp_ajax_nopriv_wpeditor_submit_form', 'wpeditor_handle_form'); function wpeditor_handle_form() {    $country = sanitize_text_field($_POST['country']);    $city = sanitize_text_field($_POST['city']);    // Обработка данных, например, сохранить в базу или отправить email    wp_send_json_success(['message' => 'Данные успешно получены']);}

Не забудьте подключить JavaScript с правильным AJAX URL и nonce для безопасности.

Советы по оптимизации и безопасности динамических форм

При создании динамических форм важно учитывать безопасность и производительность:

• Обязательно используйте sanitize_text_field и другие функции очистки данных;
• Используйте нонсы для защиты от CSRF;
• Минимизируйте количество запросов к серверу, кэшируйте данные, если возможно;
• Проверяйте данные на стороне сервера, даже если есть валидация на клиенте;
• Используйте HTTPS для защиты данных пользователей.

Правильное сочетание плагинов и собственного кода позволит вам создавать удобные, безопасные и функциональные динамические формы для любых задач на WordPress.