WordPress Elementor Form Submit Overlay

functions.php

<?php
// Adds a custom loading overlay for Elementor forms
function custom_elementor_loading_overlay() {
    // Only execute on front-end (not in admin panel)
    if (!is_admin()) {
        // Enqueue jQuery
        wp_enqueue_script('jquery');
        ?>
        <style type="text/css">
            /* Main overlay styles remain unchanged */
            .loading-overlay { 
                display: none; 
                position: fixed; 
                top: 0; 
                left: 0; 
                width: 100%; 
                min-height: 100vh; 
                background: rgba(0, 0, 0, 0.5); 
                backdrop-filter: blur(5px); 
                z-index: 9999; 
                justify-content: center; 
                align-items: center; 
                opacity: 0; 
                transition: opacity 0.3s ease; 
                pointer-events: none; 
            }
            .loading-overlay.visible { 
                display: flex; 
                opacity: 1; 
                pointer-events: auto; 
            }
            
            /* --- NEW: Styles for the message and loader --- */
            .loading-message {
                display: flex; /* Aligns icon and text side by side */
                align-items: center; /* Vertically centers icon with text */
                background: #fff;
                padding: 20px 30px;
                border-radius: 8px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                font-size: 18px;
                font-family: Arial, sans-serif;
                color: #333;
                text-align: center;
                max-width: 90%;
                box-sizing: border-box;
            }

            /* Loader (spinner) icon */
            .loader {
                width: 24px; /* Spinner size */
                height: 24px;
                border: 3px solid #f3f3f3; /* Base circle color */
                border-top: 3px solid #3498db; /* Color of spinning part */
                border-radius: 50%;
                margin-right: 15px; /* Space between spinner and text */
                animation: spin 1s linear infinite; /* Rotation animation */
            }

            /* Animation for spinning loader */
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // --- NEW: HTML for message now includes loader div ---
                if ($('.loading-overlay').length === 0) {
                    $('body').append('<div class="loading-overlay"><div class="loading-message"><div class="loader"></div><span>The form is being submitted. Please wait a moment...</span></div></div>');
                }
                var $overlay = $('.loading-overlay');

                var $form = $('form.elementor-form');
                if ($form.length === 0) {
                    return;
                }
                
                // Function to show the overlay
                function showOverlay() { 
                    if (!$overlay.hasClass('visible')) { 
                        $overlay.addClass('visible'); 
                    } 
                }
                // Function to hide the overlay
                function hideOverlay() { 
                    if ($overlay.hasClass('visible')) { 
                        $overlay.removeClass('visible'); 
                    } 
                }

                // Show overlay when submit button is clicked and form is valid
                $form.find('button[type="submit"]').on('click', function() {
                    if ($form[0].checkValidity()) {
                        showOverlay();
                    }
                });

                // Observe form container for changes
                var formWrapper = $form.closest('.elementor-widget-container')[0];
                if (formWrapper) {
                    var observer = new MutationObserver(function(mutations) {
                        var hasElementorErrors = $(formWrapper).find('form').hasClass('elementor-has-errors');
                        var successVisible = $(formWrapper).find('.elementor-message-success').is(':visible');
                        var errorVisible = $(formWrapper).find('.elementor-message-danger').is(':visible');
                        if (hasElementorErrors || successVisible || errorVisible) {
                            hideOverlay();
                        }
                    });
                    observer.observe(formWrapper, { attributes: true, childList: true, subtree: true });
                }
                
                // Hide overlay after AJAX form submission completes
                $(document).ajaxComplete(function(event, xhr, settings) {
                    if (settings.url && settings.url.includes('elementor-pro/v2/forms/submit')) {
                        setTimeout(hideOverlay, 150);
                    }
                });
            });
        </script>
        <?php
    }
}
// Hook the function to wp_footer
add_action('wp_footer', 'custom_elementor_loading_overlay');
?>