Images still in form after send.

Hello @ogdsgn ,

It should clear the form after it’s sent, as you can see here in my demo – https://www.codedropz.com/contact/

Maybe there’s a JS script error, can you check in your browser console?

Can you also, sent a link to your site so I can check?

Thanks.

I’m so sorry, I broke my first rule of debugging. Rule#1. Never assume the problem is with the plugin.

Yes, of course, I’ll review my code and see if I can find something that’s interfering with that code. I take it it’s a part of the .js ?

So I don’t seem to have any errors appearing.

Here’s the page I’m using it on.

https://w.thesurfsocial.com/tellyourstory/

cheers!

Ahh, I think I figured it out. The issue is from having multiple forms in the DOM. I have them built into overlays that open into full-screen windows.

So the problem arises with this.
It just gets the first form.

    var form = inputFile[0].form;

So I was able to put together a fix by looping through each form.

    // Fires when an Ajax form submission has completed successfully, and mail has been sent.

    document.querySelectorAll('form.wpcf7-form').forEach(function(form) {

        form.addEventListener('wpcf7mailsent', function(event) {

            // Get input type file element

            var inputFile = form.querySelectorAll('.wpcf7-drag-n-drop-file');

            var status = form.querySelectorAll('.dnd-upload-status');

            var counter = form.querySelector('.dnd-upload-counter span');

            var error = form.querySelectorAll('span.has-error-msg');

            // Reset upload list for multiple fields

            if (inputFile.length > 0) {

                inputFile.forEach(function(input) {

                    localStorage.setItem(input.getAttribute('data-name') + '_count_files', 1); // Reset file counts

                });

            } else {

                // Reset file counts

                localStorage.setItem(inputFile[0].getAttribute('data-name') + '_count_files', 1);

            }

            // Remove status / progress bar

            if (status) {

                status.forEach(function(statEl) {

                    statEl.remove();

                });

            }

            if (counter) {

                counter.textContent = '0';

            }

            if (error) {

                error.forEach(function(errEl) {

                    errEl.remove();

                });

            }

        }, false);

    });

Thanks @ogdsgn I’m glad you already figured it out.

I will consider this code and may try it with multiple forms on one page.

Hey @glenwpcoder, thanks for including the fix for multiple forms.

And nicely handled it much classier by getting the actual target from the event rather than my newbie code of looping through them all.

cheers!