AI builder // Bolt.new

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.

The short answer

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.

React
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

  1. 01

    Create the endpoint

    Create a form in MakeTheForm to get your public endpoint URL and an inbox.

  2. 02

    Prompt Bolt.new

    Paste the prompt above into Bolt with your endpoint. Bolt rewires the submit handler without adding a server.

  3. 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.

AI builder prompt
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

Troubleshooting by error code
SymptomWhat is happeningFix
nothing happensSubmit is still bound to Bolt’s placeholder handler.Re-run the prompt and confirm the handler POSTs to your exact endpoint URL.
CORS errorThe 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.

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