初心者きつねContact Form 7で作成したお問合せフォームに内容確認画面、送信完了画面を追加したいけど、どうやるの？
通常Contact Form 7でお問合せフォームを作成すると、送信時は送信ボタンの下に「送信されました。」というような表示が出るだけです。
非常にシンプルな設計になっていますが、この仕様だと誤って送信ボタンを押してしまったりしたら取り消しができないですし、自分が打ち込んだ内容を確認することもできません。
ということで、今回はContact Form 7で作成したお問合せフォームに内容確認画面、送信完了画面を追加する方法を解説していきたいと思います。
Contact Form 7をまだ導入していない人や、使い方を知りたい人はこちらの記事を先にお読みください。
Contact Form 7のお問い合わせフォームで内容確認・送信完了画面を表示する方法
Contact Form 7のお問い合わせフォームで内容確認・送信完了画面を表示するには、もう1つプラグインを利用します。
それが、「Contact Form 7 Multi-Step Forms」です。
「Contact Form 7 Multi-Step Forms」を利用して、内容確認・送信完了画面を表示するステップとしては
- 内容確認画面を表示するためのフォームを作成する
- 送信完了画面を表示するためのフォームを作成する
- 内容確認画面・送信完了画面用の固定ページを作り、ショートコードを貼り付ける
となります。
この後、詳しく解説します。
「Contact Form 7 Multi-Step Forms」を使用する前に…
「Contact Form 7 Multi-Step Forms」を利用してContact Form 7のお問い合わせフォームで内容確認・送信完了画面を表示した際に、前回問い合わせをした人の情報が反映されてしまうという問題が報告されています。
もし、別の方法でお問い合わせフォームに内容確認・送信完了画面を表示した際には
「Snow Monkey Forms」を利用する方法もあります。
「Snow Monkey Forms」を利用すれば、お問合せフォームを作成するだけで、自動的に
内容確認・送信完了画面も表示してくれます。
- 問い合わせ情報の表示ミスを起こしたくない
- 自分で内容確認・送信完了画面の実装をするのが面倒くさい
こんな風に思う人は、「Snow Monkey Forms」などのプラグインを利用してお問合せフォームを作成する方が向いています。
※使用しているテーマによってはうまく動作しないことがあります。最も確実なのは、同じ開発者の方が作成した「Snow Monkey」のテーマを利用することです。
内容確認画面・送信完了画面を作成する下準備
実際に内容確認画面・送信完了画面を作成する前に、まずは下準備として「Contact Form 7 Multi-Step Forms」をインストール・有効化しましょう。
プラグイン一覧から「プラグインを追加」を選択し、検索窓で「Contact Form 7 Multi-Step Forms」と打ち込みましょう。
そして出てきた下のようなプラグインをインストール・有効化しましょう。
お問合せ画面を作成する
まずは、お問合せ画面を作成していきましょう（既にお問合せ画面を作成している場合は、それを編集する）。
従来のお問合せフォームとほとんど内容は一緒ですが、内容確認画面に遷移する関係で送信ボタンを編集したり、その下に1つ項目を追加していきます。
もし、まだお問合せフォームを作成していない人は、下の記事を参考に作った方が効率が良いです。
送信ボタンは、通常
[submit "送信"]のように形成すると思いますが、下のように書き換えます。
[submit "確認画面へ"]そして、その下に「multistep」という項目を挿入します。
Next Page に、お問合せ内容確認画面の固定ページのパスを入れ
First Stepにあるチェックボックスにチェックを入れます。
この状態で「Insert form」を選択するとフォームが挿入され、こんな感じのフォームができると思います。
[multistep multistep-920 first_step "/contact-confirm"]ここまでできたら、内容を保存します。
内容確認画面を表示するためのフォームを作成する
続いて、内容確認画面を表示する方法を解説します。
1から作成してもいいですが、既に作成したフォームと内容が被る部分もあるのでお問合せフォームを複製して作成した方が効率がいいです。
複製する場合は、既にあるフォームの名称のにカーソルを当てると、下に「複製」と出てくるのでそこをクリックすればOK。
変更する部分は、「previous」で作成できるので、ここを選択します。
Labelに「戻る」などの文言を入れて、「Insert Tag」を押します。
これで、内容確認の際、内容を訂正したい場合は前画面に戻ることができます。
続いて、送信ボタンの後ろに「multistep」を挿入。
Next Page に、送信完了画面の固定ページのパスを入れ
Last Stepにあるチェックボックスにチェックを入れます（Last Stepにチェックをすると、Send Emailにも自動でチェックが入ります）。
この状態で、「Insert Tag」でフォームを挿入。
これで、内容確認画面用のフォームが作成できました。
これをお問合せ内容確認用の固定ページに貼り付けますが、方法は後述します。
内容確認画面・送信完了画面用の固定ページを作り、内容確認画面の方にはショートコードを貼り付ける
最後に内容確認画面・送信完了画面のフォーム用の固定ページを作り、内容確認画面の方にはショートコードを貼り付けましょう。
まず内容確認画面の方ですが、「お問合せ内容確認画面」などの名称で固定ページを作成し
本文の箇所にて、ブロックエディターの+ボタンからショートコードを選択します。
フォームにショートコードが記載してあるので、それを貼り付けましょう（一応、そのまま固定ページに貼り付けてもOK）。
続いて送信完了画面の方ですが、こちらは固定ページを作り
「お問合せありがとうございます。通常、3営業日以内に返信いたします。」といった文言を本文に記載します。
セキュリティ対策として認証システムも導入しておく
ここまでで、Contact Form 7で内容確認画面・送信完了画面の設置は完了したと思いますが
スパムメールが大量に送られてきたり、迷惑メールを防ぐための手段として、Clouflare Turnstileなどを利用した認証システムを導入することをお勧めします。
詳しくは、以下の記事を参照にしてください。
【結論】相手に優しい設計にしたいなら内容確認・送信完了画面は導入するべき
ということで、今回はContact Form 7のお問い合わせフォームで内容確認・送信完了画面を表示する方法についてご紹介しました！
Contact Form 7で内容確認・送信完了画面を表示する設定にしたい場合には、ぜひ実践してみてください！設定した方がお問い合わせしてくれた人にも優しい設計になりますよ。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
わい記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ！
コメント