WPForms и WooCommerce: как сделать одну форму для разных товаров с динамическим заполнением

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

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

WPForms из коробки не умеет автоматически подгружать данные из WooCommerce в поля формы, и создавать по одному варианту формы на каждый товар неудобно. В этой статье покажем, как решить задачу через динамическую подстановку значений в поля формы с помощью GET-параметров и хука wpforms_process_before.

Диагностика: почему стандартный подход не работает

Стандартный метод вставки формы WPForms в страницу товара не учитывает свойства товара. Если вставить форму через шорткод [wpforms id="123"] на страницу товара, то форма будет одинаковой для всех товаров. Это неудобно, если нужно менять, например, список вариантов в выпадающем поле или скрытые поля с ID товара.

Попытка динамически менять значения через JavaScript после загрузки формы часто ломается из-за кеширования и особенностей AJAX-отправки WPForms. Кроме того, без серверных изменений сложно контролировать валидацию и отправку.

Пошаговое решение: динамическая форма WPForms для разных товаров WooCommerce

1. Добавляем GET-параметры к URL товара для передачи ID и других данных

Для передачи данных в форму удобно использовать GET-параметры. Например, на странице товара добавим ссылку на форму со ссылкой вида:

https://example.com/forma?product_id=123&product_name=T-Shirt+Blue

Или сделаем кнопку «Заполнить форму» с таким URL.

2. Создаем форму WPForms с нужными полями и идентификаторами

В админке WPForms создаем форму с полями:

• Скрытое поле с ID product_id (для передачи ID товара)
• Текстовое или выпадающее поле product_name (для вывода названия товара)
• Дополнительные поля для сбора данных

Обязательно задайте для этих полей CSS-классы или ID, чтобы удобно работать с ними в PHP.

3. Используем хук wpforms_process_before для подстановки значений из GET в поля формы

Добавим следующий код в файл functions.php вашей темы или в кастомный плагин:

add_action('wpforms_process_before', function($fields, $entry, $form_data) {
    if (!empty($_GET['product_id'])) {
        foreach ($fields as &$field) {
            // Подставляем product_id в скрытое поле
            if ($field['name'] === 'product_id') {
                $field['value'] = sanitize_text_field($_GET['product_id']);
            }
            // Подставляем product_name в текстовое поле
            if ($field['name'] === 'product_name' && !empty($_GET['product_name'])) {
                $field['value'] = sanitize_text_field($_GET['product_name']);
            }
        }
    }
    return $fields;
}, 10, 3);

Этот код берет значения из URL и автоматически подставляет их в поля формы перед обработкой.

4. Выводим форму на странице с параметрами

В шаблоне страницы или в редакторе создайте ссылку на форму с параметрами товара, например:

<a href="https://example.com/forma?product_id=123&product_name=T-Shirt+Blue">Заполнить форму для T-Shirt Blue</a>

Или вставьте форму на отдельную страницу, которая принимает параметры.

5. (Опционально) Меняем содержимое формы динамически в зависимости от товара

Если нужно подменить варианты в выпадающем списке, можно использовать PHP и JavaScript в связке. Например, через хук wpforms_frontend_output добавить скрипт, который меняет опции в зависимости от product_id.

Проверка результата после внедрения

• Откройте страницу формы с GET-параметрами, например ?product_id=123&product_name=T-Shirt+Blue.
• Проверьте, что скрытое поле product_id содержит значение 123.
• Проверьте, что поле product_name заполнено текстом T-Shirt Blue.
• Отправьте форму и убедитесь, что в админке WPForms в ответах эти данные отображаются корректно.

Частые ошибки и как их исправить

• Поля не заполняются значениями из GET — проверьте, что имена полей (name в настройках WPForms) совпадают с именами в коде и что хук подключен правильно.
• Форма не отображается или не принимает данные — убедитесь, что в коде нет синтаксических ошибок, и что файл с кодом загружен (например, functions.php темы активен).
• Данные не сохраняются в ответах WPForms — проверьте, что подстановка значений происходит до сохранения, то есть в хуке wpforms_process_before, а не позже.
• Проблемы с безопасностью — всегда используйте функции очистки данных (sanitize_text_field и др.) при работе с внешними данными.

Практические советы по безопасности и производительности

• Для защиты от подделок данных используйте nonce WPForms или проверяйте реферер.
• Не передавайте чувствительные данные в URL GET-параметрами — лучше использовать сессии или POST.
• Минимизируйте количество полей, которые заполняете динамически, чтобы не усложнять логику валидации.
• Если форма становится слишком тяжелой из-за динамики, рассмотрите кэширование страниц без параметров и отключение кэша для URL с GET-параметрами.

Сравнение вариантов реализации динамической формы WPForms для WooCommerce

Метод	Плюсы	Минусы	Пример кода
GET-параметры + wpforms_process_before	Простота, серверная подстановка, надежность	Данные видны в URL, возможны проблемы с безопасностью	Пример из статьи выше
JavaScript динамическая подмена полей	Гибкость, можно менять UI на лету	Зависимость от клиента, проблемы с кешем, сложность поддержки	Использование wpforms_frontend_output для вставки скриптов
Множество форм под каждый товар	Максимальная простота без кода	Сложность администрирования, дублирование форм	Создание форм в админке WPForms