How to modify Contact Form 7 Success/Error Response Output [closed]

by

After taking a deeper look in to this, I realised that the responses that are displayed are produced via the Contact Form 7 AJAX.

So, following the Contact Form 7 documentation on DOM Events, I was able to get this working how I wanted with the following JS code:

/* Validation Events for changing response CSS classes */
document.addEventListener( 'wpcf7invalid', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-danger');
}, false );
document.addEventListener( 'wpcf7spam', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-success');
}, false );

Leave a Comment