How to Make a Lovable Contact Form Work: 12 Copy-Paste Prompts

Q: Does Lovable have built-in form handling?

Not as a dedicated feature. Lovable Cloud (enabled by default) provides a Supabase-based database, storage, and edge functions, but there is no form product: no submission inbox, no per-form endpoint, no spam protection, and no built-in notification emails. Forms are assembled from a database table, an edge function, and a separately billed email provider like Resend.

Q: Why not just use Lovable Cloud + Resend for forms?

You can, but a form is still assembled from parts: a database table for storage, an edge function for notifications, and Resend as a separately billed email service. Changing a notification email requires a code change and redeployment. There is no submission dashboard, spam protection, autoresponder, or upload validation unless you build each one. Forminit replaces all of it with one service purpose-built for forms.

Q: What if Lovable generates the wrong field names?

Use the full Forminit setup prompt, including the lines that point to the setup guide. Without the guide, Lovable may use name="email" instead of name="fi-sender-email", and submissions arrive empty. If it still gets a field wrong, paste the field naming section from the Form Blocks reference into the chat.

Oguz Kose in Guides • Updated November 4, 2026 • Published February 26, 2026

How to add forms to your Lovable app with Forminit

Short answer: Give Lovable the Forminit setup prompt and your Form ID. Lovable builds the form UI, Forminit handles everything after submit: validation, storage, email notifications, file uploads, spam protection, and integrations. No Supabase tables, no Resend setup, no API routes, no backend code.

The whole setup is three steps:

Create a form at forminit.com, set it to Public mode, and copy your Form ID.
Paste one of the prompts below into Lovable’s chat, and give it your Form ID when it asks.
Submit a test entry and watch it appear in your Forminit dashboard.

Does Lovable have built-in form handling?

Not as a dedicated feature. Lovable generates the form UI, and every new project comes with Lovable Cloud, a Supabase-based backend that is enabled by default. What it still does not have is a form product: no submission inbox, no per-form endpoint, no spam protection (the docs say nothing about CAPTCHA or honeypots for public forms), and no built-in notification emails.

Handling a form the default way means prompting Lovable to create a database table, write an edge function, and wire up an email provider. Lovable’s own docs show exactly this pattern: “When a user submits the contact form, send me an email notification with the message contents using Resend” (Resend is a separate service, billed directly by Resend). Want to change the notification email address? You’re prompting a code change and redeploying. Want spam protection or a submission inbox a teammate can work in? You’re building them. These are general-purpose tools doing a job that a purpose-built service handles out of the box.

Lovable’s behavior described here was verified against its official documentation in July 2026.

How Forminit solves this

Forminit (formerly Getform.io) is a headless form backend API. One service replaces the table-plus-edge-function-plus-Resend assembly entirely. You keep the form UI that Lovable generates, and Forminit handles everything after submit: validation, storage, email notifications, file uploads, spam protection, and integrations. Change notification recipients from the dashboard, not from code. Invite collaborators with role-based access. No backend code, no multi-tool wiring.

Why Forminit works well with Lovable

Lovable generates React + TypeScript code (new projects run on TanStack Start, Lovable’s server-rendered React framework, since May 2026). Forminit has a dedicated React SDK (npm install forminit, 2 KB) with typed blocks and automatic validation. More importantly, Forminit publishes a setup guide for AI agents that app builders like Lovable can follow, so the AI knows how to name fields and wire the submit.

What you need	Lovable Cloud + Resend approach	Forminit approach
Store form submissions	Prompt a database table, columns, RLS policies	Already done (dashboard included)
Email notifications	Connect Resend (billed separately), write edge function	Built-in, one toggle in dashboard
Change notification email	Prompt a code change and redeploy	Change in dashboard, no code
File uploads	Set up storage buckets + policies	Built-in, up to 25MB
Spam protection	Build it yourself (not in Lovable’s docs)	Built-in, plus Cloudflare Turnstile, reCAPTCHA, hCaptcha, honeypot
Team collaboration	Share workspace access, no submission inbox	Role-based access (Owner, Admin, Editor, Guest)
Autoresponder to submitter	Write custom Resend logic	Built-in, configurable in dashboard
Server-side validation	Write validation logic	Automatic (typed field blocks)
UTM / attribution tracking	Build it yourself	Auto-captured by SDK
Services to manage	2 (Cloud backend + Resend)	1 (Forminit)

