Change Contact Form 7 "SUBMIT" text with animated gif AFTER clicked

Question

CONTACT FORM 7

Question:

I have a simple form with an email field and submit button.

How do replace the "SUBMIT" text with an animated GIF when the user clicks on it? I want the GIF to replace the text inside the button, or is it easier to replace the button altogether with the GIF?

[email* EMAIL] [submit "Subscribe"]

My animated GIF is the following:

http://www.clarityclinicalskincare.net//wp-content/plugins/bloom/images/subscribe-loader.gif

I already have a success message and error validation in place.

Answer 1

first give your button an ID and a JS function then on your button you can have

onclick="giffy(document.getElementById('the Id you gave your button'))"

then the JS function

function giffy(buttonId){buttonId.innerHTML = "<img src='http://www.clarityclinicalskincare.net//wp-content/plugins/bloom/images/subscribe-loader.gif'> </img>"}

so on your button click the text is replaced with your gif