Submission Button Gif – Form Validation

Hello,

My form submissions are tied to Facebook analytics and so multiple submissions screws it up. Since I use an image for my submission button and the default circle icon shown when the form is submitting isnt appearing, it’s not obvious to people that the form is sending so they click it 2, 3 sometimes 10-20 times. I end up getting multiple duplicate emails and my analytics logs each resubmit as a unique conversion.

Thus, I have inserted a piece of javascript on my form to change it to a “processing” animated gif of a loading bar which is unclickable so they can only send it once. I use the “onclick” command attached to the submit button which triggers the div with the submit button to disappear, and the div with the loading gif to appear.

When the form is properly filled out it works perfectly. After submission, the button reappears and the message that it was sent successfully appears.

But in the event of a form error, the error messages appear as normal but the loading gif doesn’t revert back to the button, so it’s impossible to resend the form after fixing the errors–you have to reload the page.

Is there a workaround for this? I tried using “onsubmit” instead of “onclick” but it broke the functionality of the loading gif completely. Since I don’t have access to the <form> tag, I am trying to find a way to make this work without having to edit the core files.

https://wordpress.org/plugins/contact-form-7/