@zachtrice/react-contact-form

A tiny, unstyled, dependency-free React contact form:

• Built-in honeypot spam trap (bots fill a hidden field; humans don't).
• Required-field validation and idle → sending → sent / error status handling.
• JSON POST to any endpoint you provide (SES Lambda, Formspree, your API…).
• No CSS imposed: style it with className / classNames hooks. Ships types.

Install

npm install @zachtrice/react-contact-form

Usage

import { ContactForm } from '@zachtrice/react-contact-form'

export default function Contact() {
  return (
    <ContactForm
      endpoint={process.env.NEXT_PUBLIC_CONTACT_ENDPOINT!}
      classNames={{
        form: 'flex flex-col gap-4',
        label: 'text-sm text-muted',
        input: 'rounded border px-3 py-2',
        textarea: 'rounded border px-3 py-2',
        button: 'rounded bg-black px-5 py-2 text-white disabled:opacity-60',
        error: 'text-sm text-red-500',
        success: 'rounded border p-4'
      }}
    />
  )
}

The POST body defaults to { name, email, message } (plus any extraFields).

Props

| prop | type | default | description | | --- | --- | --- | --- | | endpoint | string | — | Required. Receives the JSON POST. | | fields | ('name'\|'email'\|'message')[] | all three | Which fields to render, in order. | | labels | Partial<Record<field,string>> | — | Override field labels. | | placeholders | Partial<Record<field,string>> | — | Field placeholders. | | honeypotName | string | 'company' | Hidden spam-trap field name. | | submitLabel | string | 'Send message' | | | sendingLabel | string | 'Sending…' | | | successMessage | ReactNode | default text | Shown after a successful send. | | extraFields | Record<string,string> | — | Merged into the POST body. | | transformPayload | (data) => unknown | — | Customize the request body. | | onSuccess / onError | () => void / (err) => void | — | Callbacks. | | className | string | — | Class on the <form>. | | classNames | ContactFormClassNames | {} | Class hooks for every element. |

Endpoint contract

The endpoint receives Content-Type: application/json with the collected fields. Any non-2xx response is surfaced as an error. Pair it with a small SES (or other) function on the backend.

License

MIT © ZachTRice