FormRill
  1. AI builders
  2. Lovable

Lovable contact form not working or not sending?

The toast says “Message sent”, the form clears, and nothing ever reaches your inbox. Lovable can build you a polished contact section in one message. The generated submit handler often has nowhere real to send to, so the visitor sees a success toast and you get nothing.

Next: your form URL and a ready-to-paste prompt appear right away, set to email this address. No password; we email you a sign-in link. Free for 500 submissions a month, no card.

Why it doesn’t send

A contact form needs something that receives the POST and turns it into an email. A generated React page is front-end code, and unless you also set up a backend, the handler is a placeholder: it logs, shows a toast, or posts to a URL that doesn’t exist.

You can build a backend inside your project, or you can post to a hosted one. FormRill is the hosted option: one URL, no keys in your code, no function to deploy.

Paste this into Lovable

Paste it into the chat of your Lovable project. Lovable edits the form component, and you can test the change in the preview.

prompt for Lovable

Make my contact form send submissions to FormRill at https://api.formrill.com/YOUR_FORM_ID/submit. Edit the existing contact form component and replace any handler that only shows a toast with a real request to that URL. Keep my existing fields and styling, name the email input "email", and add <input type="checkbox" name="botcheck" hidden /> as a honeypot. If the form submits with JavaScript, send FormData with fetch and the header Accept: application/json, show success only when the JSON response has ok: true, and show an error otherwise. Do not add a backend, API route, edge function, environment variables or API keys.

Replace YOUR_FORM_ID with the ID from your form URL after signup. After you sign up, your dashboard shows this prompt with your real form URL already filled in.

Lovable gotcha: If your project is connected to Supabase, Lovable may reach for an edge function to send the email. A contact form doesn’t need one, which is why the prompt says no edge function.

What it produces

async function onSubmit(e) {
  e.preventDefault()
  setStatus('sending')
  const res = await fetch('https://api.formrill.com/YOUR_FORM_ID/submit', {
    method: 'POST',
    headers: { Accept: 'application/json' },
    body: new FormData(e.currentTarget), // includes the hidden botcheck field
  })
  const data = await res.json().catch(() => ({}))
  setStatus(res.ok && data.ok ? 'sent' : 'error')
}

Three steps

  1. Sign up and copy your form URL. Replace YOUR_FORM_ID in the prompt with its ID.
  2. Paste the prompt into Lovable chat and let it edit the form component.
  3. Open your published site, send a test message and check your inbox and dashboard.

Questions

Do I need a Supabase edge function or any backend in Lovable?

Not for a contact form. The form posts straight to your FormRill URL, which stores the message and emails you.

Why does the toast say sent but I get no email?

Usually the handler shows success without checking a response. The prompt makes it show success only when FormRill returns ok: true.

Does it work in the Lovable preview and on a published site?

It is a normal browser request, so it should work from either. Send one test from your live URL to be sure.

Is it free?

Yes: 500 submissions a month free for your Lovable site, no card. See pricing.

Fix your Lovable form in one paste

Free up to 500 submissions a month and unlimited forms. No server, no credit card.

Start free

Other AI builders