動的項目表示
選択内容に応じて必要な入力欄を出し分けます。
動的項目表示は、フォーム内の選択肢や入力値に合わせて、必要な項目だけを表示する機能です。Roundtableでは「何を選んだら、どの項目を出すか」「非表示の項目を保存対象にするか」「管理側と公開側のどちらで使うか」を言葉にしておくと、発注者、実装者、AIに指示する人の認識を合わせやすくなります。
この機能でできること
申込種別、問い合わせ種別、契約プラン、支払い方法、配送方法、利用者区分などの選択内容に応じて、必要な入力欄、説明、補足メッセージを出し分けられます。利用者に関係ない項目を隠せるため、入力ミスや迷いを減らし、フォームを短く見せられます。管理側の登録編集、公開側の問い合わせ、申込、予約、会員登録フォームで使えます。
条件に合う項目だけを表示し、保存時にはサーバー側でも整合性を確認します。
画面上で隠しただけでは不正な値や古い入力が残ることがあるため、表示条件と保存条件をセットで決めておくと実装後のトラブルを防ぎやすくなります。
よくある利用場面
問い合わせ種別ごとに項目を変える
見積相談なら希望時期や予算、サポート相談なら利用中サービスや緊急度など、必要な情報だけを入力してもらいます。
支払い・配送方法に合わせる
請求書払い、クレジットカード、店頭受取、配送など、選択した方法に必要な追加項目を表示します。
管理側の登録ミスを減らす
法人、個人、代理店、会員などの区分に応じて、担当者名、会社情報、契約条件、紹介元などを出し分けます。
プロンプト例
条件になる項目、選択肢ごとに表示する項目、非表示時の値の扱い、必須チェックの切り替え、管理側と公開側の適用範囲をセットで伝えると、実装範囲を決めやすくなります。
プロンプト
問い合わせ登録フォームに動的項目表示を追加してください。相談種別で「見積相談」を選んだ場合は希望時期、概算予算、対象業務を表示し、「サポート相談」を選んだ場合は利用中サービス、緊急度、発生状況を表示してください。表示された項目だけ必須チェックし、非表示になった項目は保存時に空扱いにしてください。管理側の問い合わせ登録と公開側の問い合わせフォームの両方で使えるようにしてください。
この機能を使うときのポイント
条件の起点どの選択肢、チェックボックス、日付、金額、権限をきっかけに表示を変えるかを決めます。
非表示項目の保存隠した項目を空にするか、前回値を保持するか、確認画面に出すかを業務ルールとして決めます。
必須チェックの切り替え表示中だけ必須にする項目、常に必須にする項目、任意のままにする項目を分けます。
説明文の出し分け入力欄だけでなく、注意書き、必要書類、次の操作も条件に合わせて変えると迷いにくくなります。
この機能を実装するときのコツ
動的項目表示は、画面側で選択変更を検知して対象ブロックを表示・非表示にする実装が基本です。管理側では標準画面の項目構造や既存JavaScriptの差し替え挙動を考慮し、公開ページでは初期表示、入力途中、確認画面から戻った後でも同じ表示状態を再現します。保存処理ではPOSTされた値だけを信用せず、条件に合わない項目を空扱いにする、またはエラーにするなどのルールをサーバー側でも確認すると、画面操作の抜け道や古い入力値の混入を防げます。