Thank you for getting involved. Great points too!
Here’s some of my thinking mapped out via your points:
Currently, it works if the user has entered an invalid email address – I should’ve chosen to showcase that in the gif.
Yep, you win here. At the very least, the Send button ought to be disabled or rendered differently until form validation proves successful – Please share any other ideas, if you have any.
As for not seeing the animation because it’ll be off the page…This is more or less the problem I was hoping the icons would help solve. Mind you, this idea was just for this particular 3-field form. But still, thoughts please.
But as for screenreaders and graceful degradation…yep, as with the original field labels, the original error messages that Contact Form 7 generates are still there – just hidden via CSS.
I will confess to one flaw that I was aware of when I made this thread: The form validates AS the user fills it in…instead of waiting till the user clicks submit…which is something NNG dislikes. This is something that I seem to be unable to hack out of Contact Form 7.
Anyway, thanks again. Any additional comments or thoughts would be much appreciated.