polish(contact): zod validation, persistent success/error, fallback email

[f1shyfang]

Summary

Polish pass on /contact. Critique score moved from 17/40 → 34/40. This is one of two surfaces (with /sponsors) where prospective industry contacts decide whether to reach out — form UX matters disproportionately here.

Validation & errors

• Rebuilt with react-hook-form + zod (existing deps; no new dependencies).
• Validation runs onBlur with onChange re-validation.
• Plain-language error messages with concrete fix guidance ("That email looks incomplete. Check for an @ and a domain." not "Invalid input").

Inputs

• Each field: top label with htmlFor/id, autoComplete (name, email), inputMode="email", aria-required, aria-invalid, aria-describedby linking to either the error or a calm helper line.
• Helper text sets expectations ("We will only use this to reply..." / "A short line like 'Sponsorship enquiry'...").
• DESIGN.md input token: rounded-md, border-gray-200, px-4 py-3, focus border blue-600 with ring-3 ring-blue-600/25.
• Required-field legend with screen-reader fallback.

Submit & state

• Submit button now bg-[#1B397E] (was bg-blue-600), full-width on mobile, aria-busy when sending, label flips to "Sending..." with disabled.
• Success now replaces the form with a persistent confirmation, restates reply-time SLA, surfaces fallback email, offers "Send another message" + "Email us instead" CTAs. Was auto-dismissing after 5s.
• Error uses role="alert", does not auto-dismiss, points to fallback email with plain-language fix guidance.

Layout & tokens

• lg:grid-cols-5 with form lg:col-span-3 / info lg:col-span-2 — gives the form proper weight.
• Headings text-gray-900 + tracking-tight; body text-gray-700; helpers text-gray-600; hairline border-gray-200.
• Buzzword copy ("We'd love to hear from you", "ready to answer all your questions") replaced.
• Icons get aria-hidden, recoloured to Brand Navy.

Test plan

• npm run dev → /contact — verify form layout works at mobile and desktop
• Submit empty form → confirm inline errors appear under each required field with concrete fix wording
• Type invalid email → confirm helper text shifts to error
• Submit valid form → confirm success state persists (no auto-dismiss), shows reply-time and fallback email
• Simulate server error → confirm error state persists with fallback email
• Tab through the form → confirm tab order is label → input → label → input
• On mobile, verify autoComplete fills name/email from saved data

Open questions for the team

• Is ceus@unsw.edu.au actually monitored, or is there a sponsorship-specific alias?
• Is the "3 to 4 days during term" reply-time SLA accurate? Sponsor enquiries probably warrant sub-48h.
• Anti-spam (Turnstile/honeypot)? Without one this form will get scraped.
• Should sponsor enquiries route to a separate form (with org/role/budget fields) rather than this general route?

Verification

• tsc --noEmit: clean
• eslint: clean

Merge note

Independently mergeable. Touches only CEUS/src/app/contact/page.tsx and ContactClient.tsx.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ceus-website	Ready	Preview, Comment	May 29, 2026 11:31am

[Copilot]

Pull request overview

Polish pass on the /contact surface by improving form UX/accessibility and making submit feedback (success/error) persistent, while aligning layout and styling with current design tokens.

Changes:

• Updated /contact metadata title/description to be more specific and include response-time expectations.
• Rebuilt the contact form UI with react-hook-form + zod validation and improved a11y attributes/helper text.
• Reworked submit states so success and error messaging persist and include a fallback email CTA.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
CEUS/src/app/contact/page.tsx	Updates contact page metadata (title/description).
CEUS/src/app/contact/ContactClient.tsx	Replaces the contact form implementation with RHF+Zod validation, persistent success/error states, and refreshed layout/styling/a11y.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.