Создать динамические формы в Elementor с помощью WPForms

В этой статье мы разберёмся, как создать динамические формы в WordPress с помощью конструктора Elementor и плагина WPForms. Динамические формы полезны, когда нужно подстраивать поля или содержимое формы в зависимости от контекста страницы, пользователя или других параметров. Это актуально для сбора более релевантных данных и улучшения пользовательского опыта.

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

WPForms — один из самых популярных и удобных плагинов для создания форм в WordPress. Его преимущества:

• Интуитивный визуальный конструктор;
• Поддержка различных типов полей и логики;
• Возможность интеграции с Elementor через шорткоды;
• Расширяемость через фильтры и хуки для более сложных сценариев.

Elementor позволяет легко вставлять формы WPForms на страницы, используя виджет «HTML» или «Шорткод». Но чтобы форма была динамической, потребуется немного кода.

Подготовка: создание базовой формы в WPForms

Первым делом создайте простую форму в WPForms. Например, форму обратной связи с полями Имя, Email и Сообщение:

• Перейдите в WPForms → Добавить новую;
• Выберите шаблон «Простая контактная форма»;
• Добавьте или удалите поля по необходимости;
• Сохраните форму и запомните её ID.

Далее эту форму мы будем выводить динамически в Elementor.

Динамическое изменение полей формы с помощью фильтров WPForms

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

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

function wpelementor_modify_wpforms_fields($fields, $form_data) {
    // Проверяем ID формы, чтобы не влиять на все
    if ($form_data['id'] !== 123) { // замените 123 на ID вашей формы
        return $fields;
    }

    // Получаем текущий URL страницы
    $current_url = esc_url_raw($_SERVER['REQUEST_URI']);

    // Добавим скрытое поле с URL страницы
    $fields['page_url'] = [
        'id' => 'page_url',
        'type' => 'hidden',
        'label' => 'URL страницы',
        'value' => $current_url,
    ];

    // Изменим подпись поля "Сообщение"
    if (isset($fields['message'])) {
        $fields['message']['label'] = 'Ваш вопрос или комментарий для ' . get_bloginfo('name');
    }

    return $fields;
}
add_filter('wpforms_fields_show', 'wpelementor_modify_wpforms_fields', 10, 2);

В этом примере мы добавляем скрытое поле, которое будет содержать URL текущей страницы. Такой подход полезен для аналитики и понимания, с какой страницы была отправлена форма.

Вставка динамической формы в Elementor

Чтобы вывести форму WPForms в Elementor, используйте виджет «Шорткод» и вставьте шорткод формы, например:

[wpforms id="123"]

Благодаря коду выше, форма автоматически изменит поля в зависимости от страницы, где она выводится.

Добавление условной логики в формы WPForms

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

function wpelementor_wpforms_conditionals($fields, $form_data) {
    if ($form_data['id'] !== 123) {
        return $fields;
    }

    if (!is_user_logged_in()) {
        // Убираем поле "Телефон"
        if (isset($fields['phone'])) {
            unset($fields['phone']);
        }
    }

    return $fields;
}
add_filter('wpforms_fields_show', 'wpelementor_wpforms_conditionals', 20, 2);

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

Использование динамических данных из пользовательских полей и URL

Еще одна частая задача — подставлять в форму данные из URL параметров или пользовательских мета-полей.

Например, если у вас есть параметр ?ref=partner в URL, можно автоматически заполнить скрытое поле:

function wpelementor_prefill_wpforms_fields($fields, $form_data) {
    if ($form_data['id'] !== 123) {
        return $fields;
    }

    $ref = isset($_GET['ref']) ? sanitize_text_field($_GET['ref']) : '';
    if ($ref) {
        $fields['referral'] = [
            'id' => 'referral',
            'type' => 'hidden',
            'label' => 'Партнер',
            'value' => $ref,
        ];
    }

    return $fields;
}
add_filter('wpforms_fields_show', 'wpelementor_prefill_wpforms_fields', 15, 2);

Также можно подставлять данные из мета-полей текущего пользователя, если нужно персонализировать форму.

Пример использования плагина WPForms с WPShop

Если вы используете темы или плагины от WPSHOP, например тему Reboot или плагин Expert Review, динамические формы можно интегрировать для сбора отзывов или заявок. WPForms легко встраивается в страницы, созданные с Elementor.

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

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

• Всегда используйте функции WordPress для очистки и проверки данных, например sanitize_text_field и esc_url_raw;
• Не выводите пользовательские данные напрямую без проверки;
• Тестируйте формы на разных страницах и состояниях пользователя;
• Обрабатывайте ошибки и показывайте пользователю понятные сообщения.

Также следите за производительностью, особенно если форма содержит сложную логику или большой набор полей.