Как создать popup в WordPress на основе отправки формы без перезагрузки

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

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

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

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

Выбор плагина для popup с поддержкой AJAX-форм

Для создания popup с формой и AJAX можно использовать готовые решения, например:

• My Popup — удобный плагин для создания popup с возможностью встроить формы и кастомный JavaScript.
• Clearfy Pro — оптимизация и расширение функционала, можно использовать для улучшения производительности popup.

Если вы хотите реализовать решение самостоятельно, ниже приведён пример кода с AJAX на WordPress.

Как реализовать AJAX-отправку формы в popup на WordPress — пример кода

Шаг 1. Создаём shortcode для popup с формой

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

function wppopup_rus_render_popup_form() {
    ob_start();
    ?>
    <div id="wppopup-form-container" style="display:none;">
        <form id="wppopup-form" method="post">
            <label for="wppopup-name">Имя:</label>
            <input type="text" id="wppopup-name" name="name" required />
            <br/>
            <label for="wppopup-email">Email:</label>
            <input type="email" id="wppopup-email" name="email" required />
            <br/>
            <input type="submit" value="Отправить" />
        </form>
        <div id="wppopup-message" style="margin-top:10px;color:green;"></div>
    </div>
    <button id="wppopup-open-btn">Открыть форму</button>
    <script>
    jQuery(document).ready(function($) {
        $('#wppopup-open-btn').click(function() {
            $('#wppopup-form-container').fadeIn();
        });
        $('#wppopup-form').submit(function(e) {
            e.preventDefault();
            var data = {
                action: 'wppopup_rus_submit_form',
                name: $('#wppopup-name').val(),
                email: $('#wppopup-email').val(),
                security: wppopup_rus_vars.nonce
            };
            $.post(wppopup_rus_vars.ajax_url, data, function(response) {
                if(response.success) {
                    $('#wppopup-message').text(response.data.message);
                    $('#wppopup-form')[0].reset();
                } else {
                    $('#wppopup-message').css('color', 'red').text(response.data.message);
                }
            });
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wppopup_form', 'wppopup_rus_render_popup_form');

Шаг 2. Обработка AJAX-запроса в WordPress

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

function wppopup_rus_handle_form() {
    check_ajax_referer('wppopup_rus_nonce', 'security');

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);

    if(empty($name) || empty($email) || !is_email($email)) {
        wp_send_json_error(['message' => 'Пожалуйста, заполните корректно все поля.']);
    }

    // Здесь можно добавить сохранение данных, отправку письма и т.д.

    wp_send_json_success(['message' => 'Спасибо, ваша заявка принята!']);
}
add_action('wp_ajax_wppopup_rus_submit_form', 'wppopup_rus_handle_form');
add_action('wp_ajax_nopriv_wppopup_rus_submit_form', 'wppopup_rus_handle_form');

Шаг 3. Подключение скриптов и локализация

Чтобы AJAX работал, необходимо подключить jQuery и локализовать скрипт с параметрами ajax_url и nonce. Добавьте в functions.php:

function wppopup_rus_enqueue_scripts() {
    wp_enqueue_script('jquery');

    wp_localize_script('jquery', 'wppopup_rus_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppopup_rus_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'wppopup_rus_enqueue_scripts');

Как расширить функционал popup с AJAX-формой

Добавление проверки по ролям пользователей

Если нужно показывать popup только неавторизованным или определённым ролям, можно использовать условные теги WordPress, например:

if(!is_user_logged_in()) {
    echo do_shortcode('[wppopup_form]');
}

Или добавить логику в JavaScript для проверки состояния.

Интеграция с плагинами для email-маркетинга

Для автоматической рассылки после отправки формы можно интегрировать AJAX-обработчик с API популярных сервисов. Например, с помощью WP Remark можно отправлять данные подписчиков напрямую в рассылку.

Добавление анимаций и стилей popup

Для улучшения визуального восприятия применяйте CSS-анимации или подключайте библиотеки, например animate.css. Также можно расширить JavaScript код для плавного открытия и закрытия окна, добавления затемнения фона и др.

Практические советы по отладке AJAX-форм в popup

При разработке могут возникать ошибки, связанные с AJAX-запросами. Вот несколько советов:

• Проверяйте правильность nonce и его актуальность.
• Используйте console.log в JavaScript для отладки данных перед отправкой.
• Просматривайте ответы сервера через вкладку Network в инструментах разработчика браузера.
• Для тестирования используйте разные роли пользователей и состояния авторизации.
• Убедитесь, что скрипты подключены корректно и нет конфликтов с другими плагинами.

Использование AJAX-форм в popup — отличный способ повысить интерактивность сайта, улучшить UX и увеличить конверсию. Реализовав описанный пример, вы получите гибкий инструмент, который можно адаптировать под любые задачи.