完了しやすく、コンバージョン率の高いWordPressの複数ステップフォームを作成したいですか？
長いフォームを小さなステップに分割すると、ユーザーエクスペリエンスが大幅に向上することがわかりました。一度にすべてを表示するのではなく、圧倒されにくい、一口サイズのフィールドを通じてユーザーを誘導します。
このガイドでは、最高のドラッグ＆ドロップフォームビルダーの1つであるWPFormsを使用して、複数ステップのフォームを正確に作成する方法を説明します。
WordPressで複数ステップのフォームを追加する理由
複数ステップフォームは、ユーザーが一度に1つの小さなセクションに集中するため、長いフィールドのスクロールに直面するのではなく、フォームの放棄を減らします。Formstackの調査によると、複数ステップフォームは、同等の単一ページフォームよりも最大300％多くの完了を生成できます。
プログレスバーは、ユーザーに完了までの残り時間を正確に示し、モチベーションをさらに高めます。また、条件付きロジックを使用すると、ユーザーの回答に基づいて異なるページを表示できるため、実際に必要な情報のみを収集できます。
複数ステップフォームを使用するタイミング
すべてのフォームを複数のステップに分割する必要はありませんが、一部のフォームタイプでは、ページ区切りを追加すると完了率が明らかに向上します。ここでは、最も大きな違いが見られるシナリオをいくつか紹介します。
- 多くのフィールドを持つ登録フォーム – イベントサインアップやメンバーシップフォームで、名前、住所、好み、支払い情報を一度にすべて尋ねる場合、論理的なグループに分割すると効果的です。
- クイズ形式のリードジェネレーションフォーム – 回答（予算、タイムライン、プロジェクトタイプ）に基づいてリードを評価するフォームは、一度に1つの質問を表示すると会話のように感じられます。
- 複数ページのチェックアウトフロー – 連絡先情報、配送先住所、支払い情報を個別のステップで収集する注文フォームは、各段階での認知負荷を軽減します。
- 求人応募フォーム – 個人情報、職務経歴、勤務可能時間に関する質問を含む応募フォームは、3ステップ構造に自然に適合します。
- アンケート – 複数のトピック領域を持つ長いアンケートは、単一の長いページとして表示されるのではなく、テーマ別のセクションにグループ化すると完了しやすくなります。
複数ステップフォームのデザインを改善するためのヒント
構築を開始する前に、いくつかの設計上の決定を行うことで、フォームの入力を大幅に簡単にすることができます。私がWPFormsで設定したフォームで、これらが実際に違いを生むのを見てきました。
- 各ステップは最大3〜5フィールドに抑えましょう。 1ページあたりのフィールドが5つを超えると、再び長いフォームのように感じ始めます。
- プログレスバーには、番号だけでなくステップ名を表示しましょう。「ステップ2/4」よりも「ステップ2：連絡先詳細」の方が安心感があります。
- 明確なボタンラベルを使用しましょう。「次のステップ」または「配送に進む」は、ユーザーがクリックしたときに何が起こるかを正確に伝えます。
- 前のボタンを有効にしましょう。ユーザーは、すでに入力した内容を失うことなく、戻って以前の回答を修正する方法が必要です。
- 可能な場合は、部分的な入力を保存しましょう。 WPForms Proは部分的な入力保存をサポートしているため、開始したが完了しなかったユーザーにフォローアップできます。
WordPressでマルチステップフォームを作成する最良の方法
このチュートリアルでは、WPFormsを使用してWordPressでマルチパートフォームを作成します。WPFormsは、最高のドラッグアンドドロップWordPressフォームビルダープラグインです。300万以上のアクティブインストールがあり、最も初心者向けのツールです。
さらに良いことに、無料版と有料版の両方がありますが、今日はWordPressでマルチページフォームを作成するためにWPFormsのProバージョンを使用します。
詳細については、この詳細なWPFormsレビューをご覧になってはいかがでしょうか？
それでは、最初のステップである新しいフォームの作成から始めましょう。
開始する前に：マルチステップフォームを機能させるページブレークフィールドは、WPForms Pro以降でのみ利用可能です。WPFormsの無料版にはこの機能は含まれていません。無料版がインストールされている場合は、以下の手順を実行する前にアップグレードする必要があります。
ステップ1：WordPressで新しいフォームを作成する
最初に行うことは、WPFormsプラグインをインストールしてアクティブ化することです。方法がわからない場合は、初心者向けのWordPressプラグインのインストールガイドに従ってください。
WPFormsを使用すると、あらゆる種類のフォームを複数のパートに分割できます。それでは、簡単な連絡先フォームを作成しましょう。
WPForms »新規追加に移動して新しいフォームを作成し、利用可能なテンプレートを表示します。
次に、その画面でフォームに名前を付け、シンプルな連絡先フォームテンプレートを選択します。
WPFormsは、テンプレートを編集するためにドラッグアンドドロップフォームビルダーで開きます。
シンプルな連絡先フォームには、次のフィールドがすでにフォームに追加されています：
- 名前
- Eメール
- コメントまたはメッセージ
また、フォームフィールドを移動したり、左側の列から右側の列にドラッグして追加フィールドを追加したりすることもできます。フォームフィールドをクリックするだけでコンテンツを編集し、ドラッグして位置を変更できます。
WordPressサイトに連絡先フォーム以外のフォームを追加したい場合は、WPFormsで次のフォームタイプを作成することもできます：
これらのフォームタイプのほとんどは、標準の連絡先フォームよりも長いため、複数のステップに分割することでコンバージョンを向上させることができます。
ステップ2：フォームを複数のパートに分割する
フォームをカスタマイズして必要なフィールドを追加したら、ページ区切りフィールドを追加してフォームを複数のページに分割します。
これは、Fancy Fieldsの見出しの下を見て、ページ区切りフォームフィールドを右側のパネルにドラッグすることで行えます。
次に、フォームを分割したい場所にフィールドをドロップします。
フォームを別のページに分割したいすべてのセクションでこれを繰り返します。そこから、フォームを完成させるために必要なフィールドを追加して、フォームのカスタマイズを続行します。
WPFormsでは好きなだけフォームを追加できますが、ユーザーに情報が多すぎて圧倒されないようにすることが重要です。そうすると、ユーザーはフォームを放棄する可能性があり、それはあなたが達成したいこととは正反対です。
ステップ3：フォームのプログレスバーをカスタマイズする
フォームの流れを改善するために、進捗バーを含めることができます。進捗バーは、フォームのさまざまなセクションについてユーザーに伝え、完了すべきことがどれだけ残っているかの優れた視覚的指標となります。
WPFormsには、マルチステップフォーム用の3つの異なる進捗インジケーターバーが付属しており、次のとおりです。
- コネクタ – 各ステップの接続バーとページタイトル。
- 円 – 各フォームステップの番号付き円とページタイトル。
- 進捗バー – ユーザーがフォームステップを完了するにつれて進捗を示すインジケーター。
各オプションはユーザーに異なる視覚的体験を提供します。進捗バーは、ユーザーが各ステップを完了するにつれて進むパーセンテージベースの塗りつぶしを示します。円とコネクタオプションは、ステップカウント（「4分の2ステップ」）と名前付きラベルを表示し、各ステップに「詳細」や「支払い」のような明確なテーマがある場合にうまく機能します。
ステップ名は、追加の1分を費やす価値があります。「ステップ2：配送先住所」のようなラベルは、ユーザーがプロセス内のどこにいるかを正確に伝えるため、ラベルのないバーよりも離脱率を減らすことができます。ユーザーの観点からは、ラベル付きステップはプロフェッショナルに見え、一般的な進捗インジケーターよりも威圧感が少なくなります。
マルチページフォームの最初のページの進捗バーとページタイトルを変更するには、最初のページの区切りフィールドをクリックします。
次に、フォームの進捗タイプを選択できる新しいパネルが表示されます。その領域では、必要に応じて進捗インジケーターを強調するために使用される色を変更することもできます。
円またはコネクタオプションを選択した場合、ページタイトルも変更できます。これにより、ユーザーはフォームのどの部分にいるのかを知ることができ、迷子になるのを防ぐことができます。ただし、そうしたくない場合は、標準の進捗バーがユーザーに表示され、フォームの入力をガイドします。
次に、ユーザーをフォームの次のページに移動させる次のページボタンとテキストを変更できます。
これを行うには、フォームの構築中に簡単に追加したページ区切りセクションをクリックします。
さらに、トグルをオンの位置にクリックすることで、前のページボタンを追加できます。これにより、ユーザーは情報を追加し忘れた場合に元に戻ることができます。
プログレスバーのカスタマイズが完了したら、保存をクリックして次のステップに進んでください。
ステップ4：フォームの設定を編集する
次に、フォーム設定の編集に進みましょう。これを行うには、設定 » 一般に移動します。
このセクションでは、次のオプションを設定できます。
- フォーム名 – 必要に応じて、フォームに新しい名前を付けます。
- フォームの説明 – 参照用にフォームに説明を追加します。
- 送信ボタンのテキスト – 送信ボタンのテキストを変更します。
- スパム設定 – スパム防止ハニーポットオプションを有効にすることで、スパマーによる不要な送信を防ぎます。
- GDPR機能 – IPアドレスなどの機密データがフォームに入力された情報の保存を無効にして、GDPRに準拠します。
設定が構成されたら、保存をクリックします。
ステップ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イベント登録フォームの作成方法
また、よろしければ、FacebookやTwitterをフォローして、役立つヒントやチュートリアルを入手してください。
