Contact Form 403/400 error listener

Hello,

I know this might be beyond the scope of your support but it’s worth a try. Due to the problems version 5.4 had in combination with caching plugins, we experienced the “infinite spinning loader (403 error on /admin-ajax.php?action=rest-nonce)” issue that so many people reported here back in March-April, potentially losing valuable customers as a result. This particular bug may have been fixed in 5.4.1 but I’m trying to come up with a solution to future-proof any kind of problems of that sort with our forms.

My thinking was to revert back to version 5.4 on a staging site and use JS and ajax to listen for 403 or 400 errors when a form is sent and display the “wpcf7-response-output” div with a custom text, informing the customers that there’s a technical problem and they should write us an e-mail instead. Here is the code I’ve come up with:

$(‘.wpcf7-form’).submit(function(){
var response = $(this).find(‘.wpcf7-response-output’);
var form = $(this);
$.ajax({
error: function(xhr, textStatus, errorThrown) {
switch (xhr.status) {
case ‘403’:
form.removeClass(‘submitting’);
response.html(‘<div>CUSTOM ERROR MESSAGE</div>’);
response.css(‘display’, ‘block’);
form.addClass(‘invalid’);
break;
case ‘400’:
form.removeClass(‘submitting’);
response.html(‘<div>CUSTOM ERROR MESSAGE</div>’);
response.css(‘display’, ‘block’);
form.addClass(‘invalid’);
break;
}
}
});
return false;
});`
`

Unfortunately it doesn’t work. The 403 error is triggered but .wpcf7-response-output is not being displayed as intended. I’ve also tried creating a separate div and style it the same way as “.wpcf7-response-output” and then try to display that when the error is triggered. Still to no avail. Any chance you could assist with this?