Contact Form

Block

Contact form with name, email, and message fields

Basic Usage

Get in Touch

Fill out the form below and we'll get back to you within 24 hours.

pnpm add @corew500/ui

import { ContactForm } from "@corew500/ui/blocks/contact-form"

<ContactForm>Content</ContactForm>

Prop	Type	Default	Description
`onFormSubmit`	(data: ContactFormData) => void	—	Called when the form is submitted with form data
`loading`	enum	`false`	Whether the form is in a loading state
`success`	enum	`false`	When true, shows success state instead of form
`title`	string	`Send us a message`	Custom title for the card header
`description`	string	`Fill out the form below and we'll get back to you as soon as possible.`	Custom description for the card header
`successTitle`	string	`Message Sent!`	Title shown in success state
`successDescription`	string	`Thank you for reaching out. We'll get back to you shortly.`	Description shown in success state
`successSubDescription`	string	—	Secondary description shown in success state
`successAction`	enum	—	Optional action element for success state (e.g., "Send another message" button)
`submitLabel`	string	`Send Message`	Text for the submit button
`loadingLabel`	string	`Sending...`	Text shown on submit button while loading
`fields`	{ company?: boolean; subject?: boolean; }	`{}`	Which optional fields to show
`placeholders`	{ firstName?: string; lastName?: string; email?: string; company?: string; subject?: string; message?: string; }	`{}`	Placeholder text for fields
`labels`	{ firstName?: string; lastName?: string; email?: string; company?: string; subject?: string; message?: string; }	`{}`	Field labels (for i18n support)
`errors`	Record<string, string>	`{}`	Validation error messages keyed by field name

- Component accepts pre-resolved translated strings
All user-facing text is customizable via props:
`title`, `description` - Form header text
`successTitle`, `successDescription`, `successSubDescription` - Success state text
`labels` - Field labels (firstName, lastName, email, company, subject, message)
`submitLabel`, `loadingLabel` - Button text
No internal text hardcoding - all strings flow through props with English defaults