ContactForm7に確認画面とサンクスページ(完了画面)を追加する

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の使い方と設定方法

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を設定します。

「Last Step」は必ずチェック、「Send Email」をチェックをすると、確認画面の送信ボタンからメールが送信されます。

「Next Page URL」は完了ページのURLになります。ここでは「thanks-page」としました。

作成したタグ［multistep multistep-91 last_step send_email “thanks-page”］を確認したら、「Insert Tag」をクリックしてください。

送信ボタンの前後に「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>