How to embed forms on Lovable

Put a form built here into an app generated with Lovable, by prompting Lovable with the link or pasting the embed snippet yourself.

Lovable generates a whole web app from a prompt. What it does not give you out of the box is a form backend: somewhere for the answers to go, a notification when one arrives, validation, file uploads. Embedding a form from Tinyform covers that side, so the app keeps Lovable's design and the form keeps its logic, its uploads, its notifications and its submissions table.

Ways to put a form in a Lovable app

There are three shapes this can take, and they differ in how much you build yourself.

• Ask Lovable to generate the form. You get full control of the markup and the styling, and you also own everything behind it: receiving the submission, storing it, sending a mail, or wiring a database up to do those.
• Embed a form built elsewhere. The form is designed, validated and stored on your Tinyform install, and Lovable only has to draw a frame. Logic, file uploads, email notifications and the submissions table come with it, and nothing in the Lovable project has to be styled or coded for the form.
• Use a headless form endpoint. You still build and style the form in Lovable; a service receives the POST and emails it to you. That works for a basic contact form, and leaves validation, file handling and logic to you.

Embed the form in Lovable

Two ways in. The quicker one is to let Lovable's agent place the frame for you; the manual one gives you the embed options.

Option 1: prompt Lovable with the link

1. Copy the link

   Publish the form, open its Share tab, and copy the address from Share Link. It has the shape /r/<id>.

2. Ask Lovable to embed it

   In Lovable's chat, ask for something like "Embed this form on my contact page" followed by the link. Lovable adds an iframe pointing at the form on the page you named.

3. Preview and publish

   Check the page in Lovable's preview, then publish the app.

Option 2: paste the embed code yourself

Take this route when you want a say in how the frame behaves: whether it grows with the form, whether the title is drawn, whether the background is transparent.

1. Pick a mode

   On the Share tab, under Embed Form, choose Standard, Popup or Full page depending on how the form should sit in the page.

2. Set the options

   Adjust the switches (see Embed your form for what each one does), click Get the code and copy the snippet.

3. Hand it to Lovable

   In Lovable's chat, ask it to add the HTML embed code to a specific page and paste the snippet. Lovable places it in that page's markup.

4. Publish

   Publish the Lovable app. The form is live inside it.

Building the form from Lovable's chat

The reference product offers an MCP server, so an AI agent in another tool can create and edit forms on its behalf. Tinyform does not have one yet; see MCP server for where that stands. For now the form is built in the editor at /forms/<id>/edit and embedded from the Share tab.

Get submissions in your inbox

The most common reason to pair a form with a Lovable app is to receive the answers by email without writing a backend. There are two email rows under the form's Settings tab:

• Self email notifications send you a mail for every submission, with the answers in it.
• Respondent email notifications send a confirmation to the person who filled the form in.

Turn on whichever you need. Email notifications explains what each one can carry, including the PDF of the answers.

Make the form match the page

A few settings decide whether the embed looks like part of the app or like a box dropped into it:

• Transparent background, on by default in Standard mode, lets the frame show the Lovable page's own background through it.
• Hide form title, also on by default, keeps the form's title out of the frame when the page already has a heading above it.
• Your colours and font. Customize the form in the editor so its buttons, inputs and text match the app's design.

Frequently asked questions

What is the difference between an embedded form and a headless form endpoint?

A headless endpoint only receives a submission and mails it on; the form itself, its validation and any logic are yours to build in Lovable. An embedded form arrives complete: you design it in the editor, frame it in the app, and get the UI, the logic, the uploads, the notifications and the submissions table together.

Can I build the form without leaving Lovable?

Not yet. There is no MCP server or agent connector, so the form is built in the editor and embedded by link or by snippet.

How do I add a form to a Lovable app without writing code?

Paste the form's /r/<id> link into Lovable's chat and ask it to embed the form on a page. Lovable writes the iframe; you write nothing.

Will the embedded form update when I change it?

Yes. Content changes made in the editor and published show up in the frame on the next load. You only need to re-copy the snippet when you change an embed option, such as hiding the title or making the background transparent, because those travel in the frame's URL.

Do more

• Embed your form
• Embed guides