長いフォームをステップ分割できるContact Form 7 Multi-Step Formsの導入方法
最近、新宿に引っ越したウェブデザイナーのNNです。今回は入力項目が多いフォームをステップ形式にする方法です。
Contact Form 7のアドオンContact Form 7 Multi-Step Formsの設定方法をご紹介します。Indeed（インディード）などでも使われているステップ型のフォームを簡単に作ることができます。
入力項目が多いフォームはユーザーの入力障壁となり、フォームの記入率が低くなってしまいます。
入力フォームを分割したステップ・フォーム型にすることで、記入率を高くすることができます。
ステップ・フォームにするには、Contact Form 7のアドオン「Contact Form 7 Multi-Step Forms」を使うことで実現できます。
Contact Form 7 Multi-Step Forms
バージョン4から設定方法が大きく変わり、より設定が簡単になっています。
Contact Form 7 Multi-Step Formsの特徴
- 長いフォームを分割することができる（デモ）
- 分割した分の固定ページとフォームが必要になり、初期設定の工数が増える
- Contact Form 7には無い、確認・完了ページを追加できる
- ステップごとにURLが違うため、アナリティクスで分析しやすい
- ファイルの添付も可能
ただし最終ステップのみ。無料バージョンはサイズ制限（4KBまで）があります - Framingo、Contact Form 7 Databaseにも対応
- マルチサイトには非対応
マルチステップのフォームは事前にContact Form 7を導入しておいてください。
Contact Form 7 Multi-Step Formsの設定方法
Contact Form 7 Multi-Step Formsには設定画面がありません。プラグインを有効にするだけです。
Contact From 7のフォーム設定をみると３つのボタンが追加されています。
さらに「メッセージ」が１つ追加されています。
途中のステップページへアクセスしてきたユーザーに表示されます。
テキストを「お問い合せはフォームの最初からご入力ください」などに変更しておきましょう。
固定ページの作成
今回は「STEP1」「STEP2」「確認画面」「完了画面」といったステップ型のフォームにします。
Contact Form 7 Multi Step Formのの設定で固定ページのURLが必要になるため、事前にそれぞれの固定ページを作っておきます。今回の場合は4ページ作成します。
URL情報だけが必要になるため、固定ページの中身やテンプレートが無くても問題はありません。
ステップ1のフォームを作成する
ステップフォームの作り方は簡単です。
まず、Contact Form 7で通常通りのフォームを作り、そこにMulti-Step Forms独自のタグを差し込むだけです。
まずはステップ１となるフォームを作ります。
サンプルでは「名前」と「メール」の入力だけにしました。
「multistep」ボタンをクリックして、Multi-Step Forms独自のタグを埋め込んでいきます。
フォームタグの設定画面が表示されます。
- 名前：何でも良いです。デフォルトのままで良いでしょう
- First Step：ステップ1のフォームになるのでチェックします
- Next Page URL：ステップ2の固定ページのURLを記入します
「Insert Tag」ボタンをクリックして、[submit」ボタンの下にマルチステップタグを挿入します。
ステップ1のフォームはこれで完了です。「保存」します。
ステップ2のフォームを作成する
新しいフォームでステップ2のフォームを作成します。
サンプルでは、問い合わせ文章を記入できるTextAreaだけになります。
「previous」ボタンをクリックして「戻る」ボタンタグを挿入します。
「multistep」ボタンをクリックして、Multi-Step Formsのタグを挿入します。
今回は「名前」「Next Page URL」のみ設定するだけです。
- 名前：何でも良いです。デフォルトのままで良いでしょう
- Next Page URL：ステップ3の固定ページのURLを記入します
ステップ2のフォームは最終的に下図のようになりました。
以上でステップ2のフォーム作成は完了です。
確認ページのフォームを作成する
新しいフォームで確認ページを作成します。
Multi-step formsが用意しているタグ[multiform]を使うことで、入力された内容を表示させることができます。
例えば[multiform "your-name"]とすると、入力された名前が表示されます。
※inputに合わせて、your-nameやonamaeなど適宜変更してください。
下図はサンプルとなります。
「multistep」ボタンをクリックして、Multi-Step Formsのタグを挿入します。
確認画面の送信ボタンをクリックしたら、メールを送信するようにします。
「Send Email」にチェックを入れて、「Next Page URL」には完了画面のURLを記入します。
最終的に下図のようになります。
以上で確認画面用のフォーム設定は完了です。
もし、確認画面と完了画面を兼用する場合は、Multi-Step Formsのタグは下図のようにします。
「Last Step」と「Send Email」にチェックを入れます。
「Next Page URL」は未記入にします。
Contact Form 7のメール設定をする
フォームの送信、自動返信メールの設定は「Send Email」のタグが挿入されている確認画面用のフォームに設定します。（※どのステップのフォームに設定してもメールの送信、自動返信メールは稼働するようです）
Contact Form 7のメール設定、自動返信メールの設定は下記URLで詳しく解説しています。
Contact Form 7のメール設定、自動返信メールの設定方法
固定ページにメールのショートコードを記入する
ステップ1、ステップ2、確認ページに、それぞれのお問合せフォームのショートコードを記入します。
固定ページにショートコードを記入します。
以上でContact Form 7 Multi-Step Formsの設定はすべて完了です。
お問い合せフォームがステップ・フォーム型になっています。
Multi-Step Formsが動作しない
MultiStepのタグが一番最後に挿入されているかを確認してください。
Multi Step Formsは、ローカルストレージに情報を一時的に保管するので、サーバのキャッシュ機能を使っている場合も動画が不安定になります。
例えば、エックスサーバーのキャッシュ機能をONにしていると、確認画面での情報が古い入力情報のままになったりします。
サーバーのキャッシュ機能をOFFにして、W3 Total CacheやWP Fastest Cacheなどのプラグインによるキャッシュにすることで正常に動作します。
Framingo、Contact Form 7 Databaseを導入している場合
Framingo、Contact Form 7 Databaseなどのフォームのデータを保存するプラグインを導入している場合は、注意が必要です。
ステップ1、ステップ2もデータとして保存されるため、最後のステップだけデータを保存するように設定します。
multistepタグに「skip_save」を追記します。
multistepタグを挿入する時に「Skip Save」にチェックを入れても良いでしょう。
これで最後のステップだけのデータが保存されるようになります。
ステップ型の入力フォームを導入することで、フォームの離脱率を大きく改善することができます。
EFO（エントリーフォーム最適化）に取り組んでいる方は、導入してみてはいかがでしょうか。
