A conditional form is one whose fields appear, disappear or change based on what the user has already entered. Instead of a single long page where every field is shown to every user, the form reveals the next question only when the previous answer makes it relevant.
Why Use Them
- Reduced abandonment: Shorter visible forms get completed more often, especially on mobile.
- Cleaner data: Irrelevant fields cannot be filled in by mistake.
- Logical flow: A booking form for “In-person” reveals the location field; switching to “Online” hides location and reveals a video-link field.
- Compliance branching: If a user ticks “Under 18” you can reveal the parental-consent field.
How They're Implemented
Each conditional rule has two parts: the trigger (an input field and a value to compare to) and the effect (fields to show, hide, require, or pre-fill). Rules are evaluated client-side as the user types so the form feels instant.
Worked Examples
- Insurance claim form: “Type of claim” = “Vehicle” shows make/model/registration; = “Property” shows postcode/value/coverage; = “Travel” shows destination/dates.
- Job application: “Are you eligible to work in the UK?” = “No” reveals a “What's your visa status?” dropdown.
- Bug report: “Have you reproduced the bug?” = “Yes” reveals “Steps to reproduce” and “Environment”; otherwise reveals only “What were you doing?”.
- Event signup: “Will you require accommodation?” = “Yes” reveals check-in/out dates and bed preference fields.
Note: Even though hidden fields don't appear visually, they are still rendered in the page DOM. Use server-side validation to reject any unexpected data — never trust the client to enforce branching.