Contact Form 7 確認ページ、サンクスページを表示 ( Contact Form 7 Multi-Step Forms )

フォーム入力を行う場合は、確認画面を間に挟んだほうが利用者も安心して使うことができます。

またサンクスページを表示させることで、正常にメールが送られたということも伝えることができ、サンクスページに次のページへの動線を表示させたりも可能ですので必要があれば検討してみてはいかがでしょうか？

固定ページに、入力ページ（例：/contact）・確認ページ（/confirm）・サンクスページ（/thanks）の 3 つを作成します

次にコンタクトフォームの入力フォームに確認画面遷移用の処理を追加します

multistep タグを追加し、送信ボタン（submit）の文字を「確認ページへ」に変えれば、入力ページの修正は完了です。

固定ページの入力ページ内にショートコードを追記します

確認ページ用のコンタクトフォームを新規追加します

multiformを先頭につけることでinputエリアにならず確認画面用の表示を行うことができます

サンクスページのリンク指定と「last_step」「send_mail」をチェックして確認ページの設定は完了です

固定ページの確認ページ内にショートコードを追記します

これで入力画面、確認画面、サンクスページ表示の流れでお問い合わせができるようになりました。

確認画面から入力画面に戻るボタンは、確認ページ用のフォームの中に次のタグを書くと付けられます。

[previous "戻る"]

※ 2021 年 8 月時点の画面・バージョンです。Contact Form 7 Multi-Step Forms はその後、タグの名前や有料版などの作りが変わっているので、公式の説明もあわせてご確認ください。

関連記事