web-dev-qa-db-ja.com

Contact Form 7成功/エラー応答の出力を変更する方法

フォームエラーまたは成功メッセージが表示されたときに表示されるContact Form 7レスポンスボックスの出力を上書きまたはフィルタリングする方法を見つけようとしています。

デフォルトでは、フォームが正常に送信されるとContact Form 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を次のようにBootstrapの却下可能アラートに変更します。

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

Contact Form 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 );

しかし、出力をまったく変更するようには見えません...どんな助けでも大いに感謝されるでしょう！

filterstwitter-bootstrapplugin-contact-form-7
5
Mat

これをより深く検討した結果、表示された回答はContact Form 7 AJAXを介して作成されたものであることがわかりました。

それで、DOM Eventsに関する Contact Form 7のドキュメント に従って、私は以下の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 );
4
Mat