At a glance
- Output
- React
- Backend added
- None
- Supabase or Resend
- Not needed
- What changes
- The submit handler
- Where it goes
- Lovable’s chat
The integration
Lovable apps are React. This is the whole integration, a fetch to your endpoint with success and error handling. Keep Lovable’s markup and styling; only the submit handler changes.
In this Lovable project, connect the existing contact form to this MakeTheForm endpoint:
https://mtform.co/f/your-form-key
Requirements:
- Submit with fetch as JSON (Content-Type: application/json). Do NOT add Supabase, an edge function, or any backend. This endpoint is the backend.
- Keep the current design and component structure exactly. Only add the submit handler.
- 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 what the user typed. Do not clear the form on error.
- Add a hidden honeypot input named exactly "_mtf_honeypot", visually hidden with position:absolute;left:-9999px, tabIndex={-1}, autoComplete="off", aria-hidden="true". Never display:none it, never make it required.
- This endpoint URL is public and safe in client code. Do NOT create, request, or reference an API key, and do not move it into an environment variable.Step by step
- 1
Create the endpoint
Sign up for MakeTheForm and create a form. You immediately get a public endpoint URL (an address, not a secret) and an inbox.
- 2
Paste the prompt into Lovable
Drop the prompt above into Lovable’s chat with your endpoint URL. Lovable keeps its own design and only rewires the submit handler to POST to MakeTheForm.
- 3
Verify your recipient
Click the link in the verification email once. Until then submissions are still stored. They just don’t notify, so nothing is lost while you set up.
- 4
Publish and test
Publish the Lovable app, submit the form, and watch it appear in your inbox and by email with the sender in Reply-To.
Common pitfalls
Letting Lovable add Supabase for a contact form
It will happily scaffold a database table and an edge function. For a contact form that’s a backend to maintain, secure, and rate-limit. The prompt above tells it not to. The endpoint already is the backend.
Treating the endpoint like a secret
The public form key is an address. It belongs in client code. If Lovable tries to hide it in an env var or asks for an API key, that’s a sign it invented server logic you don’t need.
Troubleshooting
| Symptom | What’s happening | Fix |
|---|---|---|
| nothing happens | The button is wired to Lovable’s default handler, which never posts anywhere. | Re-run the prompt; confirm the handler calls fetch(endpoint) and that the endpoint URL is exactly yours. |
| 403 | Allowed-domains is on and your published Lovable domain isn’t listed. | Add your Lovable/custom domain in the form’s Spam settings, or leave the form in public mode. |
| no email | The recipient address isn’t verified yet. | Open the verification email once. Submissions received meanwhile are already saved in your inbox. |
Frequently asked questions
Does Lovable have built-in form handling?
No. Lovable generates the form’s UI, but submissions need a backend to receive, filter, and deliver them. That’s what a form endpoint like MakeTheForm provides. Without you writing or hosting server code.
Do I need Supabase to handle a Lovable form?
Not for a contact or lead form. Supabase is worth it when you need your own database and auth. To simply receive submissions by email and keep a searchable copy, one endpoint is less code and less to maintain.
How do I send email from a Lovable app?
For a contact or lead form, point the form at an endpoint that emails you each submission; there is no email service to set up. If the app needs to send its own emails, such as receipts or sign-in links, that is a job for an email provider like Resend called from a backend, not from the browser.
Is it safe to put the endpoint in my Lovable app’s code?
Yes. The public form key is a non-secret address, designed to sit in client-side code. Your destination email is never exposed in the page source.
Other platforms
Keep going
Last reviewed by the MakeTheForm team.