Skip to main content
New:Build with AI agents

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.

Free foreverNo credit cardOne public endpoint, no secret required
Agent prompt
// 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.

  1. 1
    Create your Form Plume accountStart free and give your Cursor form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
  2. 2
    Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like https://api.formplume.com/f/your-slug
  3. 3
    Connect 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.tsx

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

Cursor may make a technically valid change in the wrong layer if the prompt skips framework discovery. Review whether it added a server route or package that the form does not need.

Verify behavior, not just compilation

  1. Confirm the diff touches only expected files and preserves labels and name attributes.
  2. Run the exact scripts declared by the repository.
  3. Submit valid data and verify the stored submission and notification.
  4. Change the slug temporarily. For fetch, verify the inline error keeps the typed message. For native POST, verify navigation reaches the hosted error response.
  5. 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.

Cursor can edit the form in an existing repository and run its checks. It does not host the finished site, so the correct implementation depends on the framework and deployment already in the project.

One line. Zero backend.

The form backend you don’t have to build.

Free foreverNo credit cardSet up in under a minute