Contact Form
Give visitors a reliable way to reach you that does not lose their message.
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
5
What your agent is told to do
5-
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
8
Edge cases it handles
8- 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
9
Definition of done
9- 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
Unit Converter
Unit Converter
Let people convert a value between units without leaving the page they are on.
What it does
An inline converter that takes a typed value in one unit and shows the equivalent in another, in place.
How it works
- 1 Start from the units the app actually deals in. A shipping tool needs weight and length; a recipe tool needs volume and temperature. Ship those and leave the rest out.
- 2 Convert as the user types, with the result visible beside the input rather than behind a submit button. Let either side be edited so the conversion runs in both directions.
- 3 Reuse the app's existing number parsing and display formatting rather than writing new ones. If Locale-Aware Numbers and Dates or Number Formatting Component is already present, the converter must render through it so grouping and decimal marks match the rest of the app.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/unit-converter
Field State Matrix
Field State Matrix
Decide once how every field looks and behaves in every state, before screens improvise.
What it does
A defined and documented set of visual and behavioural states covering every input type in the app.
How it works
- 1 Enumerate the app's input types and cross them against every state they can enter: empty, filled, focused, hovered, invalid, valid, disabled, read-only, loading, and browser-autofilled.
- 2 Define disabled and read-only as genuinely different states — a read-only field shows a real value the user may select and copy, a disabled field is inert and excluded from submission.
- 3 Define the loading state so the field is visibly busy and not editable, and say what happens to a keystroke that arrives mid-load rather than letting it be silently swallowed.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/field-state-matrix
Input Group Component
Input Group Component
Join prefixes, suffixes, and buttons to an input so they read as one control.
What it does
A composite control binding an input to adjoining affixes and buttons within a single visual frame.
How it works
- 1 Find the places the app already fakes this — a currency symbol floating beside a number field, a copy button jammed next to a token, a domain suffix drawn as separate text — and rebuild them as one group.
- 2 Draw the focus treatment around the whole group when any child inside it holds focus, so the composite reads as one control rather than a box beside a button.
- 3 Give the group one accessible name from the field's label and describe affixes separately; a currency symbol or a unit must be exposed as description, not as a second label.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/input-group-component
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.