Как создать popup с динамическими формами в WordPress

Всплывающие окна (popup) с формами — отличный инструмент для сбора данных, подписок или обратной связи. Но часто возникает задача сделать форму внутри popup динамической — чтобы поля менялись в зависимости от контекста, пользователя или других параметров. В этой статье подробно разберём, как реализовать popup с динамическими формами в WordPress на практике.

Почему нужны динамические формы в popup WordPress

Статичная форма подходит не всегда. Например, вы хотите показывать разные поля для новых и зарегистрированных пользователей, или менять вопросы в зависимости от категории статьи. Динамическая форма повышает релевантность и увеличивает конверсию. Реализовать это можно несколькими способами, включая AJAX-запросы для подгрузки нужной формы без перезагрузки страницы.

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

Обзор плагинов для создания popup с динамическими формами

Для реализации динамического popup можно использовать готовые плагины с поддержкой AJAX и условной логики:

• My Popup — легкий плагин с возможностью подгружать контент по AJAX и менять форму в зависимости от условий. Отличается простотой настройки и высокой скоростью работы.
• Contact Form 7 + My Popup — классика для форм. Можно создавать форму в CF7, а затем динамически менять поля через JavaScript и AJAX в popup My Popup.
• Gravity Forms с помощью встроенных условий отображения и API позволяет создавать сложные формы, которые можно интегрировать в popup с помощью дополнительных скриптов.

Мы рассмотрим пример с My Popup и Contact Form 7, так как это универсальное и бесплатное решение, которое подходит большинству сайтов.

Создание динамического popup с формой — пошаговая инструкция

Шаг 1. Установка и настройка плагинов

Установите и активируйте плагины My Popup и Contact Form 7 из репозитория WordPress или с сайта wpshop.ru. После активации создайте базовую форму в Contact Form 7 с минимальным набором полей.

Шаг 2. Создание базового popup

В админке My Popup создайте новый popup и вставьте туда шорткод вашей формы CF7, например, [contact-form-7 id="123" title="Динамическая форма"]. На этом этапе popup будет показывать статичную форму.

Шаг 3. Добавление динамики с помощью JavaScript и AJAX

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

Например, допустим, мы хотим показывать дополнительное поле «Компания» только для пользователей с ролью «подписчик».

function wppopup_add_dynamic_fields() {
    if ( wp_popup_user_role() === 'subscriber' ) {
        echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            var form = document.querySelector(".wppopup-popup form.wpcf7-form");
            if (form && !document.getElementById("dynamic-company")) {
                var input = document.createElement("input");
                input.type = "text";
                input.name = "company";
                input.id = "dynamic-company";
                input.placeholder = "Компания";
                form.appendChild(input);
            }
        });
        </script>';
    }
}
add_action('wp_footer', 'wppopup_add_dynamic_fields');

function wp_popup_user_role() {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        return $user->roles ? $user->roles[0] : '';
    }
    return 'guest';
}

Этот код добавляет поле в форму, когда popup открыт, если пользователь с нужной ролью. Обратите внимание, что функция wp_popup_user_role() возвращает роль текущего пользователя.

Шаг 4. Использование AJAX для загрузки разных форм

Если нужна более сложная логика, например загрузка разных форм с сервера, можно использовать AJAX-запросы через WordPress API.

Пример AJAX обработчика в functions.php:

add_action('wp_ajax_wppopup_load_form', 'wppopup_load_form_callback');
add_action('wp_ajax_nopriv_wppopup_load_form', 'wppopup_load_form_callback');

function wppopup_load_form_callback() {
    $type = isset($_POST['form_type']) ? sanitize_text_field($_POST['form_type']) : '';
    if ($type === 'register') {
        echo do_shortcode('[contact-form-7 id="124" title="Форма регистрации"]');
    } elseif ($type === 'feedback') {
        echo do_shortcode('[contact-form-7 id="125" title="Форма обратной связи"]');
    } else {
        echo 'Форма не найдена';
    }
    wp_die();
}

И пример JavaScript для загрузки формы по клику:

document.querySelectorAll('.open-popup').forEach(function(button) {
    button.addEventListener('click', function() {
        var formType = this.getAttribute('data-form-type');
        var popupContent = document.querySelector('.wppopup-popup .popup-content');
        fetch(ajaxurl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            body: 'action=wppopup_load_form&form_type=' + formType
        })
        .then(response => response.text())
        .then(html => {
            popupContent.innerHTML = html;
            // Здесь можно инициализировать CF7 или другие скрипты
        });
    });
});

Как тестировать динамические формы в popup

Тестирование важно для проверки корректности динамического контента и совместимости с разными браузерами и устройствами. Вот несколько советов:

• Проверяйте, что поля появляются и исчезают в зависимости от условий (роль пользователя, URL, куки и др.).
• Тестируйте отправку формы и обработку ошибок, особенно если поля формируются динамически.
• Используйте консоль браузера для отладки JavaScript и AJAX-запросов.
• Проверяйте работу на мобильных устройствах — popup должен корректно отображаться и быть удобным.

Полезные советы и рекомендации

Для улучшения UX и производительности динамических popup форм учтите следующие моменты:

• Минимизируйте количество AJAX-запросов — загружайте форму один раз и меняйте только нужные поля.
• Используйте локальное кэширование для часто используемых форм.
• Обрабатывайте ошибки AJAX на клиенте, показывайте пользователю понятные сообщения.
• Если используете сторонние плагины, убедитесь в их совместимости с вашим решением.
• Для сложных условий рассмотрите использование плагинов с поддержкой условной логики, например Clearfy Pro.

Заключение

Создание popup с динамическими формами в WordPress — задача вполне выполнимая даже без глубоких знаний AJAX, если использовать правильные инструменты и подходы. Плагин My Popup вместе с Contact Form 7 позволяет быстро настроить базовые сценарии, а кастомный код расширит функциональность до любых требований.

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