WordPressプラグイン「Contact Form 7 Multi-Step Forms」を使って、メール送信時の確認画面とサンクスページ(完了画面)を追加する方法をご紹介します。
Contact Form 7 は、問い合わせフォームを簡単に設置できるWordPressの定番プラグインですが、メールフォームに入力した内容を確認するための機能や、送信後にサンクスページ(完了画面)へ移行する機能がありません。
Contact Form 7に確認画面や完了画面を追加するなら、プラグイン等を使う必要があります。
以前は「Contact Form 7 add confirm」を使っていましたが、6年以上更新されていないので、今回は別のプラグイン「Contact Form 7 Multi-Step Forms」を使って、メールフォームに確認画面と完了画面を追加してみます。
Contact Form 7の基本的な使い方や各種設定方法については、以下の記事をご覧ください。
Contact Form 7 Multi-Step Formsをインストール
では、Contact Form 7 Multi-Step Formsをインストールしましょう。ダッシュボード左の「プラグイン」→「新規追加」から「Contact Form 7 Multi-Step Forms」で検索してください。
プラグインが表示されたら、インストールして有効化します。
続いて「Never miss an important update」というメッセージが表示されます。
ここで「許可して続ける」オプトインを選択すると、セキュリティやアップデートの情報を受け取ることができます。ちなみに、オプトインとは同意したユーザーに対して広告宣伝等のメールを送ることです。
オプトインするなら「許可して続ける→」をクリックします。許可しない場合は「スキップ」してください。どちらを選んでもプラグインは使えます。
プラグインを追加すると、Contact Form 7のフォーム編集画面に「multistep」「multiform」「previous」のボタンが追加されます。
Contact Form 7 入力フォーム作成
では、Contact Form 7 Multi-Step Formsを使って、確認画面と完了画面を追加してみましょう。
まずはContact Form 7 で入力フォームを作成してください。
続いて、入力フォームの最後に「multistep」タグを挿入します。タグを挿入したい位置で「multistep」をクリックしてください。
multistepタグの設定
「フォームタグ生成: multistep」が開くので、タグの内容を設定していきます。
まずは入力画面を最初のステップにするため「First Step」をチェックします。「Next Page URL」は確認画面のURLとなります。ここでは「mail-confirmation」としました。
「Insert Tag」をクリックすると、フォームの最後に［multistep multistep-737 first_step “mail-confirmation”］というタグが追加されるので、いったん「保存」しましょう。
後ほど確認画面を表示するための固定ページを作成します。URLは「Next Page URL」で入力した通りにしてください。
Contact Form 7 確認画面用フォーム作成
次にContact Form 7で、確認画面用のフォームをもう一つ作成します。
左メニューの「コンタクトフォーム」に戻って新しいフォームを作成しますが、ここでは「新規追加」ではなく、入力フォームを「複製」してください。
確認画面で入力した内容を表示させるには「multiform」タグを使いますが、各入力項目のタグを１つずつ作成するのは面倒なので、入力フォームを複製して項目を書き換えたほうが簡単です。
例：［text your-name］なら［multiform your-name］に変更する
続いて、フォームの最後に「戻る」ボタンと完了画面に推移するタグを挿入します。
「送信」ボタンの前に「Previous」タグを追加して、「前に戻る」ボタンを追加します。
Labelに「入力画面に戻る」と入力して、「Previous」タグを作成します。
作成したタグ［previous “入力画面に戻る”］を確認したら「Insert Tag」をクリックして、タグを挿入します。
送信タグの下に「multistep」タグを追加して、メール送信と完了画面のURLを設定します。
![[multistep]タグを追加](https://wind-mill.co.jp/wp-content/uploads/2024/06/contactform7-multistep-forms23.png)
「Last Step」は必ずチェック、「Send Email」をチェックをすると、確認画面の送信ボタンからメールが送信されます。
「Next Page URL」は完了ページのURLになります。ここでは「thanks-page」としました。
作成したタグ［multistep multistep-91 last_step send_email “thanks-page”］を確認したら、「Insert Tag」をクリックしてください。
![[multistep]タグ作成](https://wind-mill.co.jp/wp-content/uploads/2024/06/contactform7-multistep-forms29.png)
送信ボタンの前後に「Previous」と「multistep」タグを追加したら「保存」してください。
入力内容の確認ページ作成
最後に確認ページと完了ページを作成しましょう。WordPressダッシュボードの左メニュー「固定ページ」→「新規固定ページを追加」に進みます。
続いて、確認ページ用に作成したフォームのショートコードをコピーします。
固定ページの本文にショートコードを貼り付けます。タイトルは「お問い合わせ内容の確認」にしました。
パーマリンクはmultistepタグを設定したときに「Next Page URL」で入力したURLと同じ「mail-confirmation」にしてください。
確認ページの内容を確認したら「公開」します。固定ページのURLが間違っていると、確認画面に飛ばないので注意してください。
完了画面（サンクスページ）作成
最後に完了画面（サンクスページ）を作成します。確認ページと同じく「新規固定ページを追加」してください。内容はシンプルなもので構いません。
タイトルは「お問い合わせありがとうございます」にしました。
パーマリンクはmultistepタグ作成時の「Next Page URL」で入力したURLと同じ「thanks-page」にしてください。
ページの文章はこんな感じです。適宜手を加えて、自分好みのサンクスページに仕上げてください。
お問い合わせありがとうございます。ご記入していただいた情報は無事に送信されました。 担当の者から折り返しご連絡差し上げますので、しばらくお待ち下さい。 <span style="font-weight:bold; color:#ff0000; font-size:1.6em;">確認のため、お客様に自動返信メールをお送りしております。</span> <a href="https://hogehoge.com/">トップページに戻る</a>
メール送信の流れ 確認画面と完了画面
では、実際にメールを送信してみましょう。まずはメールフォームから内容を入力して、送信ボタンをクリックします。
確認画面に移動しました。メールフォームに入力した内容が表示されていますね。ここで「入力画面に戻る」か「送信」します。
確認画面からサンクスページ(完了画面)に移動して、メールが送信されたことを知らせています。
Contact Form 7 の送信完了メッセージはボタンの下に表示されて見づらいのですが、サンクスページに移動させるとメールの送信完了がひと目でわかるようになります。
確認画面やサンクスページに飛ばない
確認画面やサンクスページ(完了画面)に飛ばない場合は、フォームタグ生成の「Next Page URL」に入力したURLと、固定ページのURLが一致していない可能性があります。
フォームタグのURLと、確認画面やサンクスページ(完了画面)のURLが正しく設定されているかどうか確認してください。
自動送信メールが届かない
Contact Form 7 Multi-Step Formsをインストールすると、自動送信メールの設定が変わります。
自動送信メールを入力フォームに設定している場合は、複製した確認画面のフォームにも自動送信メールの内容が複製されているので、この問題は起こりません。
もし確認画面のフォームを新規で作成した場合は、もう一度自動送信メールを設定する必要があります。
送信後のフォームに前回の入力内容が残る
メールフォームに入力内容が残っていると、個人情報保護の面で問題が生じます。
確認画面のフォームでmultistepのタグを作成するときは「Last Step」にチェックを入れないと、フォームに前回の入力内容が残ったままになります。
multistepで生成されたタグに「last_step」が入っているかどうかを確認してください。
プラグインで確認画面とサンクスページを作ろう
Contact Form 7 は基本的に入力画面だけしかないので、確認画面と完了画面があるとメール送信のステップがわかりやすくなります。
Contact Form 7 の確認画面は、プラグインを使って追加するのが一番簡単です。
Contact Form 7 Multi-Step Forms は設定もそれほど難しくないし、HTMLやCSSを追記すれば表示やデザインのカスタマイズも可能です。
完了画面（サンクスページ）も、ページの作成と簡単なコードの追加だけで実現できます。どちらもそれほど難しくないので、ぜひチャレンジしてみてください。
その他Contact Form 7 の関連記事です。よかったらこちらもご参照ください。
