Contact Form 7で確認・送信完了ページを作成する方法

         

プラグイン

Contact Form 7で確認・送信完了ページを作成する方法

2018年10月05日 12:00 2018年10月12日

Contact Form 7で確認・送信完了ページを作成する方法

こんにちは!社員Aです👩

弊社では10/4〜10/7まで社員旅行でタイに来ており、このブログは事前投稿しているものなのですが、旅の記録などは随時Instagramにアップしておりますので、ぜひご覧ください!



さて、今回はWordPressのプラグイン「Contact Form 7」で確認画面と送信完了画面を作成する方法をご紹介します。

 

Contact Form7で確認画面を作成する方法

Contact Form7の標準機能として、確認画面へ遷移する機能はありません。

そのため、別で「Contact Form 7 add confirm」というプラグインをインストールする必要があります。

インストール〜確認画面実装までの流れを説明していきます。

 

1.「Contact Form 7 add confirm」をインストール・有効化

まずは、プラグイン > 新規追加から「Contact Form 7 add confirm」を検索し、インストール・有効化します。

 

2.Contact Form7側で設定をする

「Contact Form 7 add confirm」がインストール・有効化されたら、「Contact Form7」を開きます。

ボタンの部分に、「確認ボタン」と「戻って編集」ボタンが追加されているのが分かるかと思います。

これを、送信ボタンと並列して配置します。

[confirm class:btn_conf "確認する"][back class:btn_edit "編集する"][submit class:btn_send "送信する"]

ボタンの順番は、上記の通りに配置してください。

 

3.設定完了!確認画面が実装できました

たったこれだけで確認画面が実装されました。

実際に弊社のお問い合わせフォームでも上記方法で確認画面を実装しており、確認ボタンを押すと下記の画面へリンクされます。

入力された箇所がグレーアウトされています。

これで確認画面の実装完了です!



 

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

Contact Form7のオプションを使うことで、ユーザーがフォームの送信完了後、完了画面へ移動させることができます。

インストール〜完了画面実装までの流れを説明していきます。

 

1.固定ページであらかじめ完了画面を作成しておく

あらかじめ、完了画面を固定ページなどで作成しておきます。

凝ったものではなく、送信が完了した旨とトップへのリンクがあれば十分かと思います。

 

2.Contact Form7側で設定をする

続いてContact Form7を開き、フォームの入力エリアに下記を追加します。

★ここに送信完了画面のURL★の部分に、1で作成した完了画面のURLを貼り付けてください。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = '★ここに送信完了画面のURL★';
}, false );
</script>

 

3.実装完了!

2でscriptを貼り付けることにより、ユーザーがフォームを送信したあとは自動的に完了画面へリダイレクトされます。

 

まとめ

Contact Form7は優秀なプラグインですが、確認画面が標準で装備されていなかったり、送信後のメッセージが分かりづらかったりするため、上記方法でのカスタマイズがおすすめです。

ぜひ活用してみてください!

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