Make your Lovable contact form actually send.
Keep the form Lovable generated. Add one Form Plume endpoint to receive submissions by email, block spam, store messages, and send form data anywhere.
const response = await fetch(FORM_PLUME_ENDPOINT, {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
if (!response.ok) throw new Error("Submission failed");The full guide
A smaller path inside a full-stack builder.
Prompt Lovable precisely, keep secrets out of the client, and verify both preview and production.
Lovable is a full-stack app builder. Lovable Cloud can provide a database, authentication, storage, Edge Functions, secrets, and email integrations. You do not need Form Plume to make a form possible. A portable endpoint is useful when the form is simply public contact, lead, or waitlist intake and you do not want its storage and delivery coupled to the generated app.
- 1Create your Form Plume accountStart free and give your Lovable form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
- 2Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like
https://api.formplume.com/f/your-slug - 3Connect it inside LovableInspect the generated change, submit in preview, then repeat from the published custom domain. Send one test submission from the real Lovable app or preview environment and confirm it reaches Form Plume.
Prompt Lovable for the smaller path
Connect the existing contact form to this public Form Plume endpoint:
https://api.formplume.com/f/your-public-slug
Keep the current React UI and styles. Submit FormData with fetch and Accept:
application/json. Preserve name, email, and message name attributes. Add accessible
pending, success, and error states, and keep values after an error. Do not create a
Lovable Cloud table, Supabase table, Edge Function, Resend integration, or server route
only for this form. The endpoint is public configuration. Never expose an access key,
webhook signing secret, Supabase service key, or email-provider credential. Show the
files changed and explain how to test preview and the published app.Lovable may suggest its native backend because that path is capable and deeply integrated. Keep it when submissions must join authenticated user records or drive in-app workflows. Choose the direct endpoint when operational form delivery is the entire requirement.
Expected React request
const response = await fetch("https://api.formplume.com/f/your-public-slug", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(event.currentTarget),
});
if (!response.ok) throw new Error("Submission failed");Do not manually set multipart Content-Type; the browser adds its boundary. The public form slug belongs in client code. Lovable secrets, service-role keys, protected-form keys, and webhook secrets do not.
When Lovable Cloud is better
Use Lovable's database and backend functions when the form updates application state, needs authenticated ownership, or must combine private credentials with custom logic. Use a dedicated endpoint for a public form that needs an inbox, notifications, spam controls, integrations, and webhooks without introducing another app table and function.
Verify the generated change
- Review the diff and confirm no Cloud table, Edge Function, or email package appeared.
- Confirm every submitted control has a
nameand errors do not clear values. - Submit in preview and verify the Form Plume record and notification.
- Temporarily break the slug and confirm the accessible failure state.
- Publish and repeat from the final domain.
For the generated React component, see the React guide. Compare other app builders in the v0, Bolt, Replit, and Base44 guides.
Primary sources
FAQ
Lovable form questions
before you publish.
One line. Zero backend.
