Report Content Modal with Reason Picker — Free HTML CSS JS Snippet

A generic "report this" button that just says "thanks" gives a moderation team nothing to act on. This modal collects a specific, structured reason via radio buttons, reveals an optional free-text field only when the selected reason genuinely benefits from more context, and swaps in a real confirmation step — including which reason was reported — once submitted.

One `updateFormState()` function governs visibility, hint text, and the submit button together

Every interaction — selecting a reason or typing into the details textarea — calls updateFormState(), which reads the currently checked radio via getSelectedReason() and then decides three things at once: whether the details textarea is shown, what the hint line beneath the reasons says, and whether the submit button is enabled. Because all three come from the same function call reading the same current state, there's no path where the hint text could say "choose a reason" while the submit button is somehow already enabled.

The details field's visibility is reason-dependent, not a blanket option

detailsWrap.hidden = reason !== 'Something else' means the optional context field only appears for the one reason that's genuinely ambiguous without it — a report for "Hate speech" or "Violent or graphic content" doesn't need an extra prompt, since the category itself is the useful signal. This keeps the modal shorter for the common cases while still gathering more context exactly where it's most valuable.

"Something else" has its own validation branch

Selecting "Something else" without typing anything into the details field keeps the submit button disabled and shows a specific hint ("Please add a few details...") rather than silently accepting an unhelpful, contentless report. Every other reason only requires the radio selection itself — the validation branches based on which reason is selected, not one uniform rule applied to all five.

A radio group built from a native `<input type="radio">`, styled but not reinvented

Each .rcm-reason label wraps a visually-hidden native radio input plus a custom .rcm-radio circle styled via the sibling combinator (input:checked ~ .rcm-radio) and a :has() selector highlighting the whole row. Using real radio inputs (rather than a fully custom JS-driven single-select) means keyboard navigation, form semantics, and "exactly one can be checked" are all handled by the browser's native radio-group behavior for free.

Submission swaps the whole step, it doesn't just reset the form silently

Clicking submit hides #rcmStepReason and reveals #rcmStepDone — including a confirmation sentence that names the specific reason that was reported ("Thanks for flagging this as 'Harassment or bullying'") — rather than just clearing the radio buttons and showing a generic toast. The form only actually resets when the visitor closes the confirmation step via doneBtn, delayed until after the modal's own closing transition finishes.

Customizing it

Wire the commented-out fetch() call at the point where reason and details are collected to a real moderation endpoint. Add a sixth reason by adding another .rcm-reason label with a new value — reasonInputs is queried generically from input[name="rcmReason"], so getSelectedReason() and updateFormState() require no changes for it to work correctly.