Connect an AI-built form to email
The failure mode is always the same: the generated form looks perfect and the submit button does nothing, or the agent bolts on a database and a mail SDK you now have to secure. The fix is a precise prompt. Here’s a tool-agnostic one that works across builders.
AI builders like Lovable, Bolt, v0, Cursor, and Replit generate the form’s interface but not a backend to receive it. Give the agent one prompt that pins your endpoint, the honeypot field, and success/error handling, and it wires the form to POST there, so submissions get spam-filtered, emailed, and stored without any invented backend.
The minimal integration
Paste this into your builder’s chat with your own endpoint URL. It spells out the guardrails agents otherwise get wrong: inventing API keys, exposing secrets, or resetting the form on error.
Connect the existing contact form on this site to the MakeTheForm endpoint:
https://mtform.co/f/your-form-key
Requirements:
- Submit with fetch as JSON (Content-Type: application/json). Do not add a backend route.
- Keep the current design and markup structure. Do not restyle the form.
- Disable the submit button while the request is in flight.
- Treat any HTTP 2xx as success; show an inline success message and reset the form.
- On failure, show the message from the JSON response at error.message, and PRESERVE the values
the user already entered. Do not reset the form on error.
- Include a hidden honeypot field named exactly "_mtf_honeypot". It must be visually hidden with
position:absolute;left:-9999px, have tabindex="-1", autocomplete="off", and aria-hidden="true".
Never make it display:none, and never make it required.
- This endpoint URL is public and safe to put in client-side code. Do NOT invent, request, or
reference an API key, and do not move it into an environment variable.
- Do not add any analytics or logging of the submitted field values.Paste into Codex, Claude, Replit, Lovable, Bolt, or v0. The prompt specifies success, error, and spam handling explicitly.
Step by step
- 01
Create your endpoint
Create a form in MakeTheForm and copy the endpoint URL into the prompt.
- 02
Paste the prompt
Drop it into your builder (Lovable, Bolt, v0, Cursor, Replit, or similar). The guardrails stop the agent from inventing a backend or leaking a key.
- 03
Verify installation
Publish, submit a test, and confirm it appears in your inbox. If the agent added a database or API key, remove it. The endpoint is the only backend you need.
Copy this prompt into your AI builder
Paste it as-is. It pins the exact endpoint, spam field, and success/error behavior so the agent wires the form correctly instead of inventing a backend or leaking a key.
Connect the existing contact form on this site to the MakeTheForm endpoint:
https://mtform.co/f/your-form-key
Requirements:
- Submit with fetch as JSON (Content-Type: application/json). Do not add a backend route or database.
- Keep the current design and markup structure. Do not restyle the form.
- Disable the submit button while the request is in flight.
- Treat any HTTP 2xx as success; show an inline success message and reset the form.
- On failure, show the message from the JSON response at error.message, and PRESERVE the values the user already entered. Do not reset the form on error.
- Include a hidden honeypot field named exactly "_mtf_honeypot". Visually hide it with position:absolute;left:-9999px, tabindex="-1", autocomplete="off", aria-hidden="true". Never make it display:none, and never make it required.
- This endpoint URL is public and safe to put in client-side code. Do NOT invent, request, or reference an API key, and do not move it into an environment variable.
- Do not add analytics or logging of the submitted field values.Common pitfalls
The agent invents an API key
Agents assume every integration needs a secret. This one doesn’t. The public form key is an address. The prompt tells the agent explicitly not to create or request a key.
The agent resets the form on error
Default handlers often clear inputs on any failure, losing what the visitor typed. The prompt requires preserving values on error and only resetting on success.
Troubleshooting
| Symptom | What is happening | Fix |
|---|---|---|
| submit does nothing | The generated handler never posts anywhere. | Re-run the prompt and confirm it calls fetch(endpoint) with your exact URL. |
| exposed “secret” | The agent hid the endpoint in an env var and asked for a key. | Move the endpoint back into client code; it’s public by design. Delete any invented key. |
Frequently asked questions
→Why doesn’t my AI-generated form send anything?
Because the builder created only the front end. Submissions need a backend to receive and deliver them. Pointing the form at a hosted endpoint provides that backend without you writing server code.
→Which AI builders does this work with?
Any of them: Lovable, Bolt.new, v0, Cursor, Replit, Framer, and others. They all output standard HTML/JS forms, and the endpoint accepts a normal POST, so one prompt pattern covers them all.
→Do I need a database or email service for an AI-built form?
No. The endpoint stores each submission in a searchable inbox and emails it to you, so there’s no database to add or mail provider to configure and keep in good standing.
Keep going
Last reviewed July 23, 2026
Ship this form for real
Create an endpoint, paste it in, and watch the first submission land in your inbox, in under three minutes.
Create free endpoint