ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

長いフォームをステップ分割できる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」を使うことで実現できます。

バージョン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のフォーム設定をみると3つのボタンが追加されています。

さらに「メッセージ」が1つ追加されています。

途中のステップページへアクセスしてきたユーザーに表示されます。
テキストを「お問い合せはフォームの最初からご入力ください」などに変更しておきましょう。

固定ページの作成

今回は「STEP1」「STEP2」「確認画面」「完了画面」といったステップ型のフォームにします。

Contact Form 7 Multi Step Formのの設定で固定ページのURLが必要になるため、事前にそれぞれの固定ページを作っておきます。今回の場合は4ページ作成します。

URL情報だけが必要になるため、固定ページの中身やテンプレートが無くても問題はありません。

ステップ1のフォームを作成する

ステップフォームの作り方は簡単です。
まず、Contact Form 7で通常通りのフォームを作り、そこにMulti-Step Forms独自のタグを差し込むだけです。

まずはステップ1となるフォームを作ります。
サンプルでは「名前」と「メール」の入力だけにしました。


「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」のみ設定するだけです。


ステップ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のタグが一番最後に挿入されているかを確認してください。


WordPressにjQuery2系・3系を導入している場合は、稼働しません。
WordPress標準のJQuery1系を利用してください。


Framingo、Contact Form 7 Databaseを導入している場合

Framingo、Contact Form 7 Databaseなどのフォームのデータを保存するプラグインを導入している場合は、注意が必要です。

ステップ1、ステップ2もデータとして保存されるため、最後のステップだけデータを保存するように設定します。

multistepタグに「skip_save」を追記します。

multistepタグを挿入する時に「Skip Save」にチェックを入れても良いでしょう。

これで最後のステップだけのデータが保存されるようになります。


ステップ型の入力フォームを導入することで、フォームの離脱率を大きく改善することができます。

EFO(エントリーフォーム最適化)に取り組んでいる方は、導入してみてはいかがでしょうか。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