Contact Form 7のステップフォーム作成ガイド【Multi-Step Forms】

カッパ子

サイトの問い合わせフォームが長くなっちゃった

ユウ

それならステップフォームにして短く分けたら？

お問い合わせフォームを複数のステップに分けて入力できるようにしたいときに便利なのが「Multi-Step Forms for Contact Form 7」というプラグインです。

長い入力フォームを分割できるので、ユーザーの心理的負担を軽くすることができます。

本記事では、Multi-Step Formsを使ってステップフォームを作成する方法を解説します。

Multi-Step Formsの事前準備

設定の前に、このプラグインは「Contact Form 7」が前提となるため、事前にプラグインを導入しておきましょう。

また、ステップフォームはステップごとにフォームとページを割り当てる形で作成します。

フォームを３ステップに分ける場合、３つのフォームを作成し、それぞれを固定ページに設置する必要があるので、事前に固定ページを作成してURLを設定しておきましょう。

固定ページのURLは「contact-step1」のような分かりやすいものにしておくと管理しやすいと思います。

プラグインを有効化したら、Contact Form 7のフォームを追加するボタン一覧に「multistep」「multiform」「previous」が追加されます。

最初のステップ用フォームを作成したら、送信ボタンではなく「multistep」を設置、そうしたら２つ目、３つ目のフォームを同様に作成します。

２つ目以降のステップでは「previous」で戻れるようにして、最後の入力が終わったら「multiform」で入力内容の表示と送信ボタンを作っておくと自然なステップフォームになるでしょう。

メールの設定は最後のステップフォーム部分で行えば問題ありません。

ステップフォームはユーザーの心理的負担を軽くする効果がありますが、ステップが多いほどページやフォームの数が増えてしまうので管理者側の手間は増えてしまいます。

そのため、どこまでステップを小分けにするか、事前にしっかり検討しておきましょう。

もしフォームに10項目あった場合、10ステップに分けるとユーザーは一つずつ入力していくだけで済みますが、ページとフォームは10個作らないといけないので管理が大変になる。

だから名前やメールアドレスのような基本項目はまとめて、問い合わせ内容のような入力に手間がかかるものを分割して３〜４ステップくらいでまとめる、みたいな感じで考えておけば良いと思います。

デザイン面に関してはユーザーは「現在ステップがどこまで進んでいるか」「フォームはどのくらいのボリュームがあるのか」が分かりにくくなりがちです。

そのため、ページ上部にステップの番号やバーなど、進捗が分かるものを設置することで、ユーザーが安心して操作できるようにしておきましょう。

Multi-Step Forms for Contact Form 7を使えば、長いフォームも分かりやすく分割して問い合わせ率の向上を図ることができます。

デザイン面など多少の手間はありますが、ユーザーの使いやすさを改善できる便利なプラグインなので、自分のサイトに最適なステップフォームを作ってみてください。