Skip to content

AI app builder · Bolt.new

Make your Bolt.new contact form actually send email

Bolt.new spins up a working app in your browser fast, contact form included — but that form usually has nowhere to send its data. The "correct" fix means asking Bolt for a Supabase Edge Function, an email provider key, and a secret to store, all for a feature request that was really just "email me when someone submits this."

Point the form at a PostTo endpoint instead and it delivers to your inbox immediately — no Edge Function, no Supabase secrets, no provider to configure. Paste one prompt into Bolt's chat and the existing form is rewired, fields and design untouched.

Free plan, no credit card required.

Three steps, a few minutes

1

Create an endpoint

Sign up free and create a PostTo endpoint with your destination email. You get an endpoint URL immediately — no OAuth connection or API key exchange with Bolt required.

2

Paste the prompt into Bolt

Give Bolt the prompt below with your endpoint URL swapped in. It edits the existing form's submit handler in the WebContainer in place — layout, fields, and styling stay exactly as they are.

3

Test it in the preview

Submit the form from Bolt's live in-browser preview. The email lands in your inbox, and the submission shows up in the PostTo dashboard immediately.

The prompt and the code

Replace YOUR_TOKEN with the endpoint URL from your dashboard.

Prompt to paste into Bolt's chat
Update the contact form's submit handler to send its data to PostTo instead of
just showing a fake success state. On submit, POST the form fields as JSON to
https://postto.dev/api/v1/send/YOUR_TOKEN with a
"Content-Type: application/json" and "Accept: application/json" header. Show
the existing success state if the response is ok, and the existing error
state otherwise. Add a hidden "_hp" honeypot input that real visitors never
see. Keep all other current fields, validation, and styling unchanged.
src/components/ContactForm.tsx — what Bolt typically writes
export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sent' | 'error'>('idle');

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const payload = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://postto.dev/api/v1/send/YOUR_TOKEN', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    setStatus(res.ok ? 'sent' : 'error');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" required />

      {/* Honeypot: bots fill this in, humans never see it */}
      <input type="text" name="_hp" tabIndex={-1} autoComplete="off" style={{ display: 'none' }} />

      <button type="submit">Send</button>
    </form>
  );
}

Good to know

No Supabase Edge Function needed

Bolt often reaches for a Supabase Edge Function plus a transactional email provider key for "send an email" features. PostTo replaces all of that — the fetch call above is the entire integration, and it works whether or not your project uses Supabase for anything else.

Token only — never signed mode here

This request runs client-side in the shipped bundle, so use the plain endpoint URL with its token. Never enable signed mode for a browser-side integration — the HMAC secret would ship inside your app's JavaScript, visible to anyone.

Spam protection is already wired in

The hidden _hp field is a honeypot — humans never see it, bots fill it in, and PostTo silently discards those submissions. Server-side baseline filtering (heuristics and optional AI classification) runs on every submission after that, so you don't need a CAPTCHA to start.

Frequently asked questions

Can I just tell Bolt to add this instead of editing code myself?
Yes — paste the prompt above into Bolt's chat with your endpoint URL swapped in. Bolt treats it like any other feature request and rewires the existing submit handler in the WebContainer.
Does this conflict with Bolt's Supabase integration?
No. If your project already uses Supabase for auth or data, that's unaffected — PostTo only replaces the "send this form as an email" piece, which otherwise would need its own Edge Function.
Will this survive exporting the project to GitHub or StackBlitz?
Yes — it's a plain fetch call inside your component code, so it persists through GitHub export, StackBlitz, and further edits the same as any other code Bolt writes.
What does it cost?
The free plan includes 50 submissions per month with the full dashboard — no credit card required. Paid plans start at $9/month.

Add a working form to your Bolt.new app today

Create an endpoint, paste the prompt, and see your first submission in the dashboard — all on the free plan.

Try PostTo free