Conditional Form Fields — Dynamic Form HTML CSS JS

Long forms that ask everyone every question are a leading cause of abandonment. Conditional fields fix that by revealing only the inputs relevant to the path a user chose — a sales enquiry asks for company size, a support request asks for an order ID, and neither shows the other's fields. This snippet builds that dynamic-form pattern in plain HTML, CSS, and vanilla JavaScript, with the one detail most implementations get wrong: validating only the fields that are actually visible.

Declarative conditions in the markup

Each conditional group carries a data-when attribute naming the dropdown value that reveals it (data-when="sales", data-when="support"). When the topic changes, applyConditions() simply toggles a .show class on each group based on whether its data-when matches the current value — there's no per-group if statement to maintain. Adding a new branch is a markup change (a new group with the right data-when), not a JavaScript change, which keeps the logic flat no matter how many paths the form grows.

Validation that follows visibility

The critical correctness detail: a required field that's hidden must not block submission. visibleRequiredFields() collects [data-req] inputs *only* from groups currently showing (plus the always-on message box), so the submit button enables when the relevant fields are filled — and a hidden support field never traps a sales enquiry. Tying required-ness to visibility is the difference between a form that submits and one that's mysteriously stuck because an off-screen field is empty. The submit button stays disabled until every *visible* required field has a value, giving constant, honest readiness feedback.

A smooth reveal without measuring height

Animating a collapsible section open has historically meant measuring its content height in JavaScript. This snippet uses the modern CSS grid trick instead: the group is a grid with grid-template-rows: 0fr collapsed and 1fr expanded, with the inner content set to overflow: hidden; min-height: 0. Transitioning between 0fr and 1fr animates the section to exactly its natural height with no JavaScript measurement at all — clean, content-agnostic, and smooth. Opacity fades alongside it for polish.

Reset behaviour that prevents stale data

Switching topics hides the previous branch's fields. Those inputs keep their values in the DOM (so switching back restores them), but because validation only counts visible fields, a half-filled hidden branch never affects the current submission. On submit, you collect only the fields relevant to the chosen topic — the FAQs cover scoping the payload so you don't send a support form's empty company-name field to your sales endpoint.

Accessible and progressive

The conditional groups are real form elements that exist in the DOM whether shown or not, so the markup stays simple and the form degrades gracefully. For full accessibility you'd also toggle aria-hidden and the disabled attribute on hidden inputs (so they leave the tab order entirely) — the FAQs explain how to layer that on. The whole form is driven by two listeners (change on the selector, input for live validation), keeping the behaviour easy to follow and port.