Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA contact form that works as a plain HTML form before JavaScript loads, validates on the server with field messages, hides a honeypot from people, and swaps itself for a thank-you message. Use this when a public form must be robust and cheap to run.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
A public contact or feedback form should work without client-side JavaScript, validate on the server and resist simple bots.
Do not use it when: When the form is part of a logged-in app with rich client state, use a client form with React Hook Form or the form store. A honeypot is not a replacement for rate limiting.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Description |
|---|---|---|
action | (prev, formData) => Promise<ActionState> | Your server action. Build it with createContactAction(send). |
createContactAction(send) returns an action that validates the three fields, drops honeypot hits quietly and calls send for real messages.
<form action>: it submits and validates without JavaScript when your action is a Next.js server action.aria-describedby; the status is a live region (alert for errors, status for the thank-you). After success the form is replaced by the message, which is announced.aria-hidden, positioned off screen and out of the tab order, so screen reader users and keyboard users never meet it.The pattern ships with a Testing Library test (server-action-contact-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.