AI要約
WordPressフォームで、ユーザーが類似した情報のセットを繰り返し入力できるようにしますか？ WPFormsのリピーターフィールドを使用すると、フォーム内にフィールドの繰り返しセットを作成できます。これは、複数のスキルや職務経験など、類似した情報を複数収集する場合に特に役立ちます。
このチュートリアルでは、WPFormsのリピーターフィールドの使用方法を説明します。
開始する前に、WPFormsをインストールしてアクティブ化し、ライセンスを検証してください。次に、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスしてください。
フォームへのリピーターフィールドの追加
フォームビルダーでは、リピーターフィールドは「Fancy Fields」セクションにあります。フォームに追加するには、リピーターフィールドをクリックするか、フォームプレビューエリアにドラッグアンドドロップします。
表示オプションの選択
リピーターフィールドを追加したら、サイトのフロントエンドでフィールドのグループがどのように表示されるかを選択する必要があります。
これを行うには、ビルダー内のリピーターフィールドをクリックして、フィールドオプションパネルを開きます。そこには、「表示」セクションがあり、「行」と「ブロック」の2つの選択肢があります。
以下で、各オプションがどのように機能するかを説明し、どちらを使用するかを決定するのに役立ちます。
行
このオプションはデフォルトで選択されています。各フィールドのグループを縦一列に、下から上に表示します。行表示は、各情報が個別に 1 つずつ入力されるシンプルなフォームに最適です。たとえば、行表示を使用して、ユーザーのソーシャルメディアプロファイルリンクや、求人応募用のポートフォリオピースへのリンクを収集できます。
行表示では、フィールドを横に並べることはできますが、縦に並べることはできません。たとえば、3列のレイアウトでは、1つの行に3つのフィールドを隣り合わせに配置できます。
ブロック
このオプションは、フィールドの配置方法においてより柔軟性を提供します。各ブロック内に複数の列と行を作成できるため、より複雑で整理されたレイアウトが可能になります。
ブロック表示は、関連フィールドをグループ化するのに理想的です。たとえば、ブロックレイアウトを使用して、役職、会社、場所、開始日、終了日の各フィールドをすべて同じブロック内に含めて、詳細な職務経歴を収集できます。
繰り返しセットが表示される方法を制御するために、フォームのニーズに最適なオプションを選択するだけです。
カラムレイアウトの選択
次に、リピーターフィールドのレイアウトプリセットを選択する必要があります。
リピーターフィールドには、フォームフィールドを異なる列に配置するための複数のオプションがあります。フィールドオプションパネルを開き、利用可能な列レイアウトを表示するには、フォームプレビューエリアのリピーター フィールドをクリックします。
これで、レイアウトセクションに複数の利用可能なレイアウトが表示され、それぞれに異なる列構成が用意されています。リピーターフィールドのデフォルトレイアウトは単一列レイアウトです。ただし、必要に応じて他の構成を選択することもできます。
注意： リピーターフィールドの列レイアウトオプションは、レイアウトフィールドのオプションと似ています。レイアウトの使用とカスタマイズの詳細については、レイアウトフィールドの使用方法ガイドをご覧ください。
リピーターフィールドへのフィールドの追加
表示とレイアウトオプションを選択したら、リピーターフィールドの列にフィールドを追加し始めることができます。
リピーターフィールドのいずれかの列にフィールドを追加するには、サイドバーからターゲット列にフィールドをドラッグアンドドロップします。
リピーターフィールドに追加したフィールドは、WPFormsの他のフィールドと同様にカスタマイズできます。これには、ラベル、プレースホルダー、その他のオプションの設定が含まれます。ただし、リピーターフィールド内のフィールドでは、条件付きロジックと計算を有効にできないことに注意してください。
注意：すべてのフィールドをリピーターフィールドに追加できるわけではありません。サポートされていないフィールドの完全なリストについては、FAQセクションをご覧ください。
追加および削除ボタンのカスタマイズ
ブロック表示オプションを使用する場合、フィールドのセットを追加および削除するためのボタンのデザインとラベルをカスタマイズできます。
フィールドオプションパネルには、ボタンタイプドロップダウンがあり、追加ボタンと削除ボタンのさまざまなデザインから選択できます。オプションには、アイコン付きボタン、ボタン、テキスト付きアイコン、アイコン、プレーンテキストが含まれます。
これらのボタンのラベルは、通常のテキスト入力を使用して変更することもできます。ボタンラベルセクションで、追加ラベルと削除ラベルの希望のテキストを入力します。
リピーターエントリの制限設定
リピーターフィールドには、ユーザーが単一の送信に追加できるエントリ数を制限するオプションも用意されています。
デフォルトでは、最小値は1、最大値は10に設定されています。ただし、これらの制限は必要に応じて更新できます。
リピーターフィールドのフィールドオプションパネルで下にスクロールし、制限セクションを見つけます。ここで、フィールドを繰り返すことができる最小回数と最大回数を設定できます。これにより、ユーザーが必要な量の情報を提供し、許可された制限を超えないようにすることができます。
リピーターフィールドの詳細オプションの設定
高度な設定タブでは、リピーターフィールドの追加オプションを設定できます。フィールドのサイズを設定し、ユーザーに詳細なコンテキストを提供するための説明を追加できます。
フィールドサイズ
このオプションを使用すると、リピーターフィールドの幅を選択できます。小、中、または大から選択できます。
注意：フィールドサイズオプションは、複数の列を持つレイアウトを選択した場合、無効になります。
説明
リピーターフィールドに説明を追加して、追加情報や指示を提供することもできます。このテキストは、フォームのリピーターフィールドの下に表示され、ユーザーに追加のコンテキストとガイダンスを提供します。
条件付きロジックの設定
Smart Logicタブを使用すると、リピーターフィールド全体に条件付きロジックを適用できます。これにより、フォーム内の他のフィールドからのユーザー入力に基づいて、リピーターフィールドを表示または非表示にすることができます。
条件付きロジックを有効にするには、条件付きロジックを有効にするオプションをオンにするだけです。
注意: 条件付きロジックは、リピーターフィールド内の個々のフィールドではなく、リピーターフィールド全体に適用されます。さらに、リピーターフィールドに追加したフィールドには、独自の条件付きロジックを設定できません。
条件付きロジックの使用に関する詳細については、WPFormsでの条件付きロジックの使用方法に関するガイドをご覧ください。
フォームのプレビュー
リピーターフィールドの設定と必要なフィールドの追加が完了したら、フォームビルダーの右上にある保存ボタンをクリックしてフォームを保存します。
次に、プレビューボタンをクリックして、フォームがフロントエンドでどのように表示されるかを確認し、すべてが期待どおりに表示されていることを確認します。
注意: 条件付きロジックやその他の機能が正しく機能することを確認するために、公開する前に必ずフォームをテストすることをお勧めします。このプロセスのステップバイステップガイドについては、完全なフォームテストチェックリストを参照してください。
よくある質問
これらは、WPFormsのリピーターフィールドの使用に関してよく受ける質問への回答です。
リピーターフィールドに追加できないフィールドは何ですか？
次のフィールドは、リピーターフィールド内に含めることができません。
- リピーター
- ページ区切り
- セクション区切り
- エントリープレビュー
- 支払いフィールド（Stripe、Squareなど）
- クーポン
- 合計
- カスタムキャプチャ
- ファイルアップロード
- ライカート尺度
- ネットプロモータースコア
リピーターフィールドが正しく表示されないのはなぜですか？
これは、リピーターフィールドを含むフォームにカスタムCSSクラスを適用した場合によく発生します。この問題を解決するには、リピーターフィールドのレイアウトに影響を与える可能性のある競合するCSSクラスがフォームにないことを確認してください。
1つのフォームで複数のリピーターフィールドを使用できますか？
はい、フォームに複数のリピーターフィールドを追加し、それぞれを個別に設定できます。
リピーターフィールドはすべてのWPFormsアドオンと連携しますか？
リピーターフィールドは、次のWPFormsアドオンと連携します。
これで、WPFormsのリピーターフィールドを使用して、動的で柔軟なフォームを作成する方法がわかりました。
次に、既製のテーマを使用してフォームのデザインを簡単に強化したいですか？すべての詳細については、フォームテーマの使用方法に関するガイドを確認して、これらのテーマをフォームに適用する方法を確認してください。