[WP]Contact Form 7で完了画面に遷移させる方法

WordPressのContact Form 7は高機能なメールフォームのプラグインですが、メール送信完了画面が用意されていません。

そこで、メールフォームの画面で送信ボタンがクリックされたら、あらかじめ用意した完了画面にJavascript を使って遷移させる方法を紹介します。

固定ページで「完了画面」の用意

あらかじめ、固定ページなどで完了画面を用意しておきます。
※別のサイトに遷移させる場合は、そのURLを控えておきます。

Contact Form 7の「その他の設置」

管理画面のContact Form 7設定ページの下部にある「その他の設定」欄に以下のソースコードを追記します。

または

のどちらでも動きます。

フロント画面で動作確認

フロント画面に進み、正常に完了画面に遷移するか確認します。

送信ボタンをクリックすると、「あなたのメッセージは送信されました。ありがとうございました。」のメッセージが表示され、


その後に完了画面に遷移すればOKです。

「あなたのメッセージは送信されました。」のメッセージを非表示にする

お問い合わせページで「送信」ボタンをクリックすると、「# メッセージが正常に送信された」欄で指定されたメッセージが表示されますが、個人的には、完了画面に遷移させる場合はこのメッセージは不要かなと思います。


しかし、今回の完了画面に遷移させる処理だけではこのメッセージを非表示にすることができないので、CSSを補正することにします。

テンプレートフォルダ内のCSSファイルに以下のスタイルを追加します。

最優先でスタイルを適用させるために!importantを付けておきます。