How to embed forms on Lovable

Lovable is an AI app builder that creates full web apps from a prompt. By embedding a Sirnia form into your Lovable app, you get the best of both: Lovable's AI-generated design and Sirnia's powerful form features, logic, file uploads, payments, email notifications, and unlimited submissions, for free and out of the box.
 
a free sirnia form embedded on a Lovable website
 
page icon
Embedding Sirnia forms on Lovable is free, including unlimited submissions.
 


How to add a form to a Lovable app

There are three main ways to build and handle forms in a Lovable project. Each one trades off speed, control, and how much backend work you want to do.
  • Prompt Lovable to generate a form. Lovable builds the form UI in your app. You get full control over the design, but you'll still need to build the backend yourself — handling submissions, storing data, sending email notifications — or connect it to Supabase.
  • Embed a no-code form builder like Sirnia. Unlike headless backends, Sirnia is a complete and free form builder that offers everything out of the box, from the form UI to the submission handling. You get a fully designed form with logic, file uploads, payments, email notifications, and a submission dashboard — without writing or styling any code in Lovable. You can also build and edit your Sirnia form directly from Lovable's chat using Sirnia's MCP server — more on that below.
  • Use a headless form backend. You still build and style the form yourself in Lovable — the backend service just receives the submission and sends you an email. A good fit if you want full design control and only need basic forms. You'll need to code your own validation, file handling, and logic, and most of these tools are paid past a small free tier.
 
page icon
This guide focuses on embedding a Sirnia form in your Lovable app — the fastest no-code way to ship a working form without building your own backend.
 

How to embed a Sirnia form in Lovable

There are two ways to add a Sirnia form to your Lovable app. The fastest is to let Lovable's AI do it for you. The manual option gives you more control over how the form is placed.

Option 1: Prompt Lovable to embed your form

  • In Sirnia, publish your form and copy the form URL from the Share tab.
  • In Lovable, open the chat and paste a prompt like:
 
Embed this Sirnia form on my contact page: https://sirnia.com/r/your-form-id
 
  • Lovable will add an iframe embed of your Sirnia form to the page you specified.
  • Preview and publish your Lovable app — your form is live.
 

Option 2: Paste the embed code manually

Use this method if you want full control over embed options like dynamic height, transparent background, or hiding the form title.
  • In Sirnia, go to your form's Share tab and click Standard , Popup or Full page depending on how you want the form to appear.
  • Adjust the embed settings (height, background, branding), then click Get the code and copy the embed code.
  • In Lovable, open the chat and prompt:
 
Add this HTML embed code to my contact page: [paste your embed code]
 
  • Lovable will insert the embed into the right place in your app's code.
  • Publish your Lovable app.
 

Build your Sirnia form from inside Lovable (MCP)

If you'd rather stay in Lovable's chat the whole time, you can connect Sirnia's MCP server to Lovable as a chat connector. Lovable's agent can then create, edit, and manage Sirnia forms on your behalf (from a single prompt) and embed the result directly in your app.
This is the best of both worlds: the form lives in Sirnia (with all its features, integrations, and submission dashboard), but you never have to leave Lovable to build it.
How to set it up:
  • In Lovable, open Connectors → Chat connectors and click Custom Custom MCP.
  • Add your Sirnia API key (Settings → API Keys)
  • In Lovable's chat, prompt something like:
 
Create a contact form in Sirnia with name, email, and message fields, then embed it on my contact page.
 
  • Lovable's agent uses the Sirnia MCP to create the form in your Sirnia workspace, grabs the form URL, and embeds it into your app .
 
page icon
Connecting custom MCP servers in Lovable requires a paid Lovable plan. Sirnia's MCP server itself is free on all Sirnia plans.
 

How to send Lovable form submissions to your email

One of the most common reasons to use Sirnia with Lovable is to get form submissions straight to your inbox — without building any backend yourself.
Sirnia offers 2 types of email notifications:
  • Self-notifications — get an email every time someone submits your form, with all the answers included (available for free).
  • Respondent notifications — send a confirmation email to the person who filled out the form (available on Sirnia Pro).
To turn them on, open your Sirnia form, go to Settings, and enable Email notifications.
 
page icon
Want to send submissions to a Notion database, Slack, Google Sheets or your Lovable app's Supabase backend? Sirnia supports webhooks and 30+ native integrations — all on the free plan.
 

Customize how your form looks in Lovable

To make your Sirnia form blend in seamlessly with your Lovable design:
  • Transparent background — enable this in the embed options so the form inherits your Lovable page background.
  • Hide form title — hide Sirnia's form title if you already have a heading on your Lovable page.
  • Match your brand — customize colors, fonts, and buttons inside Sirnia's form designer.
 

Frequently Asked Questions

What's the difference between Sirnia and a headless form backend?
A headless form backend only handles the backend — receiving submissions and sending emails. You still have to build and style the form yourself in Lovable, and code your own validation, file handling, and conditional logic. Sirnia handles the full form: you build it in Sirnia's visual editor, embed it into Lovable, and get the UI, logic, integrations, and submission dashboard out of the box.
Can I build a Sirnia form from inside Lovable?
Yes. Connect Sirnia's MCP server to Lovable as a chat connector, then prompt Lovable to create, edit, or embed Sirnia forms directly from its chat. The form lives in your Sirnia workspace (so you keep the full form builder, integrations, and submission dashboard) but you never have to switch tools to build it. Sirnia's MCP server is free on all plans.
Can I embed a Sirnia form in Lovable for free?
Yes. Embedding Sirnia forms is free, with unlimited forms and submissions on Sirnia's free plan. You only need a Sirnia Pro subscription if you want to remove Sirnia branding or use a custom domain.
How do I add a form to my Lovable app without writing code?
The easiest way is to prompt Lovable's AI: paste your Sirnia form URL into the Lovable chat and ask it to embed the form on a specific page. Lovable will add the iframe for you. No code required.
What's the best free form builder for a Lovable app?
Sirnia is a popular choice for Lovable apps because it has no submission limits on the free plan, works like a Notion doc, and embeds into Lovable with a single prompt. Other options (like Typeform) cap free submissions at 10 per month.
Will my form update automatically when I change it in Sirnia?
Yes. Any changes you make to your form content in Sirnia update automatically in the embed. You only need to re-copy the embed code if you change embed styles (like hiding the title or making the background transparent).
 
→ Return to Embed guides
 
Question mark