Contact Form

Give visitors a reliable way to reach you that does not lose their message.

moderate Forms & Input

What it adds

A public contact form that stores each submission as a record and emails a notification, with spam filtering and an admin view of past messages.

What your agent is told to do

1
Write the submission to the database first, then send the email. The stored record is the source of truth; the email is a notification about it.
2
Build the form on the app's existing Form Field Shell and validation patterns so errors, labels, and required-field markers look and behave like every other form in the app.
3
Send through the app's existing transactional email setup rather than adding a second mail path, and reuse Idempotent Form Submission so a double-click or a browser retry does not create two records.
4
Give staff a simple list of submissions with a read and unread state, so a message is not lost when the notification email is filtered into a spam folder.
5
Do not put a visible puzzle in front of the form. Use a hidden field bots fill in, a minimum time-to-submit, and server-side rate limiting by address, and reserve a challenge for the case where those stop working.

Edge cases it handles

Bots will submit this form within days of it going live. Silently accept and discard obvious bot submissions rather than showing an error, so the bot does not learn what triggered the rejection.
A validation failure must return the form with every field still populated. A visitor who has written four paragraphs and gets an empty form back does not retype them.
If the mail send fails, the submission must still be stored and the visitor must still see success. Queue the notification for retry rather than showing an error for a message you actually received.
The notification email's reply-to must be the visitor's address while the from address stays a domain you control. Putting the visitor's address in the from field will get the mail rejected by authentication checks.
Message bodies arrive with pasted markup, links, and control characters. Escape on output in both the admin view and the email body, and never render submitted content as trusted markup.
A visitor who submits an address with a typo gets no reply and assumes they were ignored. Check the address format and warn on common misspelled domains before accepting.
The form collects personal data. State what happens to it, restrict who can read submissions, and set a retention period rather than keeping them forever.
An oversized message or an attachment field with no server-side size limit is a denial-of-service vector. Cap the body length and reject anything larger before parsing it.

Definition of done

Every submission is stored as a record before any email is attempted.
A failed mail send does not lose the message or show the visitor an error, and the notification is retried.
Validation failures return the form with all typed input preserved.
The notification email sets reply-to to the sender and from to a domain the app controls.
Bot submissions are rejected without presenting the visitor a puzzle.
Submitted content is escaped everywhere it is displayed.
Staff can browse past submissions and see which are unread.
The feature matches the existing design system.
No existing functionality is broken.

Related features

Help Text Pattern

Voice Dictation

Form Section Pattern

How it works

1

Copy the link

Grab the Markdown instruction URL for this feature.
2

Give it to your AI

Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
3

It inspects, then implements

Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.