Skip to main content
New:Build with AI agents

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.

Free foreverNo credit cardPublic endpoint for the generated UI
ContactForm.tsx
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.

  1. 1
    Create your Form Plume accountStart free and give your Lovable form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
  2. 2
    Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like https://api.formplume.com/f/your-slug
  3. 3
    Connect 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.

Preview and production use different origins. If Form Plume allowed domains are enabled, add the published hostname and test there rather than assuming the preview result carries over.

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

  1. Review the diff and confirm no Cloud table, Edge Function, or email package appeared.
  2. Confirm every submitted control has a name and errors do not clear values.
  3. Submit in preview and verify the Form Plume record and notification.
  4. Temporarily break the slug and confirm the accessible failure state.
  5. 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.

Yes. Lovable is full-stack and Lovable Cloud provides backend services. Form Plume is the smaller portable option when a public form does not need to become application data.

One line. Zero backend.

The form backend you don’t have to build.

Free foreverNo credit cardSet up in under a minute