Give your Bolt.new form a real backend
This is about Bolt.new, the StackBlitz AI app builder. Not Bolt CMS. Bolt.new gets you a running app fast, but a contact or lead form still needs somewhere durable to send data. Rather than have Bolt spin up an Express route and a mail service, point the form at one endpoint.
Bolt.new scaffolds the front end but leaves the form’s submit unwired. Point the form at a MakeTheForm endpoint and it accepts the POST, filters spam, emails you the submission, and keeps it in a searchable inbox, no server or database to add to your Bolt project.
The minimal integration
Bolt.new projects are typically React/Vite. This fetch-based handler is the whole integration. Keep Bolt’s generated markup and only change what happens on submit.
import { useState } from 'react';
export function ContactForm() {
const [status, setStatus] = useState({ state: 'idle' });
async function handleSubmit(event) {
event.preventDefault();
const form = event.currentTarget;
setStatus({ state: 'submitting' });
try {
const response = await fetch('https://mtform.co/f/your-form-key', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(Object.fromEntries(new FormData(form))),
});
const result = await response.json();
if (!response.ok) {
throw new Error(result.error?.message ?? 'Unable to send your message.');
}
form.reset();
setStatus({ state: 'success' });
} catch (error) {
// Entered values stay put; we only reset on success.
setStatus({ state: 'error', message: error.message });
}
}
return (
<form onSubmit={handleSubmit}>
<input name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
{/* Spam trap: hidden from people, tempting to bots. */}
<input
type="text"
name="_mtf_honeypot"
tabIndex={-1}
autoComplete="off"
aria-hidden="true"
style={{ position: 'absolute', left: '-9999px' }}
/>
<button type="submit" disabled={status.state === 'submitting'}>
{status.state === 'submitting' ? 'Sending…' : 'Send'}
</button>
{status.state === 'success' && <p role="status">Thanks. We got your message.</p>}
{status.state === 'error' && <p role="alert">{status.message}</p>}
</form>
);
}Drop in as a component, or copy the handler into your existing form. Disables the button while submitting and preserves entered values on error.
Step by step
- 01
Create the endpoint
Create a form in MakeTheForm to get your public endpoint URL and an inbox.
- 02
Prompt Bolt.new
Paste the prompt above into Bolt with your endpoint. Bolt rewires the submit handler without adding a server.
- 03
Verify and deploy
Verify your recipient email once, deploy the Bolt app, and submit the form to confirm it lands in your inbox.
Copy this prompt into your AI builder
Paste it as-is. It pins the exact endpoint, spam field, and success/error behavior so the agent wires the form correctly instead of inventing a backend or leaking a key.
Connect the existing contact form in this Bolt.new project to this MakeTheForm endpoint:
https://mtform.co/f/your-form-key
Requirements:
- Submit with fetch as JSON (Content-Type: application/json). Do NOT add an Express route, a database, or any server code. This endpoint is the backend.
- Keep the current design and markup. Only add the submit handler.
- Disable the submit button while the request is in flight.
- Treat any HTTP 2xx as success: show an inline success message and reset the form.
- On error, show the JSON response’s error.message and keep what the user typed. Do not reset on error.
- Add a hidden honeypot input named exactly "_mtf_honeypot", visually hidden with position:absolute;left:-9999px, tabIndex={-1}, autoComplete="off", aria-hidden="true". Never display:none, never required.
- The endpoint URL is public and safe in client code. Do NOT invent or request an API key.Common pitfalls
The Bolt CMS mix-up
Search results for “Bolt form” are polluted by Bolt CMS (a PHP CMS) and its BoltForms extension. This page is about Bolt.new, the AI builder. The integration is a client-side fetch, no PHP involved.
Letting Bolt add a server route
Bolt loves to scaffold an Express endpoint plus Nodemailer. That’s a mail server to configure and a deliverability problem to own. The endpoint already handles receipt, spam, and delivery.
Troubleshooting
| Symptom | What is happening | Fix |
|---|---|---|
| nothing happens | Submit is still bound to Bolt’s placeholder handler. | Re-run the prompt and confirm the handler POSTs to your exact endpoint URL. |
| CORS error | The request isn’t a simple JSON POST, or an interceptor added a disallowed header. | Send Content-Type: application/json with a plain fetch; the endpoint answers CORS preflight for browser posts. |
Frequently asked questions
→Does Bolt.new handle form submissions?
Bolt.new builds the form UI but doesn’t provide a backend to receive submissions. Pointing the form at a hosted endpoint gives you email delivery, spam filtering, and storage without adding server code to the Bolt project.
→Is this the same as Bolt CMS / BoltForms?
No. Bolt CMS is a separate PHP CMS with a BoltForms extension. This page covers Bolt.new, the AI web app builder. Its forms are wired with a client-side fetch to an endpoint.
→Do I need a database for a Bolt.new form?
Not for a contact or lead form. The endpoint stores every submission in an inbox you can search and export, so you don’t need to add and secure your own database.
Keep going
- Form backend for AI-built websites
- Lovable contact form
- v0 form handling
- Contact form without a backend
Last reviewed July 23, 2026
Ship this form for real
Create an endpoint, paste it in, and watch the first submission land in your inbox, in under three minutes.
Create free endpoint