Form Submit Overlay?

Resolved stumur
(@stumur)

1 month, 2 weeks ago
Hey Ali,

Just a quick qn: Forms that have any sizeable attachments to them above just basic texts (as you know, mine have video, audio and image files attached that can total up to 120mb) obviously put a strain on servers when the form gets submitted. So – when I make a test submission, the SUBMIT button just spins for more than a minute before it (usually) presents the green SUCCESS prompt to show it got submitted successfully (I understand mine is probably taking ages due to generating a front-end post at the same time). But just displaying that slow spinning SUBMIT button on its own for up to a minute or more, throws doubt on the submission for the User, so they could shut the page before success or failure is reported due to uncertainty, or worse, click away and they’re gone. Either way, it’s not a good User experience for any website to have a free-spinning, doubt-enducing SUBMIT button running for up to a minute. Is it possible to create the option of a selectable overlay that pops up (of course after any red form error messages have been resolved and the submission then proceeds), stating a more positive flow like “APPLICATION SUBMITTED: Please wait for up to 1 minute. Do not close this window.”, that then hooks into the green SUCCESS message when it finally arrives and it then closes at that success point to display the green message? A spinning, indefinite SUBMIT button induces uncertainty, I think. I hope this isn’t asking too much. See image attachment for an example..
- This topic was modified 1 month, 2 weeks ago by stumur.
The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

(@alikhallad)

Hi Stu,

I wouldn’t want to add that globally in the plugin, because it changes the submit UX for every user, not just heavier forms like yours.

But for your site, yes, you can handle it with a small custom snippet instead.

Add this to your theme’s functions.php or a snippets plugin:

add_action('wp_footer', function () {
    if (!is_page('new-bands-full-sign-up')) {
        return;
    }
    ?>
    <style>
        #mform_19 {
            position: relative;
        }

        #mform_19 .mf-submit-overlay {
            display: none;
            position: absolute;
            inset: 0;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.92);
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }

        #mform_19 .mf-submit-overlay.is-visible {
            display: flex;
        }

        #mform_19 .mf-submit-overlay__box {
            max-width: 520px;
            padding: 24px 28px;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }

        #mform_19 .mf-submit-overlay__title {
            margin: 0 0 10px;
            font-size: 20px;
            font-weight: 700;
            color: #222;
        }

        #mform_19 .mf-submit-overlay__text {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            color: #444;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var wrapper = document.getElementById('mform_19');
            var form = document.getElementById('mega-form-19');

            if (!wrapper || !form) {
                return;
            }

            var overlay = document.createElement('div');
            overlay.className = 'mf-submit-overlay';
            overlay.innerHTML =
                '<div class="mf-submit-overlay__box">' +
                    '<h3 class="mf-submit-overlay__title">Application submitted</h3>' +
                    '<p class="mf-submit-overlay__text">Please wait up to 1 minute while your files finish uploading and processing. Do not close this window.</p>' +
                '</div>';

            wrapper.appendChild(overlay);

            function isFinalSubmitProcessing() {
                var submitButton = form.querySelector('[name="mform_submit"]');

                return !!(
                    submitButton &&
                    submitButton.classList.contains('mf-submit-processing') &&
                    form.classList.contains('mf-mask')
                );
            }

            function syncOverlay() {
                overlay.classList.toggle('is-visible', isFinalSubmitProcessing());
            }

            var observer = new MutationObserver(syncOverlay);
            observer.observe(form, {
                attributes: true,
                subtree: true,
                attributeFilter: ['class']
            });

            syncOverlay();
        });
    </script>
    <?php
});

Thread Starter

stumur

(@stumur)

1 month, 2 weeks ago

OMG, that’s fabulous! Thanks Ali – I wasted a whole week on this danged thing! I should’ve just asked you! 😀

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.