プラグイン
Contact Form 7で確認・送信完了ページを作成する方法
2018年10月05日 12:00 2018年10月12日
こんにちは！社員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です。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
