Contact Form 7で完了画面を作成する方法

Contact Form 7で作成したファームに、完了画面を設定する方法の備忘録です。

Contact Form 7は、お問い合わせ用のフォームを簡単に設置することができるWordpressプラグインです。

Contact Form 7の詳しい使い方は、こちらの記事でまとめています。

通常はフォーム送信後に送信完了メッセージが表示されますが、今回は完了画面として用意した固定ページに遷移するように設定を変更します。

完了ページを作成する

はじめに、固定ページで送信完了のメッセージを表示する完了画面を作成します。

管理画面の左メニューの「固定ページ」から「固定ページを追加」をクリックします。

タイトルと本文を記入して、スラッグのパーマリンク設定に「completion」を設定します。

完成したら右上の「公開」ボタンをクリックして完了画面を保存します。

フォームにコードを追記する

続いて、Contact Form 7で作成したお問い合せフォームに、管理画面に遷移するコードを追加します。

コンタクトフォームの管理画面からお問い合せフォームのコードを開きます。

お問い合せフォームを作成していない場合は、新規作成からフォームを追加します。

コンタクトフォームのコードの一番下に、以下のコードを追加します。

<script>
  document.addEventListener('wpcf7mailsent', function(event) {
    location = '/completion/';
  }, false );
</script>

Contact Form 7のDOMイベントを利用して、フォーム送信が完了した際に、指定したURLへリダイレクトするように設定しています。

locationには、先ほど作成した完了画面のスラッグ「completion」を設定します。

コードを追加したら、左下の「保存」ボタンをクリックして設定を保存します。

メッセージの削除

最後に、フォームを送信してページ遷移する直前に、チラッと表示されてしまうデフォルトの送信完了メッセージを非表示にしておきます。

CSSで送信完了メッセージのクラスにdisplay: none;を設定します。

.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}

送信完了のメッセージは非表示になり、違和感なく完了画面へ遷移するようになりました。

完了画面はコードを追加するだけでページの遷移ができますが、さらに入力内容を表示させる確認画面を設置する場合はプラグインの使用がおすすめです。