AI要約
ドロップダウンフィールドで複数のオプションを選択できるようにしますか？ WordPressフォームに複数選択ドロップダウンを追加すると、チェックボックスフィールドを使用せずに、ユーザーが多くのオプションを選択できるようになります。
このチュートリアルでは、WPFormsで複数選択ドロップダウンフィールドを設定する方法を説明します。
この記事の内容
はじめに
始める前に、新しいフォームを作成するか、既存のフォームを編集する必要があります。
この例では、スポーツクラブの問い合わせフォームを設定します。これを行うには、フォームビルダーを開くことから始めます。
次に、標準フィールドセクションに移動して、ドロップダウンフィールドを見つけます。フィールドをクリックするだけでフォームに追加するか、フォームのプレビューエリアにドラッグアンドドロップします。
フィールドが追加されたら、それをクリックしてフィールドオプションパネルを開きます。
次に、このフィールドのラベルを詳細を知りたいクラブを選択してください。に変更します。また、選択肢の下に4つのオプションを追加します：水泳、アーチェリー、クリケット、ダンス。
フィールドオプション内で、高度な設定セクションに移動し、クリックして追加の設定を開きます。
次に、複数オプション選択というラベルのオプションを選択して有効にします。
カスタマイズオプション
ドロップダウンフィールドには、クラシックまたはモダンという2つの異なるスタイル設定が利用可能です。これらはそれぞれドロップダウンのスタイルをわずかに異なる方法でフォーマットします。ドロップダウンフィールドのスタイルは、高度な設定 » スタイルで変更できます。
クラシック スタイル
クラシック スタイルでは、すべてのオプションがボックス内に一覧表示されます。ドロップダウンに4つ以上のオプションが追加されると、ボックスに縦スクロールバーが表示されます。
注意：クラシック スタイルでは、これらの行にデータがなくても、常に少なくとも4行が表示されます。
複数のオプションを選択するには、Controlボタン（Macの場合はCommand）を押しながらクリックします。これにより、選択した選択肢にハイライト効果が追加されます。
モダン スタイル
モダン スタイルでは、標準のドロップダウンが表示されます。このドロップダウンでは、オプションリストをスクロールして選択するか、検索語を入力して目的の選択肢を見つけることができます。
複数のオプションが選択されると、各オプションがドロップダウンバーに追加されます。
条件付きロジックの設定
複数選択ドロップダウンで条件付きロジックを設定すると、ユーザーが複数のドロップダウン選択肢を選択した場合にフィールドを表示または非表示にすることができます。
たとえば、スポーツクラブの問い合わせフォームでは、ドロップダウンから水泳とダンスの両方を選択したユーザーにメッセージを表示します。メッセージでは、これらのクラブの開催時間が重複していることを知らせます。
これを設定するには、まずフォームにHTMLフィールドを追加します。
次に、コードセクションに、「注意！選択したクラブは開催時間が重複しています。」というメッセージを追加できます。
その後、ユーザーが「スイミング」と「ダンス」を選択した場合にのみフィールドが表示されるように、条件付きロジックを設定する必要があります。これを行うには、スマートロジックセクションをクリックして開き、条件付きロジックを有効にするオプションを選択します。
次に、ロジックを「どのクラブについてもっと知りたいかを選択がスイミングであり、かつどのクラブについてもっと知りたいかを選択がダンスである場合、このフィールドを表示」と設定します。
このフィールドは、ユーザーがドロップダウンフィールドから「スイミング」と「ダンス」の両方を選択しない限り、非表示のままになります。
注意： AND演算子の使用方法の詳細については、スマート条件付きロジックに関するガイドをご覧ください。
これで、WPFormsで複数の選択肢を持つドロップダウンフィールドを設定できます。
次に、ドロップダウン、ラジオボタン、またはチェックボックスフィールドの多数のオプションを簡単に追加したいですか？詳細については、選択肢を一括追加する方法のチュートリアルをご覧ください！