Contact forms and contact sections

Forms with validation, channels, a map, booking, opening hours, a help center and a sales form.

8 variants

Switch category

Form, map or opening hours

The contact section is where interest becomes a conversation. The eight variants here bring forms with real validation and errors written as text next to each field, so nobody gets stuck on a red border without knowing why.

Split with form is the default, with the form on one side and the ways to reach you on the other. Channel cards suits companies with several teams. Location map and Opening hours fit shops, practices and restaurants, Booking lets people pick a time right away. Support center routes questions to help articles first, Sales contact asks the few fields a sales team needs.

Ask only for what you need to answer, name, email and the message are often enough. Say how fast you reply. The form sends nowhere by itself, you pass your own onSubmit, so it works with any backend, form service or server action.

Split with form

Ways to reach you on the left, a validated form on the right.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="split-form" title="…" channels={[…]} topics={[…]} onSubmit={(data) => …} />

Source

Channel cards

One card per team with its address and how fast it answers.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="channel-cards" channels={[{ icon, title, text, value, action, note }]} address={…} />

Source

Location map

A wide map with the address, today’s status and directions in a card.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="location-map" map={<iframe …/>} address={{ label, lines, directionsHref, phone }} hours={…} />

Source

Booking

Days and times as real radio buttons, the choice shows up beside them.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="booking" meeting={{ title, duration, person }} days={[{ date, slots }]} />

Source

Minimal

One large email address to copy, three quiet ways beside it.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="minimal" title="…" email="hello@…" channels={[…]} />

Source

Opening hours

The week at a glance, today highlighted and an open now badge.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="opening-hours" hours={[{ day, open, close, note }]} address={…} map={…} />

Source

Support center

Search first, then topics, then people. With a live status line.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="support-center" helpTopics={[…]} popularSearches={[…]} channels={[…]} />

Source

Sales contact

What happens next, a customer voice and a short form with team size.

Open in Studio

Installv1.0.0

aiw add @ai-website/contact

Brings along utils, kit, button, badge, icon, section, reveal

Usage

<Contact variant="sales-contact" expectations={[…]} quote={…} logos={[…]} teamSizes={[…]} />

Source

Details

What Contact brings along, read from the registry and the source.

Area: Content
Variants: 8
Version: 1.0.0 · since 1.0.0
File: components/ui/contact.tsx
Brings along: utilskitbuttonbadgeiconsectionreveal
npm packages: None
Languages: English and German, 47 texts of its own
Studio: All 8 variants editable
In collections: Local business Medical practice Portfolio
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The ContactProps interface from components/ui/contact.tsx, with the comments from the code.

variantoptional
ContactVariant
split-formchannel-cardslocation-mapbookingminimalopening-hourssupport-centersales-contact
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
channelsoptional
ContactChannel[]
topicsoptional
string[]
Options for the topic select (split-form)
mapoptional
React.ReactNode
Map or picture for location-map and opening-hours
addressoptional
{ label?: string; lines: string[]; directionsHref?: string; phone?: string }
hoursoptional
ContactHours[]
Monday first
hoursNoteoptional
string
daysoptional
ContactDay[]
Booking: free days and times
meetingoptional
{ title: string; duration: number; text?: string; person?: ContactPerson }
Booking: what is being booked
emailoptional
string
minimal
phoneoptional
string
helpTopicsoptional
ContactTopic[]
support-center
popularSearchesoptional
string[]
teamSizesoptional
string[]
sales-contact
expectationsoptional
string[]
quoteoptional
{ text: string; person: ContactPerson }
logosoptional
React.ReactNode[]
onSubmitoptional
(data: FormData) => void | Promise<void>
Called with the form data. Without it the form shows its success state right away.

Built-in texts

Contact writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 47 texts

Key	English	German
name	English Name	German Name
firstName	English First name	German Vorname
lastName	English Last name	German Nachname
email	English Email	German E-Mail
workEmail	English Work email	German Geschäftliche E-Mail
company	English Company	German Firma
optional	English optional	German optional
topic	English Topic	German Thema
message	English Message	German Nachricht
messagePlaceholder	English What can we help with?	German Wobei können wir helfen?
consent	English I agree that my details are used to answer this request.	German Ich bin einverstanden, dass meine Angaben zur Beantwortung genutzt werden.
send	English Send message	German Nachricht senden
sending	English Sending	German Wird gesendet
required	English Please fill in this field.	German Bitte fülle dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte gib eine gültige E-Mail-Adresse ein.
consentRequired	English Please agree so we can answer you.	German Bitte stimme zu, damit wir dir antworten können.
successTitle	English Thank you, your message is on its way	German Danke, deine Nachricht ist unterwegs
successText	English We reply within one working day. A copy is in your inbox.	German Wir antworten innerhalb eines Werktags. Eine Kopie liegt in deinem Postfach.
again	English Write another message	German Weitere Nachricht schreiben
open	English Open now	German Jetzt geöffnet
closed	English Closed now	German Jetzt geschlossen
closedDay	English Closed	German Geschlossen
today	English Today	German Heute
directions	English Get directions	German Route planen
call	English Call	German Anrufen
copy	English Copy	German Kopieren
copied	English Copied	German Kopiert
pickDay	English Pick a day	German Tag wählen
pickTime	English Pick a time	German Uhrzeit wählen
noSlots	English Fully booked	German Ausgebucht
book	English Book this time	German Diesen Termin buchen
booked	English You are booked	German Dein Termin steht
bookedText	English A calendar invitation for {when} is on its way to your inbox.	German Eine Kalendereinladung für {when} ist auf dem Weg in dein Postfach.
selected	English {day} at {time}	German {day} um {time} Uhr
choose	English Choose a day and a time	German Wähle einen Tag und eine Uhrzeit
duration	English {n} min	German {n} Min.
video	English Video call	German Videoanruf
search	English Search the help center	German Hilfe durchsuchen
searchPlaceholder	English Search for answers	German Nach Antworten suchen
popular	English Popular	German Beliebt
articles	English {n} articles	German {n} Artikel
status	English All systems running	German Alle Systeme laufen
teamSize	English Team size	German Teamgröße
talkToSales	English Talk to sales	German Mit dem Vertrieb sprechen
expect	English What to expect	German Was dich erwartet
weekdays	English Sun,Mon,Tue,Wed,Thu,Fri,Sat	German So,Mo,Di,Mi,Do,Fr,Sa
months	English Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec	German Jan.,Feb.,März,Apr.,Mai,Juni,Juli,Aug.,Sept.,Okt.,Nov.,Dez.

Read from the source of the component.

Sets aria-describedby, aria-invalid and aria-live, so screen readers announce purpose and state.
Uses the roles search and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Contact?

With aiw add @ai-website/contact. The command puts components/ui/contact.tsx into your project, the code is yours from then on. It brings along button, badge, icon, section and reveal. It needs no further npm packages.

Which variants does Contact have?

8 variants, Split with form, Channel cards, Location map, Booking, Minimal, Opening hours, Support center and Sales contact. You pick one with the variant prop, for example variant="channel-cards".

Can I translate the texts of Contact?

Yes. Contact carries 47 texts of its own in English and German, such as “Name”, “First name” and “Last name”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Contact?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Contact with aiw_components and install it with aiw_add @ai-website/contact. Name the variant in your prompt, for example variant="split-form", and the assistant writes your content straight into the props.

Can I adjust Contact without code?

Yes, in the Studio. All 8 variants are editable there, texts, lists and switches. The Studio writes the matching Contact code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Contact on a page.

Form, map or opening hours

Contact

Split with form

Channel cards

Location map

Booking

Minimal

Opening hours

Support center

Sales contact

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with