WordPressで、入力が簡単でコンバージョン率の高いマルチステップフォームを作成したいですか？
長いフォームを小さなステップに分けることで、ユーザーエクスペリエンスが向上することがわかりました。すべてを一度に表示するのではなく、一口サイズのフィールドに誘導することで、圧倒されることが少なくなります。
このガイドでは、最高のドラッグ＆ドロップフォームビルダーの一つであるWPFormsを使ってマルチステップフォームを作成する方法を紹介します。
なぜWordPressにマルチステップフォームを追加するのか？
段階的なフォームは、ユーザーが長い入力欄のリストを一度に目にするのではなく、一度に小さなセクションに集中できるため、フォームの放棄率を低減します。Formstackの調査によると、段階的なフォームは、同等の単一ページ形式のフォームと比較して、完了率が最大300%高くなることが示されています。
進捗バーは、完了まであとどれくらい残っているかをユーザーに明確に示すことで、さらなるモチベーションを高めます。また、条件分岐ロジックを活用すれば、ユーザーの回答に応じて異なるページを表示できるため、実際に必要な情報のみを収集することができます。
マルチステップフォームを使用するタイミング
すべてのフォームを複数のステップに分割する必要はありませんが、一部のフォームでは、ページ区切りを追加することで完了率が明らかに向上します。特に大きな効果が見られるのは、次のようなケースです：
- 入力項目が多い登録フォーム――イベントの申し込みや会員登録フォームなど、氏名、住所、希望事項、支払い情報を一度に記入する必要がある場合は、項目を論理的なグループに分けて整理すると便利です。
- クイズ形式のリード獲得フォーム– 回答（予算、スケジュール、プロジェクトの種類）に基づいてリードを絞り込むフォームは、質問を1つずつ表示することで、まるで会話のような感覚を生み出します。
- 複数ページにわたる決済フロー– 連絡先情報、配送先情報、支払情報を別々のステップで入力する注文フォームは、各段階での負担を軽減します。
- 求人応募フォーム– 個人情報、職歴、勤務可能日時に関する質問が含まれる応募フォームは、3段階構成に最適です。
- アンケート調査– 複数のテーマを含む長めのアンケートは、1つの長いページとして表示するよりも、テーマごとにセクション分けした方が回答しやすくなります。
多段階フォームの設計を改善するためのヒント
フォームの作成を始める前に、いくつかの設計上の判断を下しておくことで、フォームの入力が格段にスムーズになります。私がWPFormsで作成したフォームでは、こうした工夫が大きな効果を発揮しているのを目の当たりにしてきました。
- 各ステップは最大3～5項目に抑えてください。1ページに5項目を超えると、また長いフォームのように感じられてしまいます。
- 進捗バーには、単なる番号だけでなく、ステップ名も表示しましょう。「ステップ2：連絡先情報」は、「全4ステップ中のステップ2」という表示よりも、利用者に安心感を与えます。
- ボタンのラベルは分かりやすくしましょう。「次のステップ」や「配送へ進む」といった表記は、クリックした際に何が起こるかをユーザーに明確に伝えます。
- 「戻る」ボタンを有効にしてください。ユーザーは、すでに記入した内容を失うことなく、前の回答に戻って修正できる方法が必要です。
- 可能であれば、未完了の入力内容を保存してください。WPForms Proは未完了の入力内容の保存に対応しているため、入力を開始したものの完了しなかったユーザーにフォローアップを行うことができます。
WordPressでマルチステップフォームを作成するベストな方法
このチュートリアルでは、WPFormsを使ってWordPressでマルチパートのフォームを作成します。WPFormsはドラッグ＆ドロップでWordPressのフォームを作成できる最高のプラグインです。WPFormsはドラッグ＆ドロップでWordPressのフォームを作成できる最高のプラグインです。
WPFormsには無料版と有料版がありますが、今日はWordPressで複数ページのフォームを作成するためにWPFormsのPro版を使用します。
詳しくはWPFormsのレビューをご覧ください。
それでは最初のステップ、新しいフォームの作成から始めましょう。
開始する前に：複数ステップのフォームを実現する「改ページ」フィールドは、WPForms Pro以降でのみ利用可能です。WPForms の無料版にはこの機能は含まれていません。無料版をご利用の場合は、以下の手順を実行する前にアップグレードする必要があります。
ステップ1: WordPressに新しいフォームを作成する
最初に行うことは、WPFormsプラグインをインストールして有効化することです。もし方法がわからない場合は、初心者のためのWordPressプラグインインストールのステップバイステップガイドに従ってください。
WPFormsではどんなタイプのフォームでも複数のパーツに分割することができます。
WPForms " Add Newで新しいフォームを作成し、利用可能なテンプレートを表示します。
その画面でフォームに名前をつけ、シンプルコンタクトフォームテンプレートを選びます。
WPFormsはドラッグ＆ドロップフォームビルダーでテンプレートを開き、編集できるようにします。
シンプルなお問い合わせフォームには、以下のフィールドがすでに追加されています：
- 名称
- 電子メール
- コメントまたはメッセージ
また、左側の列から右側の列にドラッグすることで、フォームフィールドを移動したり、フィールドを追加したりすることもできます。任意のフォームフィールドをクリックして内容を編集し、ドラッグして位置を変えてください。
WordPressサイトにお問い合わせフォーム以外のフォームも追加したい場合は、WPFormsで以下のフォームタイプも作成できます：
これらのフォームタイプのほとんどは、標準的なコンタクトフォームよりも長いため、複数のステップに分けることでコンバージョンを向上させることができます。
ステップ 2: フォームを複数のパーツに分割する
フォームをカスタマイズし、必要なフィールドを追加したら、フォームを異なるページに分割するために改ページフィールドを追加します。
Fancy Fields "見出しの下にある "Page Break"フォームフィールドを右側のパネルにドラッグしてください。
次に、フォームの分割したい場所にフィールドをドロップします。
フォームを別のページに分割したいすべてのセクションでこれを繰り返します。そこから、フォームを完成させるために必要なフィールドを追加して、フォームのカスタマイズを続けます。
WPFormsでは好きなだけフォームを追加することができますが、あまりに多くの情報でユーザーを圧倒しないようにすることが重要です。ユーザーがフォームを放棄してしまう可能性があります。
ステップ 3: フォームのプログレスバーをカスタマイズする
フォームの流れを良くするために、プログレスバーを含めることができます。プログレスバーは、フォームのさまざまなセクションについて人々に伝え、あとどれくらいで完了するのかを視覚的に示す素晴らしいインジケータです。
WPFormsには、マルチステップフォーム用に以下の3種類のプログレスインジケータバーが用意されています：
- コネクター- フォームの各ステップのコネクティングバーとページタイトル。
- サークル- 各フォームのステップに番号が振られたサークルとページタイトル。
- プログレスバー- ユーザーがフォームのステップを完了する際の進捗状況を示すインジケータ。
各オプションは、ユーザーに異なる視覚的な体験を提供します。「プログレスバー」では、ユーザーが各ステップを完了するにつれて、パーセンテージに基づいた表示が徐々に埋まっていきます。「サークルとコネクター」オプションでは、ステップ数（「4つのステップのうち2つ目」）とラベル名が表示されます。これは、「お客様の詳細」や「お支払い」のように、各ステップに明確なテーマがある場合に効果的です。
ステップ名の設定には、多少の時間を割く価値があります。「ステップ 2：配送先住所」のようなラベルを付けることで、ユーザーは現在の進行状況を正確に把握でき、ラベルのない進捗バーよりも離脱率を抑えることができます。ユーザーにとって、ラベル付きのステップはプロフェッショナルな印象を与え、一般的な進捗インジケーターよりも敷居が低く感じられます。
複数ページのフォームの最初のページのプログレスバーとページタイトルを変更するには、最初のページの区切りフィールドをクリックします。
すると新しいパネルが表示され、フォームの進捗タイプを選択することができます。このエリアでは、進捗インジケータの色を変更することもできます。
丸やコネクタのオプションを選択すると、ページタイトルも変更できます。そうすることで、ユーザーがフォームのどの部分にいるのかを知ることができ、迷うことがなくなります。しかし、そうしたくない場合は、標準のプログレスバーがユーザーに表示され、フォームへの入力をガイドします。
次に、ユーザーをフォームの次のページに移動させる「次のページ」ボタンとテキストを変更することができます。
これを行うには、フォーム作成時に追加した改ページセクションをクリックします。
さらに、トグルをオンにして「前のページ」ボタンを追加することもできます。そうすることで、ユーザーが情報を追加し忘れた場合に戻ることができます。
プログレスバーのカスタマイズが完了したら、「保存」をクリックして次のステップに進みます。
ステップ 4: フォームの設定を編集する
それでは、フォーム設定の編集に移りましょう。これを行うには、設定 " 一般に進みます。
このセクションでは、以下のオプションを設定できます：
- フォーム名- フォームに新しい名前を付けます。
- フォームの説明- 参照のためにフォームに説明を追加します。
- 送信ボタンテキスト- 送信ボタンのテキストを変更します。
- スパム設定- スパマーによる不要な送信を防ぐため、スパム対策ハニーポットオプションを有効にします。
- GDPR機能-GDPRに準拠するため、IPアドレスやその他の機密データなど、フォームに入力された情報の保存を無効にします。
設定が完了したら、「保存」をクリックします。
ステップ 5: フォーム通知を設定する
WPFormsの通知設定は、WordPressサイトでフォームが送信されたときにメールを送信します。
設定 " 通知 をクリックすると、通知設定が表示されます。
しかし、フォーム通知を無効にしなければ、あなたのサイトでフォームが送信されるたびにメールが届きます。
一方、スマートタグを使えば、フォームに入力した人にメールを送ることができます。スマートタグは、フォームが正しく送信され、あなたがそれを受け取ったことを知らせる優れた方法です。
複数のステップがある長いフォームでは、入力に時間がかかる可能性があるため、この機能を使うとさらによい。さらに、入力がうまくいったかどうか、ユーザーを迷わせずに済みます。より詳しいヘルプは、フォーム通知の設定に関するドキュメントをご覧ください。
通知の設定が終わったら、フォームの確認メッセージの設定に移ります。
ステップ 6: フォームの確認メッセージを定義する
フォーム確認メッセージは、ユーザーがあなたのサイトでフォームを送信したときに表示される簡単なメッセージです。フォームが処理され、次にどのようなステップを踏むべきかを伝える優れた方法です。
WPFormsには3種類の確認メッセージがあります：
- メッセージ- フォームが送信されたことを知らせるシンプルなメッセージ。
- ページを表示する- フォームを送信した後、サンキューページなど別のページにユーザーを送ります。
- URLへ移動（リダイレクト）- フォーム送信後、サイト訪問者を別のウェブサイトに移動させます。
確認メッセージを設定するには、設定 " 確認をクリックします。
次に、フォーム入力後に訪問者に表示するメッセージの種類を選択します。このチュートリアルでは「メッセージ」を選択します。
メッセージ・テキストをあなたのニーズに合わせてカスタマイズし、満足したら「保存」をクリックします。
これでWordPressにフォームを追加する準備ができました。
ステップ 7: WordPressにフォームを追加する
マルチステップフォームを作成したら、WordPressサイトに追加しましょう。WPFormsを使用すると、ウェブサイトの多くの領域にフォームを追加することができます。これは、あなたのサイトのページや投稿、サイドバー、および他のウィジェット対応の領域が含まれています。
WordPressページにマルチステップフォームを追加する方法を見てみましょう。
まず、WordPressの管理画面にアクセスし、ページ " 新規追加をクリックします。
次に、WordPressエディターのプラスアイコンをクリックして、新しいコンテンツブロックを追加します。検索フィールドにWPFormsと入力すると簡単に見つかります。
WPFormsブロックをクリックしてページに追加します。
WPFormsがブロック内に表示されたら、ドロップダウン矢印をクリックしてリストからマルチステップフォームを選択し、ページに挿入します。
次に公開をクリックして WordPress でページを公開します。これであなたのウェブサイトにマルチステップフォームが表示されます。
SeedProdのランディングページに複数ステップのフォームを追加する
フォームの作成は完了しました。さて、肝心なのはどこに配置するかです。標準的なWordPressページにマルチステップフォームを追加することも可能ですが、SeedProdで作成した専用のランディングページに埋め込むことで、フォーム周辺のデザインを完全にコントロールできます。これにより、ユーザーの注意が散漫になる要素を減らし、コンバージョン率を向上させることができます。
SeedProdには、作成したあらゆるフォームに直接接続できるWPFormsブロックが組み込まれています。
設定方法は以下の通り：
- SeedProd » ランディングページに移動し、「ページを編集」をクリックして、SeedProdページビルダーでランディングページを開きます。
- 左側のパネルで「WPForms」を検索し、フォームを表示したいページ上の場所に「WPForms」ブロックをドラッグして配置します。
- ブロックをクリックして設定画面を開き、ドロップダウンメニューから既存のフォーム一覧の中からマルチステップフォームを選択してください。
- キャンペーンに合わせて、周辺セクションのレイアウト、見出し、ボタンのスタイルを調整し、「保存してページを公開」をクリックしてください。
フォームは、進捗バーやマルチステップレイアウトを含め、WPFormsでの設定通りに正確に表示されます。まだランディングページを作成していない場合でも、SeedProdのドラッグ＆ドロップエディタを使えば、コードを一切触ることなく、テンプレートから簡単に作成できます。
WordPressのマルチステップフォームに関するFAQ
以上です！WordPress でマルチステップフォームを作成する方法を学んだので、すぐにユーザーエンゲージメントとフォームコンバージョン率を向上させることができます。
この記事が気に入ったら、あなたのサイトで使えるWordPressプラグインのショーケースもご覧ください。
その他のフォームのチュートリアルについては、以下の記事を参照のこと：
- ファイルアップロード機能付きWordPressフォームの作り方
- Typeformスタイルのフォームの作り方
- WordPressでお問い合わせフォームを作成する方法
- WordPressでオンライン注文フォームを作成する方法
- WordPressイベント登録フォームの作り方
もしよろしければ、フェイスブックや ツイッターで、より役立つヒントやチュートリアルをご覧ください。
