WordPressでサイトを構築した際、メールフォームが欲しいということはよくある話だと思います。

WordPressのプラグインに「Contact Form 7」というプラグインがあります。
非常に有名で日本語にも対応しています。
これ一つでメールフォームを設置できるので、
単に設置するだけだったらそれでいいのですが、
「入力確認画面が欲しい！」「送信完了画面が欲しい！」ということになると、
これひとつでは賄いきれません。

ですので、Contact Form 7に作用する下記のプラグインを導入します。

・Contact Form 7 add confirm

このプラグインはその名の通り、Contact Form 7に確認画面を追加します。
メールフォーム作成画面に「確認」と「戻る」ボタンが追加されるので、
送信ボタンの近くに設置して使用できます。
ただ、ボタンを設置しただけだと実際の使用者はなんの画面なのかわからない場合もあります。
なので、「内容がよろしければ送信ボタンを押してください」のような文言を追加しておきましょう。
その際確認画面だけに表示させたいので、以下のような書き方をします。

<p class=”wpcf7c-elm-step2″>内容がよろしければ送信ボタンを押してください</p>

class:wpcf7c-elm-step2がついている要素は確認画面になっている時だけ表示される要素になります。
これで確認画面の必要最低限の要素ができたと思います。

次に送信完了画面です。

こちらは、上記の確認画面を実装してから送信ボタンを押下することで、規定のページへ遷移するという形で作成します。
まず固定ページで送信完了画面となるページを差作成します。
次にfunction.phpファイルに以下を追記をします。

add_action( ‘wp_footer’, ‘add_complete_page’ );
function add_complete_page() {
        echo <<< EOD
        <script>
            document.addEventListener( ‘wpcf7mailsent’, function( event ) {
                location = ‘送信完了ページのURL’; 
            }, false );
        </script>
        EOD;
}
※fonuction.phpはWordPressのかなり重要なファイルになるので、バックアップを取る等何かあった時にすぐ元に戻せるようにしておきましょう。

これで送信ボタンを押したときに送信完了ページへ遷移すると思います。

是非、ご活用ください。