Skip to content

AI app builder · Cursor

Make the contact form Cursor built actually send email

A site Cursor builds can't send email from the browser — the form needs a server or service to hand each message to. A PostTo endpoint is that service: give Cursor's agent one prompt and the form emails you, with no API route or provider key.

Ask Cursor's agent to "make the contact form send email" and it will usually do what a developer would: add an API route, install Nodemailer or an email provider SDK, and ask you for SMTP credentials or an API key to put in an environment variable. That's real backend code to deploy and maintain for a form that emails you a few times a week.

Point the form at a PostTo endpoint instead. One prompt rewires the existing submit handler to post straight to PostTo — no route, no secrets, nothing server-side — and the submission lands in your inbox and a searchable dashboard.

Start for free Jump to the prompt

Free plan, no credit card required · Updated

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.

2

Paste the prompt into Cursor

Open the agent chat, paste the prompt below with your endpoint URL swapped in, and review the diff it proposes. It edits the existing form in place — fields, validation, and styling stay as they are.

3

Run it and submit the form

Start your dev server and submit the form locally. The email lands in your inbox and the submission shows up in the PostTo dashboard right away.

The prompt and the code

Replace YOUR_TOKEN with the endpoint URL from your dashboard.

Prompt to paste into Cursor's agent chat 
Make the contact form send its data to PostTo instead of building an email
feature. Don't add an API route, Nodemailer, an email provider SDK, or any
environment variables for this. On submit, POST the form fields as JSON to
https://postto.dev/api/v1/send/YOUR_TOKEN from the client, with a
"Content-Type: application/json" and "Accept: application/json" header. Show
a success state if the response is ok and an error state otherwise. Add a
hidden "_hp" honeypot input that real visitors never see. Keep the existing
fields, validation, and styling unchanged.
components/ContactForm.tsx — what the result looks like 
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>
  );
}
.cursor/rules/contact-form.mdc — keep later edits on PostTo 
---
description: How contact forms send email in this project
alwaysApply: true
---
Contact forms post directly to PostTo from the client:
https://postto.dev/api/v1/send/YOUR_TOKEN (JSON, Accept: application/json).
Never add an API route, Nodemailer, SMTP settings, or an email provider SDK
for form submissions. Keep the hidden "_hp" honeypot input on every form.

Good to know

No API route or secrets

Cursor's default for "send an email" is server code plus a credential in an environment variable. The fetch call above is the entire integration — nothing to deploy server-side, and nothing secret in your repo.

A project rule keeps it that way

Agents tend to "fix" what they don't recognise. The optional Cursor rule file above tells every future agent session how forms work in this project, so a later refactor doesn't quietly swap PostTo for a Nodemailer route.

Token only — never signed mode here

This request runs in the browser, so use the plain endpoint URL with its token. If your project already has a server and you want signed requests, see the framework guides — the HMAC secret must never ship in client code.

Frequently asked questions

Does this work with whatever framework Cursor used?
Yes. The prompt only asks for a fetch call in the existing submit handler, which works the same in React, Next.js, Vue, Svelte, Astro, or plain HTML. For a static HTML page, a form with action set to the endpoint URL works with no JavaScript at all.
Why not let Cursor build the email feature itself?
You can, but then you own an email provider account, a sending domain with SPF and DKIM, credentials in your deployment, and spam handling. PostTo replaces all of that for contact forms; keep a provider of your own for transactional email like password resets.
How do I stop Cursor from adding a mailer later?
Add the project rule above (or the same text to your existing rules). Cursor includes rules in the agent's context, so later requests build on the PostTo integration instead of replacing it.
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 Cursor app today

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

Try PostTo free