Lovable Contact Form: Connect It to Formbold

Why doesn't my Lovable contact form send anything?

Because Lovable writes the front end and stops there. The submit button often just shows a toast, or Lovable offers to build a Supabase table and an Edge Function for it. For a contact form you don't need either. Point the form at a Formbold endpoint and each message is stored, filtered for spam and emailed to you.

What do I need before I start?

A Formbold form. Open All Forms, click Create New Form and name it, for example "Lovable site contact". Then copy the endpoint from the Form Setup tab. It looks like https://formbold.com/s/YOUR_FORM_ID.

The Free plan is enough for this: 250 submissions a month across 10 forms.

What prompt do I paste into Lovable?

The quickest route is Form Setup > Built with an AI Tool?. Pick Lovable and the dashboard writes the prompt with your endpoint already in it. If you'd rather write it yourself, this one works:

Update the existing contact form so it really sends.
On submit, POST the form fields to https://formbold.com/s/YOUR_FORM_ID
using fetch with a JSON body and these headers:
Content-Type: application/json and Accept: application/json.
Give every input a name attribute (name, email, message).
Disable the button while sending. Show a success message only when
response.ok is true, and show an error message otherwise.
Do not add Supabase, Lovable Cloud, an Edge Function, an email API
or any other backend for this form. Keep the current design.

The last line matters. Without it, Lovable may decide the form needs a database and start building one.

What should the code look like afterwards?

Open the component Lovable changed, usually something like src/components/ContactForm.tsx. The submit handler should look roughly like this:

async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const form = e.currentTarget;
  setSending(true);
  const data = Object.fromEntries(new FormData(form));

  const res = await fetch("https://formbold.com/s/YOUR_FORM_ID", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify(data),
  });

  setSending(false);
  if (res.ok) {
    form.reset();
    setStatus("Thanks, we'll get back to you soon.");
  } else {
    setStatus("Something went wrong. Please try again.");
  }
}

If you see a setTimeout that fakes a delay, a console.log instead of a request, or a call to supabase.from(...), the prompt didn't take. Paste it again and name the file.

How do I test it before I publish?

Send one message from the Lovable preview. Within a few seconds it should appear in your form's Submissions tab, and the email should follow. If it doesn't:

• Open the browser's Network tab, submit again and click the request to formbold.com/s/.... A 4xx status usually means a wrong form ID.
• Check the inputs. Generated components sometimes keep values in state and leave name off the input. With this handler, a field without a name never reaches Formbold.
• Publish, then test once more on the live URL. That's the one your visitors use.

Do the live test from your phone. It's the fastest way to catch a form that works on desktop and breaks on mobile.

Should I turn on spam protection straight away?

Yes. Lovable sites tend to go live quickly, and bots find contact forms just as quickly. In Settings > Spam & Security, turn on Basic Spam Filter. This form submits with fetch, so if you want a captcha as well, use Custom reCAPTCHA with your own v2 keys. The steps are in Spam Protection.

Can Lovable send the submissions to Slack or Google Sheets?

Formbold can, on Starter and higher. Connect the app on the form's Integrations tab and leave Lovable out of it. Your Lovable code stays the same.