At a glance
- Output
- Usually React / Vite
- Backend added
- None
- Server
- Not needed
- What changes
- The submit handler
- Where it goes
- Bolt’s chat
The 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.
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.Step by step
- 1
Create the endpoint
Create a form in MakeTheForm to get your public endpoint URL and an inbox.
- 2
Prompt Bolt.new
Paste the prompt above into Bolt with your endpoint. Bolt rewires the submit handler without adding a server.
- 3
Verify and deploy
Verify your recipient email once, deploy the Bolt app, and submit the form to confirm it lands in your inbox.
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’s 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.
Other platforms
Keep going
Last reviewed by the MakeTheForm team.