Contact Form 7 の設定あれこれ

確認画面を追加する

「Contact Form 7 add confirm」プラグインを追加
https://ja.wordpress.org/plugins/contact-form-7-add-confirm/

それぞれの画面時に表示されるクラスです。

入力画面クラス； .wpcf7c-elm-step1
確認画面クラス： .wpcf7c-elm-step2
完了画面クラス： .wpcf7c-elm-step3

<div class="wpcf7c-elm-step1 wpcf7c-elm-step2">
    <table>
        <tr>
            <th>お名前[※]</th>
            <td>[text* your-name]</td>
        </tr>
        <tr>
            <th>内容</th>
            <td>[textarea your-message]</td>
        </tr>
    </table>
</div>
<div class="wpcf7c-elm-step1">
    [confirm "確認する"]
</div>
<div class="wpcf7c-elm-step2">
    [back "修正する"]
    [submit "送信する"]
</div>
<div class="wpcf7c-elm-step3">
    <p>お問い合せありがとう！</p>
</div>

メールアドレスの再入力確認

<th>メールアドレス</th>
<td>[email*email]
    確認のため、再入力してください。
    [email*email_confirm]
</td>

add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
    $type = $tag['type'];
    $name = $tag['name'];
    $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
    if ( 'email' == $type || 'email*' == $type ) {
        if (preg_match('/(.*)_confirm$/', $name, $matches)){
            $target_name = $matches[1];
            if ($_POST[$name] != $_POST[$target_name]) {
                if (method_exists($result, 'invalidate')) {
                    $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
                } else {
                    $result['valid'] = false;
                    $result['reason'][$name] = '確認用のメールアドレスが一致していません';
                }
            }
        }
    }
    return $result;
}

メッセージボックスの配置を変更する

挿入したいところに [response] を入れる。

複数入れることも可能なので、入力フィールドの上下に設置することもできます。

完了画面を別ページにリダイレクト

完了ページを別途固定ページなどで作成します。
location.replace(‘/complete/’); の箇所にリンク先を設定してください。

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
    <script type="text/javascript">
        if($('.wpcf7').length){
            var wpcf7Elm = document.querySelector( '.wpcf7' );
            wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
                location.replace('/complete/');
            }, false );
        }
    </script>
<?php
}