Illustrated contact

Contact form flanked by line-art figures.

Usage

import { ContactIllustrated } from '@/components/blocks/contact-06'


<ContactIllustrated />


// Send the form to your own endpoint
<ContactIllustrated
  onSubmit={async (values) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(values),
    })
    if (!response.ok) throw new Error('We could not send your message. Please try again.')
  }}
/>


// Just the form, without figures or the map
<ContactIllustrated
  title="Talk to sales"
  showIllustrations={false}
  showLocation={false}
  consentLabel={
    <>
      I agree to the <a href="/privacy">Privacy Policy</a>.
    </>
  }
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/contact-06

npx shadcn@latest add @pastaui-pro/contact-06

yarn dlx shadcn@latest add @pastaui-pro/contact-06

bunx --bun shadcn@latest add @pastaui-pro/contact-06

Source

Props

Illustrated contact props
Prop	Type	Default	Description
title	string	= 'Let’s talk about your crews'	Main heading.
description	string	= 'Comparing plans, retiring the whiteboard schedule…'	Intro text under the heading.
fields	ContactFormField[]	= Name, email, phone, business name, topic, crew size and message	Form fields, each with a name, label, type ('text', 'email', 'tel', 'select' or 'textarea'), placeholder, autoComplete, required, minLength, select options and half (half width from the small breakpoint). A 'tel' field gets a country-code select and submits the dial code with the number plus a `<name>Country` value.
submitLabel	string	= 'Get in touch'	Submit button text.
consentLabel	ReactNode	= Privacy Policy agreement	Label of the required consent checkbox. Links inside are styled for you.
successTitle	string	= 'Thanks, we will be in touch'	Heading of the success panel, which receives focus after sending.
successDescription	string	= 'A member of our team will answer…'	Text under the success heading.
showIllustrations	boolean	= true	Show the line-art figures beside the form on large screens.
showLocation	boolean	= true	Show the map and contact details row below the form.
locationEyebrow	string	= 'Visit us'	Small label above the location heading.
locationTitle	string	= 'Drop by the Madison office'	Heading of the location row.
mapLabel	string	= 'Map of the streets around the Turnstead office…'	Text alternative for the decorative map, read by screen readers.
contactDetails	ContactDetail[]	= Address, email, phone and hours	Rows in the details card, each with a label, value and optional href. The 'Address' row also appears on the map.
socials	ContactSocialLink[]	= Instagram, Facebook, X and YouTube	Social icon links, each with a label (the accessible name), an href and an icon: 'instagram', 'facebook', 'x' or 'youtube'.
onSubmit	(values: Record<string, string>) => void \| Promise<void>	= Simulated success after 1.2s	Called with the form values once everything is valid. Throw to show your error message.
style	CSSProperties	= —	Inline styles, handy for overriding the `--pp-*` theme variables.
className	string	= —	Extra classes for the outer section.