Contact form

Contact and quote requests feeding whatever lead store the app uses — CRM, email or a webhook. A server component around a ~2 KB useActionState island: the same validation runs in the browser and in your server action (validateContactForm, or the zod contactFormSchema), native HTML constraints cover the no-JS path, a honeypot and a time trap catch bots (answered with a silent fake success), and an error summary with role=alert links to each field. KVKK/GDPR: a linked privacy notice, consent boxes never pre-checked, marketing consent always separate.

Installation

Usage

import { ContactForm, validateContactForm, type SiteFormState } from "@vamos-ui/react/blocks";

const fields = [{ name: "name", required: true }, { name: "email", required: true }, { name: "message", required: true }] as const;

async function sendLead(prev: SiteFormState, data: FormData): Promise<SiteFormState> {
  "use server";
  const v = validateContactForm(fields, data, { privacyCheckbox: true });
  if (v.spam) return { status: "success" };
  if (!v.ok) return v.state;
  await crm.createLead(v.values);
  return { status: "success" };
}

<ContactForm title="Ask us *anything*" fields={[...fields]} action={sendLead} privacyLink={{ href: "/kvkk" }} privacyCheckbox />

The block renderer has no way to pass a server action yet, so a stored contact-form block only validates until the app wires one (see the 06 plan: actions={{ contact }}).

Examples

API