• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

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


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

管理画面の Contact Form 7 設定ページの下部にある「その他の設定」欄に以下のソースコードを追記します。
on_sent_ok: "window.location.href = '完了ページのURL';"

on_sent_ok: "location.replace('完了ページのURL');"
のどちらでも動きます。
[WP]WordPressの「Contact Form 7」で完了画面に遷移させる方法

フロント画面で動作確認

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

送信ボタンをクリックすると、「あなたのメッセージは送信されました。ありがとうございました。」のメッセージが表示され、
[WP]WordPressの「Contact Form 7」で完了画面に遷移させる方法

その後に完了画面に遷移すればOKです。
[WP]WordPressの「Contact Form 7」で完了画面に遷移させる方法

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

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

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

テンプレートフォルダ内の CSS ファイルに以下のスタイルを追加します。
.wpcf7-mail-sent-ok	{
display:none!important
}
最優先でスタイルを適用させるために !important を付けておきます。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す