Blog スタッフブログ

WEB制作

Contact Form 7で送信後にリダイレクトする方法

Contact Form 7は、WordPressでお問い合わせフォームを作成するプラグインです。

標準では、送信後に同じページ内で完了メッセージが表示される仕様ですが送信後にサンクスページなどへリダイレクトさせたいというケースも多々あります。

そこで今回は、Contact Form 7で送信完了後にサンクスページへリダイレクトする方法をご紹介します。

手順

1.サンクスページを作成

リダイレクト先のサンクスページを固定ページ機能などで作成します。

2.お問い合わせページを作成

通常通り、管理画面のContact Form 7からメールフォームを作成します。

3.javascriptでリダイレクト処理を追加

Contact Form 7では、フォーム送信後にJavaScriptのカスタムイベントが発火します。その中でも wpcf7mailsent は、メールの送信が成功したタイミングで呼び出されるイベントです。

このイベントを利用して、JavaScriptでリダイレクト処理を追加するだけで実現可能です。

以下のscriptをお問い合わせページで読み込みます。

  <script>
    document.addEventListener('wpcf7mailsent', function(event) {
      location = '<?php echo home_url(); ?>/contact/thanks';
    }, false);
  </script>