Make an AI-Generated Contact Form Actually Work (v0, Bolt, Lovable)

You described a site, an AI builder generated it, and it looks finished — including a clean contact form. Then you (or a visitor) hit Send, and… nothing. No email, no confirmation, no error. The form is a mannequin.

Here's why: v0, Bolt, Lovable, Cursor, and Replit generate the front end — the form's markup and styling — but not a backend to catch the submission. When someone submits, the browser has nowhere to send the data, so the click does nothing. The fix is one line: point the form at a hosted endpoint that receives, stores, spam-filters, and emails each submission. No server, no API route, no credentials buried in your generated code.

Why the submit button is dead

Every working form has two halves:

1. The form — the <form>, inputs, and styling. This is what the AI built, and it's genuinely done.
2. The submission handler — the server code that catches the POST, blocks spam, stores it, and emails you. This is what's missing.

AI builders output a site you deploy to a static/edge host — Vercel, Netlify, Cloudflare Pages, GitHub Pages. Those hosts serve files brilliantly and run no server, so there's nothing to execute the second half. It's the same reason a plain HTML site can't email you: the browser can send a form anywhere, but something has to be listening. A form backend is that missing half.

The fix: point the form at an endpoint

A form endpoint is a URL that accepts your form's submission. You set two attributes on the form the AI already gave you — action and method — and you're done:

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Every input's name becomes a field in the email you receive. That's the whole integration — the styling, layout, and animations the AI produced stay exactly as they are.

By builder — it's the same fix, different file

Whatever generated your site, the move is identical; only where you edit differs:

• v0 / Cursor / Bolt (React or Next.js): you'll have a <form> in a JSX component. Add action="https://shipmyform.com/f/YOUR_FORM_ID" and method="POST" to it. If the AI wired an onSubmit handler that does nothing (or console.logs), replace it with the fetch version below — the same endpoint, staying on the page. Full React patterns: React contact form without a backend.
• Lovable / Replit: same — find the <form> in the generated component and set its action/method, or wire the fetch call.
• Plain HTML export: paste the snippet above over the generated form.

To stay on the page with a success message instead of redirecting, submit with fetch — the same endpoint, no page reload:

async function handleSubmit(e) {
  e.preventDefault();
  const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(e.currentTarget),
  });
  if (res.ok) setSent(true); // { ok: true }
}

The details — loading states, errors, validation — are in submit a form with fetch.

What you get the moment it works

Because a real backend now sits behind the form, the parts an AI can't generate come with it:

• Email delivery from an authenticated domain, so notifications actually land in your inbox (not spam).
• Spam filtering server-side — honeypot, rate limiting, and machine-learning screening, no CAPTCHA for real people. Blocked spam doesn't count against your quota.
• A stored inbox with CSV export, so nothing is lost if an email slips past you.
• Routing to Slack, Google Sheets, Notion, or a webhook — toggles, not code.

The bottom line

An AI builder gets you 95% of a contact form — everything except the 5% that makes it work. That 5% isn't more code to generate; it's infrastructure to point at. Create a free endpoint (100 submissions a month, no credit card), paste it into the form the AI already built, and the dead button comes alive.

New to the concept? Start with what a form backend is, or if you're on a specific stack, the React and framework docs have you covered.