Как удалить popup после успешного отправленного формы с помощью AJAX в WordPress

Диагностика проблемы: почему popup не закрывается после отправки формы

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

Основные причины проблемы:

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

Пошаговое решение: закрытие popup после отправки формы через AJAX

1. Организация AJAX отправки формы

Для начала убедимся, что форма отправляется через AJAX без перезагрузки страницы. В качестве примера рассмотрим простую форму с идентификатором #my-popup-form и используем jQuery для отправки.

jQuery(document).ready(function($) {
    $('#my-popup-form').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: ajaxurl, // WordPress AJAX URL
            type: 'POST',
            data: formData + '&action=my_popup_form_submit',
            success: function(response) {
                if(response.success) {
                    // Закрываем popup
                    closePopup();
                    // Дополнительно можно показать сообщение об успехе
                    alert('Спасибо за отправку!');
                } else {
                    alert('Ошибка: ' + response.data);
                }
            },
            error: function() {
                alert('Ошибка при отправке формы. Попробуйте позже.');
            }
        });
    });
});

2. Реализация серверной части обработки AJAX запроса

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

add_action('wp_ajax_my_popup_form_submit', 'my_popup_form_submit_handler');
add_action('wp_ajax_nopriv_my_popup_form_submit', 'my_popup_form_submit_handler');

function my_popup_form_submit_handler() {
    // Валидация и обработка данных формы
    if (empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        wp_send_json_error('Некорректный email');
    }
    // Здесь логика сохранения или отправки письма
    // Пример: wp_mail(...)

    wp_send_json_success();
}

3. Функция закрытия popup

Реализация функции closePopup() зависит от того, как у вас организованы popup окна. Например, если вы используете кастомный popup с классом .popup-wrapper:

function closePopup() {
    jQuery('.popup-wrapper').fadeOut();
}

Если вы используете популярные плагины (например, Popup Maker, Elementor Popup), используйте их API для закрытия окна. Например, для Popup Maker:

function closePopup() {
    PUM.close();
}

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

После реализации:

• Откройте страницу с popup и заполните форму.
• Отправьте форму и убедитесь, что форма отправляется без перезагрузки.
• После успешной отправки popup закрывается автоматически.
• В консоли браузера нет JavaScript ошибок.
• Если есть сообщения об ошибках, проверьте логи сервера и консоль.

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

• AJAX запрос не отправляется: Проверьте, что в JS правильно указан ajaxurl. В админке WordPress он определён автоматически, а на фронтенде нужно добавить через wp_localize_script.
• Popup не закрывается: Убедитесь, что функция closePopup() соответствует вашей реализации popup и вызывается после успешного запроса.
• Ошибка в PHP обработчике: Проверьте, что данные валидируются и возвращается корректный JSON ответ через wp_send_json_success() или wp_send_json_error().
• Перезагрузка страницы после отправки: Убедитесь, что в JS есть e.preventDefault() при обработке формы.

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

• Добавьте проверку nonce для AJAX запроса, чтобы защититься от CSRF. В JS передавайте nonce, а в PHP проверяйте через check_ajax_referer().
• Не выводите подробные ошибки пользователям — логируйте их на сервере.
• Минимизируйте размер JS и используйте кеширование для ускорения загрузки.
• Если форма содержит файлы, используйте FormData и настройте обработку на сервере.

Чек-лист для корректного закрытия popup после AJAX отправки формы

1. Форма отправляется через AJAX без перезагрузки.
2. В JS обработчик события submit вызывает e.preventDefault().
3. AJAX запрос направлен на правильный URL (ajaxurl).
4. На сервере настроена обработка через wp_ajax_ хуки.
5. Сервер возвращает JSON с ключом success.
6. После успешного ответа вызывается функция закрытия popup.
7. Используется корректный метод закрытия для вашего popup (плагин/кастомный код).
8. Проверена работа с разными ролями пользователей и без авторизации (если применимо).
9. Использован nonce для безопасности AJAX вызова.
10. В консоли браузера нет ошибок.

Сравнение вариантов реализации закрытия popup после отправки формы