When is Supabase + Resend the better choice?

When form data needs to live next to your app’s other data. If submissions feed application features (user profiles, orders, content that your app reads back and displays) or your Lovable app already runs on Supabase auth and database, keeping everything in one Postgres database avoids syncing two systems, and Supabase is the right call. Forminit wins the standalone-form cases: contact, lead capture, bookings, applications, feedback, and anything where you want a submission inbox, notifications, and spam protection without building them.

How to set it up

Step 1: Create a form on Forminit

Sign up at forminit.com
Create a new form
Go to Form Settings and set authentication mode to Public (required for client-side usage)
Copy your Form ID

Public mode needs no API key and is rate-limited to 1 request per 5 seconds per IP address, which is right for contact and booking forms. If you later need high-volume sending from a server, the same form also supports protected mode: an X-API-KEY header behind your own endpoint at 5 requests per second.

Step 2: Prompt Lovable

Open Lovable’s chat and paste one of the prompts below. Lovable has no terminal, so it follows step 2 of the prompt and reads the Forminit setup guide. The guide gives it the context it needs (field naming, SDK usage, error handling), so it wires the integration without inventing field names or missing the fi- prefix. Lovable replies with a plan first: check the field names, answer its questions (such as whether an upload takes one file or several), and it builds the form.

Copy-paste Lovable form prompts

Contact form

Build me a contact form with name, email, and message fields. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Multi-step sales inquiry form

Build me a multi-step sales inquiry form. Step 1: sender email, company name, phone number. Step 2: budget range (radio: $500-$2K, $2K-$10K, $10K-$50K, $50K+), project timeline (select: This month, 1-3 months, 3-6 months, 6+ months), and a project description textarea. Show a progress bar between steps. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Job application form with file upload

Build a job application form with first name, last name, email, phone, a resume file upload (.pdf, .doc, .docx only), and a cover letter textarea. Show file name after selection. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Feedback / NPS survey form

Build a customer feedback form with sender email, a satisfaction rating (1-5 stars), a "How did you hear about us?" radio group (Google, Social Media, Friend, Other), and an optional comments textarea. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Event registration form

Build an event registration form with full name, email, company, a ticket type select (Free, Standard $49, VIP $149), a dietary requirements checkbox group (Vegetarian, Vegan, Gluten-free, No restrictions), and a special requests textarea. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Bug report form

Build a bug report form with sender email, a severity radio (Low, Medium, High, Critical), a "Steps to reproduce" textarea, an "Expected behavior" textarea, and a screenshot file upload (images only). Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Waitlist / early access form

Build a waitlist signup form with email, full name, and a "What are you most interested in?" textarea. Show a "You're on the list!" success message with confetti animation after submit. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Tattoo studio booking form

Build a tattoo appointment request form with full name, email, phone, a tattoo placement select (Arm, Leg, Back, Chest, Ribs, Neck, Hand, Other), a size radio (Small 2-4 inch, Medium 4-8 inch, Large 8+ inch, Full sleeve), a style select (Traditional, Japanese, Realism, Blackwork, Watercolor, Geometric, Minimalist, Lettering), a description textarea for the tattoo idea, and a reference image file upload (images only, multiple files). Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Yoga class booking form

Build a yoga class booking form with full name, email, phone, an experience level radio (Beginner, Intermediate, Advanced), a class type select (Hatha, Vinyasa, Yin, Hot Yoga, Prenatal, Private Session), a preferred schedule checkbox group (Monday Morning, Wednesday Evening, Saturday Morning, Sunday Afternoon), and a health conditions or injuries textarea. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Restaurant reservation form

Build a restaurant reservation form with full name, email, phone, a date picker for the reservation date, a party size select (1-2, 3-4, 5-6, 7-8, 9+), a seating preference radio (Indoor, Outdoor, Bar, Private Dining), a dietary restrictions checkbox group (Vegetarian, Vegan, Gluten-free, Nut allergy, Halal, Kosher, None), and a special requests textarea. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Photography session inquiry form

