# Lovable contact form that sends email

> Make the form on your Lovable site send real email with FormDoc: why AI-built forms don’t send, a ready prompt for Lovable, and how to test it.

To make a form on a Lovable site send email, point it at FormDoc: paste the prompt below into Lovable with your free access key, and every submission is emailed to you. No backend, database or API keys are needed.

Lovable builds web apps from a chat: usually React with Vite, TypeScript, Tailwind CSS and shadcn/ui components, published on a lovable.app address or your own domain.

## Why the form on your Lovable site doesn’t send

When you ask Lovable for a contact form, it designs the form well, but there is no server to receive it. It may show a “Thanks!” message without sending anything, or suggest connecting a database and writing a backend function to store and email the message. FormDoc does that part for you, so you don’t need to set up a backend just for a form.

## Fix it with one prompt

1.  Get a free access key at [app.formdoc.dev/new](https://app.formdoc.dev/new) and confirm your email.
2.  Copy the prompt and replace `YOUR_ACCESS_KEY` with your key.
3.  Paste it into Lovable, let it update the form, then publish.

TEXT

```text
Add a contact form to the Contact page that sends every submission to my email using FormDoc, a form backend (no server code or API route needed).

Fields:
- Name (required): name="name"
- Email (required): name="email"
- Message (required): name="message"

Requirements:
1. Build it as a real <form> element in this app.
2. Every field needs a name attribute exactly as listed, a visible <label>, and the required attribute. Use type="email" for the email field.
3. Inside the form add <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">.
4. Add a hidden spam trap: a checkbox named "botcheck", hidden with display:none, tabindex -1 and autocomplete off.
5. On submit, prevent the page reload and POST new FormData(form) to https://api.formdoc.dev/v1/submit with the header "Accept: application/json". Don't set Content-Type yourself.
6. While sending, disable the button and show "Sending…".
7. If the JSON response has success: true, reset the form and show "Thanks! Your message was sent." Otherwise show error.message from the response and keep what the visitor typed.
8. Match the existing design and components.

Don't fake success with console.log, setTimeout or alert, don't use mailto:, and don't create a backend route or server function: FormDoc receives the form and emails me.
```

Want a different form, such as a quote request or a booking? The [AI form prompt generator](https://www.formdoc.dev/tools/ai-form-prompt-generator/) writes this prompt for any form and fields.

If Lovable has already connected Supabase for other features, you can keep it: the form can still send to FormDoc, which handles spam filtering and email for you.

## What changes, and why

| What the AI often writes | What works with FormDoc |
| --- | --- |
| A submit handler that logs the data or waits, then shows “Thanks!” | A real request to FormDoc, with success shown only when it worked |
| Inputs held in React state without a name | Every field has a name, which becomes its label in your email |
| A backend route or function you have to host | No server code: the browser sends the form to FormDoc |
| No spam protection | A hidden honeypot, plus FormDoc’s spam scoring and rate limits |

## Test it

Publish the site, send yourself a message and check your inbox. If nothing arrives:

-   Make sure you confirmed your email address when you got the key. Until then, submissions are refused.
-   Paste the form’s code into the [AI form checker](https://www.formdoc.dev/tools/ai-form-checker/): it lists exactly what’s missing and writes a prompt to fix it.
-   Open your browser’s developer tools and look at the request to `api.formdoc.dev`: the JSON response explains any error.

For the general version of this guide, see [forms on AI-built websites](https://www.formdoc.dev/docs/ai-builders/), and for the full story read [why your AI-built form isn’t sending emails](https://www.formdoc.dev/blog/ai-built-form-not-sending/).

## Common questions

### Do I need a backend or database for the form?

No. FormDoc receives the form, filters spam and emails it to you. Your Lovable project only needs the form itself.

### Will this change how my site looks?

No. The prompt asks Lovable to keep the existing design and components and only change how the form submits.

### Is the access key safe to put in the code?

Yes. It’s public by design: it only lets people send you submissions, and it can’t read anything.

### How many submissions are free?

The Free plan includes 250 submissions a month, with spam protection and email notifications. See [pricing](https://www.formdoc.dev/pricing/).