On this page
Your options, compared
Three ways an AI-built form ends up receiving submissions, and what each leaves you to look after.
| Approach | Backend added | Secrets to manage | Spam protection | Upkeep |
|---|---|---|---|---|
| Let the agent improvise | Often a table and a function | An email API key | Rarely | Code you did not write |
| Supabase and Resend by hand | A table and an edge function | Two services’ keys | You build it | Two dashboards |
| Form endpoint and one prompt | None | None, the endpoint is public | Built in | None |
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 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.Swap in your own endpoint, or copy the prompt from your form in the dashboard, where the endpoint is already filled in.
Step by step
- 1
Create your endpoint
Create a form in MakeTheForm and copy the endpoint URL into the prompt.
- 2
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.
- 3
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.
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’s 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 by the MakeTheForm team.