問い合わせフォームを入力・確認・送信の3ステップに分割できる「Contact Form 7 Multi-Step Forms」

Contact Form 7でつくったフォームを対象に、問い合わせフォームを複数のページに分割したり、確認画面を追加できるプラグインをご紹介いたします。

確認画面を追加するプラグイン「Contact Form 7 add confirm」に関しては、一部のプラグインと併用すると正常に送信できない不具合が発生しますので、その代替プラグインとしても使えます。

「Contact Form 7 Multi-Step Forms」の機能概要

「Contact Form 7 Multi-Step Forms」は、入力フォームを複数ページに分割できるプラグインです。「Contact Form 7」でつくったフォームのカスタマイズ用になります。

• 項目の多いフォームを複数ページに分割できる
• 入力項目の確認画面を追加できる

入力した項目の確認画面を追加する機能は、更新が止まっている「Contact Form 7 add confirm」の代わりにもなります。

プラグインのインストール

管理画面から「Contact Form 7 Multi-Step Forms」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

ダウンロード

「Contact Form 7 Multi-Step Forms」の使い方

プラグインの仕様として、フォームを表示するページごとに固定ページが必要です。例えば、入力フォームを3つのステップに分けたい場合は、先に3つの固定ページを作成しておく必要があります。

入力項目の確認画面ページについても同様で、あらかじめ固定ページを用意しておきましょう。それぞれ以下で解説いたします。

• フォームを分割したい
• 確認画面を追加したい

お問い合わせフォームをステップ式に分割する方法

プラグインを有効化したら、固定ページのURLのみ必要ですので、「フォームSTEP1」や「フォームSTEP2」のようなタイトルで作っておくといいでしょう。URLの末尾は「contact-form-step1」などで大丈夫です。

今回は3ステップに分ける場合を例に解説いたします。

入力項目は「Contact Form 7」と同じ要領で作っていきます。詳しい操作方法は下記記事を参考にご覧いただけます。

フォームの下部には「次へ進む」というボタンを設置します。ここからが当プラグインの機能になります。

上部のボタンから「送信ボタン」を追加し、ラベルを「次へ進む」（任意の名称）にした上で、タグを挿入します。

そのままでは通常の送信ボタンになっているので、続けて「multistep」をクリックします。

下記のウィンドウが開かれるので、そのフォームが一つ目の場合は、「First Step」にチェックを入れ、「Next Page URL」に2ステップ目の固定ページのURLを入力します。

1ページ目のフォームから、2ページ目のフォームへ移動させる場合は、下記のようになればOKです。

「previous」をクリックすると「前の画面に戻るボタン」を追加できます。2つ目以降のフォームに設置しておきましょう。

同じ要領で2ページ目から3ページ目へ移動する場合も、以下のように設定します。

最後にフォームの送信ページ（3ページ目）を作成します。このページが最後なので、「multistep」の入力欄には「Last Step」と「Send Email」の部分にチェックを入れます。

この時「Next Page URL」は空欄にしておきます。これで3ステップ分の入力フォームが完成しました。あとは予め作成した各固定ページにショートコードでフォームを設置すればOKです。

以下のようにフォームを3分割して表示できます。

入力項目の確認ページをつくる方法

入力した項目の確認ページも作れます。冒頭で述べた古いプラグインの代替となる機能はこの部分です。確認ページも固定ページで作成するので、あらかじめ確認ページ用の空の固定ページを作成しておきます。

タイトルは「入力項目の確認」などがいいかもしれません。テーマによってはパンくずリストに表示されます。URLの末尾は「contact-confirm」などが管理しやすいでしょう。

続いて、確認画面用のフォームを作成します。プラグインに用意されているボタン「formfield」を使います。

例えば、[multiform “your-name”]というタグを設置すると、前のフォームで入力された名前が確認ページに表示されます。

上記のようにinputに合わせて適宜変更して設置してください。最下部には、「previous」や「submit」、「multistep」タグを設置すればOKです。フォームを固定ページに設置すると下記のように表示されます。

※あくまで入力項目の確認画面になりますので、前のフォームで項目を入力していない場合は正しく表示されません。あとは、2ステップ目以降にこの確認ページ（固定ページ）をセットすればOKです。

まとめ

問い合わせフォームによっては、ユーザビリティを考えた工夫が必要になります。入力項目が多い場合は、ステップごとに分割したり、入力した項目を見直せる確認ページを設けるなどですね。

ユーザーの多い「Contact Form 7」ですが、当記事でご紹介したプラグインと組み合わせてより使いやすくカスタマイズしてみてください。

「Contact form7」をカスタマイズできるプラグイン

以下のようなプラグインもあるので、ご興味のある方はぜひチェックしてみてください。