AI要約
複数選択肢、複数項目、チェックボックス、またはチェックボックス項目のフィールドの選択肢を複数列で表示しますか？複数列レイアウトは、フォームの外観を改善し、ユーザーがナビゲートしやすくすることができます。
このチュートリアルでは、複数選択肢、複数項目、チェックボックス、およびチェックボックス項目のフィールドを2列または3列形式で選択肢を表示するように構成する方法を説明します。
このチュートリアルを開始する前に、WPFormsがWordPressサイトにインストールされ、有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集します。
フォームに複数選択フィールドを追加する
まず、フォームに次のいずれかのタイプのフィールドを追加します。
- チェックボックス
- チェックボックスアイテム
- 複数選択
- 複数商品
注意: フォームに使用するフィールドの選択に迷っていますか？WPFormsで適切なフィールドを選択するための完全なガイドをご覧ください。
フォームビルダーの左側にあるフィールドをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加できます。
注意: 複数選択肢および複数項目フィールドでは、ユーザーは一度に1つのオプションしか選択できません。一度に複数のオプションを選択できるようにしたい場合は、代わりにチェックボックスまたはチェックボックス項目フィールドを使用することをお勧めします。
完了したら、フィールドオプションにアクセスするために、プレビューエリアのフィールドをクリックします。フィールドを好きなようにカスタマイズし、すべての選択肢を追加してください。このプロセスを高速化するために、一括追加オプションを使用できます。
注意: フィールドのオプションの設定方法がわからない場合は、WPFormsでのフィールドオプションのカスタマイズに関するチュートリアルを参照して、さらにガイダンスを得てください。
選択肢レイアウトの選択
複数選択肢、チェックボックス、チェックボックス項目、または複数項目フィールドで問題がなければ、フィールドオプションパネルの高度な設定タブをクリックします。
ここで、選択肢レイアウトドロップダウンを探します。次のオプションから選択できます。
- 1列: すべての選択肢を1つの列に表示します。これはデフォルトのオプションです。
- 2列: 選択肢を2つの列にできるだけ均等に分割します。
- 3列: 選択肢を3つの列にできるだけ均等に分割します。
- インライン: 各行にできるだけ多くの選択肢を自動的に配置します。
これは、フロントエンドで2列のチェックボックスフィールドがどのように表示されるかの例です。
そして、これは同じチェックボックスフィールドの選択肢が3列レイアウトで表示された場合の例です。
フォームがあらゆるデバイスで適切に表示されるように、選択肢、複数選択肢、チェックボックス、チェックボックス項目フィールドの複数列レイアウトは、モバイルデバイスで表示される際に自動的に単一列に戻ります。
これで完了です！フォームで選択肢、チェックボックス、複数選択肢、チェックボックス項目フィールドの複数列レイアウトを作成できるようになりました。
次に、フィールドの選択肢に画像を追加しますか？WPFormsで画像選択肢を追加する方法に関するチュートリアルをぜひご覧ください。