Inquiry Form
Collect an inquiry alongside a photo and contact details. Copy the message or connect the form to your own submit handler.
- Dependencies
- gsap
- Size
- 404 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/inquiry-form.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/inquiry-form.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the inquiry-form.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow / heading | string | — | Eyebrow with a 5px dot; uppercase heading where newlines break and *asterisks* set the serif accent at .9em. |
| image / imageAlt | string | "/media/interior-gallery/bedroom.webp" | Aside photograph. |
| location / address / phone | string | — | Address grid under the photo; the phone becomes a tel: row with an arrow. |
| cardTitle / cardIntro / formNote | string | — | Copy around the form. |
| interests | string[] | — | Options of the native select; the first is the default. |
| submitLabel / draftTitle | string | "Prepare my inquiry" / "Project inquiry" | Button text and the first line of the prepared draft. |
| onSubmit | (data: InquiryData) => Promise<void> | — | Optional delivery. Without it, submitting builds a read-only draft with a Copy button (clipboard, with a select-and-copy fallback); with it, the form sends, resets on success and keeps answers on failure. |
| background / paper / accent / focusColor | string | "#151d23" / "#f4f6f6" / "#b8d0de" / "#00638e" | Graphite surface, paper text and button, heading accent and focus ring. |
| overlap / reveal | boolean | true / true | Section rises y 65 → 0 with top radii 10 → 48px (scrub 1.2); heading and card fade up 28px over 1.1s. |