Build a photography session inquiry form with full name, email, phone, a session type select (Portrait, Wedding, Family, Newborn, Product, Real Estate, Event), a preferred date picker, a budget range radio ($200-$500, $500-$1000, $1000-$2000, $2000+), a location textarea, and a mood board / reference images file upload (images only, multiple files). Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

Personal trainer consultation form

Build a personal trainer consultation form with full name, email, phone, a fitness goal checkbox group (Weight Loss, Muscle Gain, Flexibility, Endurance, Injury Recovery, General Fitness), a current activity level radio (Sedentary, 1-2 days/week, 3-4 days/week, 5+ days/week), a preferred training select (In-person, Online, Hybrid), and a medical conditions or limitations textarea. Connect it to Forminit (forminit.com, a form backend).

Form ID: ask me for it before writing code (it is on my form's page at app.forminit.com).

Get the Forminit setup guide, then follow it:
1. If you can run terminal commands, install it: npx skills add forminit/skills --skill forminit-setup -a universal claude-code -y. Then read .agents/skills/forminit-setup/SKILL.md.
2. Otherwise read https://forminit.com/setup.md in full.
3. If you can do neither, stop and tell me.

What happens after a form is submitted?

Once a form is submitted, Forminit automatically:

Validates all fields server-side (email format, phone format, file types)
Stores the submission in your dashboard with an inbox-style UI
Sends email notifications to you (configurable)
Captures attribution data including UTM parameters, ad click IDs (gclid, fbclid, msclkid), referrer URL, and geolocation
Forwards data to other services via webhooks, Zapier, Slack, or Discord

You can also set up autoresponders to automatically reply to the person who submitted the form.

Frequently asked questions

Why not just use Lovable Cloud + Resend for forms?

You can. Lovable Cloud provisions the Supabase-based backend for you, but a form is still assembled from parts: a database table for storage, an edge function for notifications, and Resend as a separately billed email service. Changing a notification email requires a code change and redeployment. There is no submission dashboard, no spam protection, no autoresponder, and no upload validation unless you build each one yourself. Forminit replaces all of it with a single service purpose-built for form submissions.

When is Supabase the better choice for a Lovable app?

When form data must live next to your app’s other data. If submissions feed application features (user profiles, orders, in-app workflows) or you already run your app’s auth and database on Supabase, keeping everything in one Postgres database is the right call. For standalone forms like contact, lead capture, bookings, and applications, a form backend is less work.

Can I use Forminit with Lovable without Supabase or Lovable Cloud?

Yes. Forminit is a standalone form backend. You do not need Supabase, Lovable Cloud tables, or any server-side code. Install the SDK, add your Form ID, and submissions are handled automatically.

Does Forminit work with Lovable’s React + TypeScript stack?

Yes. Forminit has a native JavaScript/TypeScript SDK (npm install forminit) with first-class React support. It matches Lovable’s React + TypeScript + Tailwind stack directly.

Can I customize the prompt to match my use case?

Absolutely. The prompt examples above are starting points. Describe your exact fields, layout, and behavior; Lovable will generate the UI, and the setup guide makes sure the Forminit integration is wired correctly. You can ask for multi-step forms, conditional fields, custom validation messages, specific styling, or any React pattern.

What if Lovable generates the wrong field names?

This is why the setup guide matters. Without it, Lovable may use name="email" instead of name="fi-sender-email", which means submissions arrive empty. Always keep the setup guide lines in your prompt. If Lovable still gets it wrong, paste the specific field naming section from the Form Blocks reference into the chat.

Does Forminit handle spam protection for Lovable forms?

Yes. Spam protection is built in and works out of the box. You can additionally enable Cloudflare Turnstile, reCAPTCHA v3, hCaptcha (visible and invisible), or a honeypot field from your form settings in the dashboard; no code changes in your Lovable app are required.

Can I receive email notifications when someone submits a form?

Yes. Email notifications are built into every Forminit plan. Toggle them on in your form settings and specify the recipient addresses. You can also set up autoresponders to reply to the person who submitted the form.