AI要約
フォームを複数のページに分割したいですか？マルチページフォームを使用すると、長文のフォームを異なるセクションに分割でき、圧倒される感じを減らし、ユーザーエクスペリエンスを向上させることができます。
このチュートリアルでは、WPFormsでマルチページフォームを簡単に作成する方法を説明します。
まず、WPFormsがサイトにインストールされ、有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集する必要があります。
マルチページフォームの作成
フォームビルダーが開いたら、フォームに含めたいフィールドを追加してください。次に、ページ区切りフィールドをプレビューエリアにドラッグして、新しいフォームページを作成したい場所にドロップします。
追加する各ページ区切りフィールドは、フォームを複数のページに分割します。必要に応じて多くのページを追加できます。ページ区切りをフォームの別の場所に移動するには、プレビューエリアでクリックして、希望の場所にドラッグするだけです。
フォームページのカスタマイズ設定
WPFormsでは、ページタイトルの追加、プログレスバーのスタイルの選択など、マルチページフォームをカスタマイズするためのいくつかの方法を提供しています。
ページタイトル、ボタンテキスト、前のボタン
フォームビルダーのプレビューエリアでページ区切りフィールドをクリックすると、フィールドオプションパネルが開きます。ここで、ページタイトルを編集できます。
また、ユーザーが次のページに進むためにクリックするボタンのテキストを、次のラベルフィールドでカスタマイズすることもできます。
前のボタンも有効にしたい場合は、前の表示オプションをオンにしてください。このナビゲーションボタンは、コンバージョンを最適化するためにデフォルトで非表示になっていますが、ページごとにユーザーに表示することができます。
注意：前の表示トグルは、フォームに複数のページ区切りフィールドがある場合にのみ表示されます。フォームの最初のページ区切りフィールドには表示されません。
前のボタンが有効になると、前のラベルオプションが表示され、ボタンのテキストをカスタマイズできるようになります。
フォームの最後のページに前のボタンを追加する
フォームの最後のページに前のボタンを表示するには、フォームビルダーのプレビューエリアで最後のフィールドの下にある区切り線をクリックします。
これにより、フィールドオプションパネルに前の表示トグルが表示されます。
上記のようにボタンテキストをカスタマイズするには、オンにしてください。
最初のページ設定とプログレスバーのスタイル
ページ区切りを追加すると、プレビューエリアのフォームの最上部に最初のページエリアが表示されていることに気づくかもしれません。最初のページ/プログレスインジケーターをクリックすると、マルチページフォームの追加オプションにアクセスできます。
まず、プログレスインジケーターをカスタマイズします。この機能は、フォームに何ページあり、現在どのページにいるかをユーザーに示します。プログレスインジケータードロップダウンで、なしを選択してこの機能を非表示にすることができます。
または、3つのプログレスインジケータースタイルから選択できます：プログレスバー、円、またはコネクタ。
プログレスバー：
プログレスバー形式のライブプレビューはこちらです。
円：
コネクタ：
注意：コネクタプログレスインジケータは、モバイルデバイスでは正しく表示されない場合があります。モバイルを含むすべてのデバイスでより良い結果を得るには、プログレスバーまたは円オプションの使用をお勧めします。
プログレスインジケーターの色を選択するには、カラーピッカーを使用するか、使用したい色のHEXコードを入力します。
最後に、ページタイトルフィールドにフォームの最初のページの名前を入力します。
訪問者がページ間を移動できるようにする
訪問者がプログレスインジケーターをクリックしてページ間を移動できるようにするには、プログレスインジケーターのドロップダウンから円またはコネクタのいずれかを選択します。
次に、ページナビゲーションを許可するオプションをオンにします。
この設定が有効になっている場合、訪問者はプログレスインジケーター内のページ番号またはコネクタステップをクリックして、フォーム内の別のページにジャンプできます。
訪問者が既にフォームに入力した情報は、フォームを送信する前にページ間を移動してもそのまま保持されます。
ページ区切り高度なオプション
最初のページフィールドオプションでは、高度なタブをクリックすることで、さらに多くのページ区切り設定をカスタマイズできます。
ここでは、次の設定が見つかります：
- ページナビゲーション配置：フォームナビゲーションボタンを配置する場所（左、右、中央、または分割）を選択します。
- スクロールアニメーションを無効にする：ユーザーが「次へ」ボタンをクリックしたときに、ページの上部への自動スクロールを防ぎます。
ここにCSSクラスを追加することもできます。このカスタムコードは、フォームの最初のページ区切りフィールドにのみ適用されます。他のページ区切りフィールドにCSSクラスを追加するには、プレビューエリアの関連フィールドをクリックし、フィールドオプションパネルの高度なタブを選択します。
よくある質問
以下に、複数ページフォームに関してよく寄せられる質問とその回答をまとめました。
マルチページフォームで空のページをスキップできますか？
はい、複数ページフォームで空のページをスキップできます。方法については、条件付きロジック使用時のページ区切りスキップに関するガイドをご覧ください。
選択に基づいてマルチページフォームを自動的に次のページに進めることはできますか？
はい、ユーザーが選択すると自動的に次のページに移動するように複数ページフォームを設定できます。設定方法の詳細については、開発者向けドキュメントを参照してください。
フォームに追加したページ区切りフィールドを削除できますか？
はい、ページ区切りフィールドは削除できます。ただし、削除アイコンは他のフィールドとは異なる場所に表示されます。ほとんどのフォームフィールドでは、ホバーすると右端にゴミ箱アイコンが表示されますが、ページ区切りフィールドの削除アイコンは「次へ」ボタンの隣に表示されます。
ページ区切りフィールドを削除するには、プレビューエリアでホバーし、「次へ」ボタンの隣にあるゴミ箱アイコンをクリックするだけです。これにより、ページ区切りが削除され、ページが結合されます。
これで、WPFormsで複数ページフォームを作成できるようになりました。
次に、フォームにテキストや説明を追加する方法を学びたいですか？詳細については、入力以外のテキストの追加に関するチュートリアルをご覧ください。