プラグインContact Form 7のwpcf7_form_response_outputフィルタの使用方法・解説

概要

wpcf7_form_response_output フィルタは、WordPress プラグイン Contact Form 7 において、フォーム送信後の応答メッセージの出力を加工するために使用されます。このフィルタを利用することで、送信結果に応じたカスタムメッセージの表示が可能になります。また、CSS クラスやスタイルを変更してユーザー体験を向上させることもできます。以下にこのフィルタがよく使用される具体的な機能を挙げます。

1. 成功メッセージのカスタマイズ
2. エラーメッセージのスタイル変更
3. 条件に応じた異なるメッセージの表示
4. メッセージの翻訳や localization
5. フォーム送信後の動的な内容表示
6. JavaScript を使ったメッセージ表示のカスタマイズ

構文

add_filter( 'wpcf7_form_response_output', 'filter_function_name', 10, 2 );

パラメータ

1. $output (string) – フォームの送信応答メッセージ。
2. $form (object) – フォームの情報を含むオブジェクト。

戻り値

フィルタを通過した後のカスタマイズされた応答メッセージ。

使用可能なバージョン

• Contact Form 7 バージョン: 5.0 以降
• WordPress バージョン: 5.0 以降

サンプルコード

サンプル1: 成功メッセージのカスタマイズ

このサンプルコードでは、フォーム送信の成功時のメッセージをカスタマイズしています。

add_filter( 'wpcf7_form_response_output', 'custom_success_message', 10, 2 );
function custom_success_message( $output, $form ) {
    if ( strpos( $output, 'Thank you for your message.' ) !== false ) {
        $output = str_replace( 'Thank you for your message.', 'ご連絡いただきありがとうございます！', $output );
    }
    return $output;
}

(引用元: https://contactform7.com)

サンプル2: エラーメッセージのフォーマット変更

このサンプルコードでは、エラーメッセージのHTMLクラスを変更しています。

add_filter( 'wpcf7_form_response_output', 'custom_error_message_format', 10, 2 );
function custom_error_message_format( $output, $form ) {
    if ( strpos( $output, 'There was an error.' ) !== false ) {
        $output = '<div class="custom-error">' . $output . '</div>';
    }
    return $output;
}

(引用元: https://contactform7.com)

サンプル3: 多言語対応のメッセージ

このサンプルコードは、言語に応じて異なるメッセージを表示します。

add_filter( 'wpcf7_form_response_output', 'localized_response_message', 10, 2 );
function localized_response_message( $output, $form ) {
    $lang = get_locale();
    if ( $lang == 'ja' ) {
        $output = '日本語のメッセージ';
    } else {
        $output = 'English message';
    }
    return $output;
}

(引用元: https://contactform7.com)

サンプル4: 動的なステータスメッセージの追加

このサンプルでは、フォーム送信後に日付を表示するメッセージを追加しています。

add_filter( 'wpcf7_form_response_output', 'add_dynamic_date_message', 10, 2 );
function add_dynamic_date_message( $output, $form ) {
    $current_date = date( 'Y-m-d H:i:s' );
    $output .= '<p>送信された日付: ' . $current_date . '</p>';
    return $output;
}

(引用元: https://contactform7.com)

サンプル5: JavaScriptでメッセージを変更

このサンプルは、メッセージの最終出力を JavaScript で操作するためのカスタムデータ属性を追加しています。

add_filter( 'wpcf7_form_response_output', 'add_js_custom_attribute', 10, 2 );
function add_js_custom_attribute( $output, $form ) {
    $output = '<div data-custom="true">' . $output . '</div>';
    return $output;
}

(引用元: https://contactform7.com)

この関数のアクションでの使用可能性

アクション	使用可能
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head