Form error messages are inline and descriptive

A top-of-form banner saying "There was an error" forces visitors to re-scan every field to find what went wrong, and many simply abandon instead. Inline errors rendered directly under the offending field tell the visitor exactly what to fix and where — a fundamental usability affordance that is also a WCAG 2.2 SC 3.3.1 (Error Identification) requirement for accessible form validation, meaning the absence of inline errors creates both a conversion drag and a compliance gap.

Render validation errors inline, adjacent to the specific field that caused them, with a descriptive message ("Email address is invalid") rather than a generic toast. Adopt react-hook-form with zod resolvers and the shadcn Form primitives in components/ui/form.tsx:

<FormField
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>