How do I add a contact form to a Lovable site?

You have two main options. You can ask Lovable to build one, which also means setting up email through Lovable Emails or Resend so that submissions reach you. Or you can paste a prompt that embeds a hosted form such as Collectform, which needs a script and one element on your contact page, with no database table, edge function or email provider to set up.

Can Lovable send contact form emails by itself?

Yes, on a paid plan. Lovable Emails can send app emails with no external provider, but your workspace must be on a paid plan, and you must own a domain and be able to add NS records for a sender subdomain. Lovable says DNS changes can take up to 72 hours. The other route is its Resend connector, which needs a Resend account, an API key and a verified sending domain. Resend's shared test address only delivers to the account owner, so it can't serve real recipients.

Does this work on Lovable's Free plan?

The prompt is a normal chat message, and Lovable's Free plan includes 5 daily build credits, capped at 30 a month. Lovable's code editor is read-only on the Free plan, so you couldn't paste the code in by hand, but the prompt doesn't need that. Collectform is a separate product with its own 7-day trial, and plans start at $20 a month billed yearly.

Is the Collectform contact form an iframe?

No. It's a web component that renders directly in your page, inside Shadow DOM. In my test on a TanStack Start project, it loaded with zero iframes. You style it with a Collectform theme that sets the font, colors, logo and corner style. It doesn't take custom CSS, and your site's CSS can't reach inside it.

Why does my test submission not appear in Collectform?

The most likely reason is that the element still has template="true", which puts the form in preview mode. In preview mode the form works and even shows its thank-you screen, but it saves nothing. Remove that attribute and make sure form-id is your own form's ID, not the demo form's. Your form also has to be published.

How to Add a Contact Form to Lovable (With a Copy-Paste Prompt)

Adding a contact form to your Lovable site should take one prompt.

So I wrote that prompt and tested it in Lovable.

Here's the prompt and what it does.

The short version:

One prompt: paste it into Lovable and your contact page has a working form.
Nothing to build: no database table, no edge function and no email provider.
Try before you sign up: the first prompt uses my demo form in preview mode, so nothing gets saved.

This is the form you're adding

It's my demo form, running live on this page. Go ahead and fill it in. It's in preview mode, so nothing is saved.

Full screen Use this template

You'll swap in your own form later, with your own questions, colors and fonts.

Step 1: Paste this prompt into Lovable

Make sure you're in Build mode. Lovable's Chat and Plan modes don't change your code directly.

This prompt uses the demo form above, so you can see it working on your own site before creating an account:

Add a contact form to this site using Collectform, on the contact page. If there is no contact page, create one at /contact and link to it in the navigation.

Collectform is a hosted form loaded as a web component. Do not build a form, database table, edge function or email sending for it, and do not change anything unrelated.

1. Load this script once for the whole site by adding it to the scripts list in the root route's head() in src/routes/__root.tsx, and keep type="module":
   https://cdn.collectform.com/collectform.js

2. On the contact page, render this element:
   <collectform-embed form-id="dgrvkn36prcz9sn" template="true"></collectform-embed>

3. Add this file as src/collectform.d.ts so TypeScript accepts the element:

import type { DetailedHTMLProps, HTMLAttributes } from "react"

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "collectform-embed": DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
        "form-id": string
        template?: string
      }
    }
  }
}

When you're done, tell me which files you changed.

The "do not build" line matters. Without it, an AI builder's instinct is to be helpful and build the whole thing again.

Step 2: Check what Lovable changed

Lovable's agent writes its own version each time, so check its work. You should see something close to this in src/routes/__root.tsx:

head: () => ({
  scripts: [
    {
      type: "module",
      src: "https://cdn.collectform.com/collectform.js",
    },
  ],
}),

Your contact page should also render the element, and you should have a new src/collectform.d.ts file. Without that file, TypeScript rejects the element with Property 'collectform-embed' does not exist on type 'JSX.IntrinsicElements'.

Now open your contact page. The form should appear within a second or two.

If you see a new form table or edge function in the change list, Lovable went off script. Revert that change and paste the prompt again.

Step 3: Create your real form

The demo proved it works. Now you need your own form.

Create a Collectform account, then start from a blank form or a template. Add your questions, set your colors and fonts, and hit Publish.

The publish screen shows your form's code with its real ID, including an AI prompt tab. For this article you only need the ID, which is the form-id value in that code.

Step 4: Switch Lovable to your form

Replace YOUR_FORM_ID and send this:

Change the Collectform form on the contact page to my own form. Set form-id to YOUR_FORM_ID and remove the template attribute. Change nothing else.

Don't skip this step. While template="true" is there, the form is in preview mode. I submitted it in my tests, and it shows the thank-you screen but sends nothing to the server.

Your visitors would see a success message, and you'd never see their message.

Keeping my demo ID and removing the attribute is no better, because your visitors' answers would go to my demo form. You need your own ID.

Step 5: Publish and send yourself a test

Publish your Lovable site, open the live contact page, and submit one real test.

Then check three things in Collectform:

Your test appears under Response.
Email alerts are set up the way you want under Settings, then Email.
Any other destinations are connected under Integrations, such as webhooks or Zapier.

That's it. Five steps, and two of them are copy and paste.

What I tested

I ran this prompt in Lovable, and the form worked.

I also applied the prompt's exact steps to a clean TanStack Start project on React 19, then ran it in Chrome with outgoing writes blocked:

Types and build: passed
Form: loaded, and was still there after leaving the page and coming back
Writes in preview mode: 0
Console errors: 0

The script loaded once per visit, with zero iframes. The server sent the element in its HTML, and it hydrated with no warnings. The form itself still appears once the script runs in the browser.

After this, you stop spending credits on your form

This is the part I like most.

Lovable's chat runs on credits, and even a small change means another message. Once the embed is in place, changing the form no longer involves Lovable at all.

Add a question, reorder the fields or change the wording in Collectform, hit Publish, and your site shows the new version on the next page load. There's no prompt and no redeploy.