WordPressフォームで条件付きドロップダウンリストを作成する方法
手ごわいフォームを使用してWordPressで条件付きドロップダウンリストを作成する方法を学 シンプルで、コードフリーで、クエリフリーのメソッドです。
ドロップダウンのオプションが前のドロップダウンで行われた選択に依存するフォー
たとえば、ユーザーが最初に自分の車の年を選択し、次にmakeを選択し、すでに選択した年/makeにのみ適用されるオプションのリストからモデルを選択する また、連鎖選択と呼ばれるフォームのこれらのタイプを聞いたことがあります。
この機能は、価格の見積もり、見積もり、支払いなどを処理するフォームを作成するときに非常に便利です。 彼らは無関係なオプションのトンをフィルタリングする必要はありませんので、それはまた、エンドユーザーのための素晴らしいことです。
手ごわいフォームを使用すると、ユーザーフレンドリーなインターフェイスから条件付きドロップダウンリストを設定することができます。
手ごわいフォームでWordPressで依存ドロップダウンを作成する方法についてのステップバイステップガイドのために読んでください。
Formidable Formsを使用して条件付きドロップダウンリストを作成する方法
詳細なステップバイステップのチュートリアルを掘り下げる前に、カスケーディングドロップダウンフォームがFormidable Formsでどのように機能するかを大まかに見てみましょう。
- カスケードドロップダウンを設定するすべてのデータを格納する”データフォーム”を作成します。 エンドユーザーはこのフォームを直接操作することはありません-データを保持するだけです。
- エントリを追加することで、”データフォーム”に必要なデータを入力します。 大量のデータがある場合は、すべてのデータを手動で入力するのではなく、CSVをインポートすることで時間を節約できます。
- 第二の”エンドユーザーフォーム”を作成します。 これはあなたの人間の訪問者がと相互に作用する形態である。
- ドロップダウンを設定するために必要に応じて”データフォーム”からデータをプルできるように、”エンドユーザーフォーム”にルックアップフィールドを追加します。
詳しく説明しましょう…
この例では、3つの条件付きドロップダウンフィールドを持つ自動車業界の例を使用します。 注文は次のようになります:
- ユーザーは自分の車の年を選択します
- ユーザーは、その年に利用可能になるから自分の車のメーカーを選択します
- ユーザーは、選択した年/メーカーに基づいて車の特定のモデルを選択します
“データフォーム”を作成します
始めるには、次のように動作する新しいフォームを作成します。あなたの”データフォーム”。 ここでも、エンドユーザーはこのフォームと直接対話することはありませんが、後で作成する”エンドユーザーフォーム”は、このフォームのエントリからデータを取得し
次に、エンドユーザーフォームに含める各ドロップダウンリストのテキストフィールドを追加します。 この例では、次の3つのテキストフィールドになります:
- 年式
- メイク
- モデル
を作成してから、フォームを保存します。
フォームエントリとしてデータをインポート
次に、”データフォーム”にカスケードドロップダウンに表示するオプションを入力する必要があります。
これを行うには、各データをフォームエントリとして追加します。
大規模なデータセットがある場合、最も簡単な方法はCSVファイルをインポートすることです。 たとえば、私たちの自動車データセットには7,000行以上の行があります-それはあなたが手動でやりたいことではありません！
大量のデータがない場合は、データフォームの[エントリ]タブから手動でエントリを追加することもできます。
CSVをFormidable Formsにインポートするには、まずCSVの見出しが”データフォーム”のテキストフィールドと一致していることを確認してください。
Excelでは、この例のCSVに3つの列があり、それぞれが前の手順で作成したテキストフィールドと一致することがわかります:
CSVファイルの準備ができたら…
- フォーミダブル→インポート/エクスポート
- ファイルの選択ボタンを使用してCSVファイルを選択します
- CSV区切り文字を入力します（これはほとんど常にカンマ
次の画面で、CSVファイルのデータがフォーム内の対応するフィールドに適切にマップされていることを確認します。 次に、「インポート」をクリックします。:
これで、条件付きドロップダウンリストにデータを入力するために必要なデータが得られました:
次に、訪問者が対話するための依存ドロップダウンリストを作成します。
“エンドユーザフォーム”を作成し、ルックアップフィールドを追加
次に、新しいフォームを作成します。 これはあなたの人間の訪問者が見る形になります。
新しいフォームを作成したら、ルックアップフィールドを追加して名前を付けます-例：”年を選択”。
次に、[設定]フィールドでルックアップオプションの設定を見つけて、[設定]と[設定]を選択します。…
- フォームの選択ドロップダウンを使用してデータフォームを選択
- フィールドの選択ドロップダウンを使用してデータをプルするソースフィールドを選択します。”
変更を保存してください。
次に、別のルックアップフィールドを追加し、次のデータセット用に設定します。 今だけ、あなたはまた、参照フィールドを見るボタンを使用して、この参照フィールドを前の参照フィールドに依存させることができます。 これにより、前のフィールドに一致するオプションのみを表示し、その”カスケード”効果を作成することができます:
変更を保存してください。
最後のドロップダウンを追加するには（少なくともこの例では）、別のルックアップフィールドを追加します。 今だけ、ルックアップフィールドを見るオプションを使用して、前の両方のフィールドに依存するようにします:
フォームに条件付きドロップダウンを追加する場合は、必要な回数だけ同じパターンを繰り返すことができます。
そしてそれはそれです-あなたのフォームをプレビューする場合、あなたのフォームと対話するときにその素敵なカスケード効果が表示されるはずです:
今日最初の条件付きドロップダウンリストを作成
カスケードドロップダウンフォームは、価格見積もり、見積もり、支払い、場所などを含むフォームに最適なオプションを提供する一般的なアプローチです。
Formidable Formsを使用すると、カスタムクエリやコードを記述せずに、必要な数の条件を使用して条件付きドロップダウンリストを作成できます。
それを設定するには、二つのフォームを作成し、二つを接続するためにルックアップフィールドを使用するだけです。 大規模なデータセットの場合は、ExcelからCSVファイルを直接インポートしてデータフォームに入力することもできます。
Formidable Formsを使用して従属ドロップダウンリストを作成するには、Formidable Forms Basic plan以上が必要です。
まだFormidable Forms Proを使用していない場合は、Formidable Formsが条件付きドロップダウンリストに最適なWordPressフォームプラグインである理由を理解するために、有用なフォームビ