Contact Form

A family of ready get-in-touch blocks on one recipe: ContactForm, LeadForm for sales, and SupportForm for help-desk requests. Each wires its controls through Field, owns its state and confirms on submit.

Get in touch

Have a question or want to work together? Send us a message and we'll reply within one business day.

Lead capture#

LeadForm is the richer sales / collaboration block: a name and social row, a company-size Select, a country-aware PhoneInput, and a message. Drop it beside a hero to capture qualified leads.

Let's collaborate

Tell us about your project and we'll get back to you within one business day.

Support request#

SupportForm is tuned for an inbound support queue: a name and email row, a support-topic Select, an optional order / reference field so an agent can pull the account up fast, and a message.

How can we help?

Tell us what's going on and our support team will get back to you within a few hours.

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add contact-form

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

API reference#

ContactForm

The general get-in-touch block: name and email, a subject Select and a message with a live count. Owns its state and swaps to a role="status" success panel after submit; forwards native <div> props except onSubmit and title, and every block accepts className, merged last.

Prop	Type	Default	Description
title	React.ReactNode	"Get in touch"	Heading above the form; `null` drops it.
description	React.ReactNode	-	Supporting line under the heading; `null` drops it.
action	React.ReactNode	"Send message"	Submit button label.
variant	"card" \| "bare"	"card"	`card` is the standalone ring-edged block; `bare` drops the edge, shadow, max-width and padding to embed in a page shell.
density	"comfortable" \| "compact"	"compact"	Padding 24px or 16px, with fields and submit at 36px or 32px. Falls back to the nearest `DensityProvider`.
onSubmit	(data: ContactFormData) => void \| Promise<void>	-	Called with `{ name, email, subject, message }` on a valid submit; return a promise to show the loading state until it resolves.

LeadForm

The sales and collaboration lead block: first name and LinkedIn, email, a company-size Select, a country-aware PhoneInput and a message. Same surface, states and native <div> passthrough as ContactForm.

Prop	Type	Default	Description
title	React.ReactNode	"Let's collaborate"	Heading above the form; `null` drops it.
description	React.ReactNode	-	Supporting line under the heading; `null` drops it.
action	React.ReactNode	"Send message"	Submit button label.
variant	"card" \| "bare"	"card"	`card` is the standalone ring-edged block; `bare` drops the edge, shadow, max-width and padding to embed in a page shell.
density	"comfortable" \| "compact"	"compact"	Padding 24px or 16px, with fields and submit at 36px or 32px. Falls back to the nearest `DensityProvider`.
defaultCountry	string	"US"	Initial ISO2 country for the phone field.
onSubmit	(data: LeadFormData) => void \| Promise<void>	-	Called with `{ firstName, linkedin, email, companySize, phone, message }` on a valid submit; return a promise to show the loading state.

SupportForm

The help-desk request: name and email, a support-topic Select, an optional order or reference field and a message. Same surface, states and native <div> passthrough as ContactForm.

Prop	Type	Default	Description
title	React.ReactNode	"How can we help?"	Heading above the form; `null` drops it.
description	React.ReactNode	-	Supporting line under the heading; `null` drops it.
action	React.ReactNode	"Submit request"	Submit button label.
variant	"card" \| "bare"	"card"	`card` is the standalone ring-edged block; `bare` drops the edge, shadow, max-width and padding to embed in a page shell.
density	"comfortable" \| "compact"	"compact"	Padding 24px or 16px, with fields and submit at 36px or 32px. Falls back to the nearest `DensityProvider`.
onSubmit	(data: SupportFormData) => void \| Promise<void>	-	Called with `{ name, email, topic, reference, message }` on a valid submit; return a promise to show the loading state.

FAQ#

Use ContactForm for an open-ended `get in touch` block (name, email, a general subject, and a message). Use LeadForm to capture qualified sales or collaboration leads: it adds a LinkedIn field, a company-size Select, and a country-aware phone field. Use SupportForm for an inbound support queue: it swaps in support-focused topics and an order / reference field. All three share one recipe and the same loading to success flow, so they feel identical to drop in.