Ask Cursor to make your contact form actually work.
Give Cursor your Form Plume endpoint. It can wire the existing form while Form Plume handles submissions, email notifications, storage, spam, and delivery.
// Ask Cursor to discover the framework first.
const response = await fetch(FORM_ENDPOINT, {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
if (!response.ok) throw new Error("Submission failed");The full guide
Prompt, diff, test, then deploy.
A repository-aware Cursor workflow with framework discovery, a strict security boundary, and real failure-state verification.
Cursor edits the repository you open. It does not decide whether that repository uses React, Astro, plain HTML, or a server framework, and it does not host the finished form. The reliable workflow is to make Agent discover the stack, change the smallest relevant file, run the repository's own checks, and show you the diff.
- 1Create your Form Plume accountStart free and give your Cursor form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
- 2Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like
https://api.formplume.com/f/your-slug - 3Connect it inside CursorReview the Agent diff, run the discovered project checks, and submit once with a valid endpoint and once with an invalid endpoint. Send one test submission from the real Cursor app or preview environment and confirm it reaches Form Plume.
Paste this prompt into Agent
Connect the existing contact form in this repository to Form Plume.
Public endpoint: https://api.formplume.com/f/your-public-slug
Before editing, inspect package.json and the form route/component to identify the
framework and existing conventions. Then:
1. Reuse the current form and styles. Do not replace the page.
2. Prefer a native action + method="POST" when the current UX allows navigation.
Otherwise use the framework's existing client pattern and send FormData.
3. Preserve every input and ensure each submitted control has a name attribute.
4. If using fetch, add inline pending, success, and failure behavior and keep values
after failure. If using native POST, verify the hosted success and error navigation.
5. The endpoint is public. Do not add it to a secret store and do not expose access
keys, webhook secrets, SMTP credentials, or server-only environment variables.
6. Do not add a database, API route, or dependency only for this form.
7. Run the repository's existing formatter, typecheck, tests, and production build.
8. Summarize the changed files, commands run, and any check you could not run.This prompt deliberately asks Cursor to inspect first. A request for a generic React component can be wrong in an Astro template or a Next.js server component.
Inspect the plan and diff
Agent can search files, edit code, and run terminal commands. Keep its first pass narrow: the form component, an existing test if one exists, and configuration only when the project already centralizes public URLs there. In Cursor's review UI, reject unrelated formatting or package changes before accepting the result.
For a typical Vite React project, the useful commands are:
pnpm lint
pnpm typecheck
pnpm test
pnpm build
git diff --check
git diff -- src/components/ContactForm.tsxDo not paste these blindly into every repository. Ask Agent to read package.json, then use the package manager and script names already present. For plain HTML, validate the document and inspect the actual built file instead.
What the request should look like
const response = await fetch("https://api.formplume.com/f/your-public-slug", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
if (!response.ok) throw new Error("Submission failed");Do not set Content-Type yourself when sending FormData; the browser supplies the multipart boundary. A public form slug is expected to be visible in source and network requests. Access keys and webhook signing secrets are private and must stay out of browser code.
Verify behavior, not just compilation
- Confirm the diff touches only expected files and preserves labels and
nameattributes. - Run the exact scripts declared by the repository.
- Submit valid data and verify the stored submission and notification.
- Change the slug temporarily. For fetch, verify the inline error keeps the typed message. For native POST, verify navigation reaches the hosted error response.
- Restore the endpoint, build production output, and test from the deployed origin.
If Cursor discovers React, continue with the React contact form guide. For Vite use the Vite guide; for plain markup use the HTML guide. Compare the same agent workflow in the Claude Code guide, Windsurf guide, or Codex guide.
Primary sources
FAQ
Cursor questions
before you accept the diff.
One line. Zero backend.
