# Forms (`forms.md`)

## Marketing contact (`resources/views/pages/contact.blade.php`)

- Multi-section layout with hero gradient + service pickers.
- Uses `@csrf` + standard Blade error handling.
- Phone country metadata arrays defined at top of view (dial codes, masks).
- Connects to lead intelligence pipeline via JS `public/js/lead-tracking.js` + `/api/leads/*` endpoints.

### Field styling conventions

- Inputs: `rounded-xl` or `rounded-2xl`, neutral borders; focus rings `focus:ring-criazo-primary/40`.
- Service selection cards animate subtle translation on hover (`.service-option` styles).
- Checkbox/radio mimic Tailwind sizing `w-5 h-5` with brand accent when applicable.

### Validation UX

Flash messaging + `@error` directive patterns; preserve accessible inline descriptions.

## Quote calculator (`/get-a-quote`)

Wizard architecture stored under `CalculatorController`.

- Maintain progressive disclosure; each step aligns with Tailwind spacing scale.
- Outcome should hydrate lead payloads consistent with migrations (see calculator-specific DB fields).

### Implementation checklist

1. Respect CSRF requirement for AJAX posts.
2. Mirror button hierarchy from [`buttons.md`](buttons.md).
3. Do not strip analytics datalayer pushes accidentally when restructuring DOM IDs.

### Accessibility

Companion to [`accessibility.md`](accessibility.md):

- Visible labels—not placeholder-only cues.
- `aria-live` polite regions for asynchronous validation summaries when AJAX used.