Koala UI

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.

We'll only use this to reply.

0 / 500

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.

Max length: 500 characters.

0 / 500

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.

Optional, but it helps us find your account faster.

We'll only use this to reply.

0 / 500

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add contact-form

Usage#

usage.tsxTSX
"use client"import { ContactForm, type ContactFormData } from "@/components/ui/contact-form"export function Example() {  async function send(data: ContactFormData) {    await fetch("/api/contact", { method: "POST", body: JSON.stringify(data) })  }  return <ContactForm onSubmit={send} />}

API reference#

ContactForm / LeadForm / SupportForm

Each composes Field, Input, Select, and Textarea (LeadForm adds PhoneInput). Each forwards all <div> props.

  • onSubmit: called with the block's data object on a valid submit ( { name, email, subject, message } for ContactForm, { firstName, linkedin, email, companySize, phone, message } for LeadForm, { name, email, topic, reference, message } for SupportForm). Return a promise to drive the loading spinner.
  • variant: card (default, standalone bordered block) or bare (drops the chrome to embed in a page shell).
  • density: compact (16px padding, 32px fields, default) or comfortable (24px padding, 36px fields). The fields take the default control size for that density rather than the 40px a bare Form imposes, so the card stays proportional.
  • title, description, action: override the default copy.
  • defaultCountry (LeadForm only): initial ISO2 for the phone field.

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.