我正在试图找到一种方法来覆盖或过滤联系人表单7响应框的输出，这些响应框在显示表单错误或成功消息时显示。
默认情况下，联系人表单7在表单成功发送时输出此HTML：
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
Thank you for subscribing!
</div>
实际上，我想将响应的输出HTML更改为引导可解除警报，如下所示：
<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
Thank you for subscribing!
</div>
我尝试过搜索联系人表单7文档，并查看了插件源代码，以找到我认为需要的过滤器，但我无法更改响应HTML输出。这是我尝试过的代码：
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 );
但它似乎根本没有改变输出。。。任何帮助都将不胜感激！
最合适的回答,由SO网友:Mat 整理而成
在深入了解了这一点之后，我意识到显示的响应是通过联系人表单7 AJAX生成的。
因此Contact Form 7 documentation on DOM Events, 通过以下JS代码，我可以按照我的意愿实现这一点：
/* 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 );
