How to Add a Working Contact Form to Your Lovable App

By Forminit in Guides • Updated March 14, 2026 • Published February 26, 2026

How to add forms to your Lovable app with Forminit

Short answer: Give Lovable a prompt with your Form ID and a link to the Forminit skill guide. 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.

Does Lovable have built-in form handling?

No. Lovable generates the form UI (React + TypeScript + Tailwind), but it does not handle what happens after the user clicks submit. There is no built-in submission storage, email notification, file upload handling, or spam protection.

The default recommendation is to connect Supabase for storage and Resend for email notifications. That means two separate services, two sets of API keys, two dashboards, and code that glues them together. Want to change the notification email address? You’re editing code and redeploying. Want a teammate to see submissions? You’re giving them Supabase access. Neither Supabase nor Resend were built for form handling — you’re stitching together general-purpose tools to do a job that a purpose-built service handles out of the box.

How Forminit solves this

Forminit is a headless form backend API. One service replaces the Supabase + Resend stack 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. Forminit has a dedicated React SDK (npm install forminit, 2 KB) with typed blocks and automatic validation. More importantly, Forminit publishes agent skill guides that AI coding tools like Lovable can follow — so the AI knows exactly how to build and connect forms correctly on the first try.

What you need	Supabase + Resend approach	Forminit approach
Store form submissions	Create Supabase table, define columns, set RLS policies	Already done (dashboard included)
Email notifications	Set up Resend, write edge function, manage API keys	Built-in, one toggle in dashboard
Change notification email	Edit code and redeploy	Change in dashboard, no code
File uploads	Set up Supabase Storage + policies	Built-in, up to 25MB
Spam protection	Build it yourself	reCAPTCHA, hCaptcha, honeypot
Team collaboration	Give Supabase + Resend access separately	Role-based access (Owner, Admin, Member)
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 (Supabase + Resend)	1 (Forminit)

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

Step 2: Prompt Lovable

Open Lovable’s chat and paste one of the prompts below. The skill guide URL gives Lovable all the context it needs — field naming conventions, SDK usage, validation rules, error handling patterns — so it builds the integration correctly without hallucinating field names or missing the fi- prefix.

Prompt examples

Contact form

Build me a contact form with name, email, and message fields. Connect it with Forminit for form submissions.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 with Forminit.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

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 Supabase + Resend for forms in Lovable?

You can, but it means managing two services, two API keys, and writing glue code. Changing a notification email requires a code change and redeployment. Adding a teammate means granting access on both platforms separately. There is no submission dashboard, no spam protection, no autoresponder, and no file upload handling unless you build each one yourself. Forminit replaces both with a single service purpose-built for form submissions.

Can I use Forminit with Lovable without Supabase?

Yes. Forminit is a standalone form backend. You do not need Supabase, a database, 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 skill guide ensures 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 exactly why the skill guide matters. Without it, Lovable may use name="email" instead of name="fi-sender-email", which means submissions arrive empty. Always include the skill guide URL 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?

Yes. Forminit supports reCAPTCHA v3, hCaptcha (visible and invisible), and honeypot fields. Enable them from your form settings in the dashboard.

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.