I'm trying to find a way to override or filter the output of the Contact Form 7 response boxes which are shown when a form error or success message is shown.

As default, Contact Form 7 outputs this HTML when a form sends successfully:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    Thank you for subscribing!

Effectively, I want to change the output HTML of the response to be a Bootstrap dismissable alert like so:

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    Thank you for subscribing!

I've tried scouring the Contact Form 7 documentation and looked through the plugins source code to find the filter that I think I need, but I can't get the response HTML output to change. This is the code that I've tried:

function filter_wpcf7_response_output( $output ){
    // Replace Success CSS Class
    $output = str_replace( ' wpcf7-mail-sent-ok', ' alert alert-success', $output );
    return $output; 
add_filter( 'wpcf7_form_response_output', 'filter_wpcf7_response_output', 10, 1 );

But it doesn't appear to change the output at all... Any help would be greatly appreciated!

closed as off-topic by Mark Kaplun, cjbj, bueltge, Christine Cooper, Jack Johansson Oct 19 '17 at 16:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • I've, for the time being, added some CSS rules for the standard Contact Form 7 CSS classes so that the response notifications are styled the same as the Bootstrap alerts. But I'm still interested to know how to modify the output with the above filter. – Mat Oct 13 '17 at 12:15
  • Ummm, why has my question been down voted? – Mat Oct 16 '17 at 21:40
  • Who ever voted to close this need a good slap up side the head. Seriously. – Brett Dec 25 '18 at 10:46

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 );
  • Exactly what I was looking for - thanks mate, legend! – Brett Dec 25 '18 at 10:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.