Make your Windsurf contact form send real submissions.
Let Cascade connect the form to one public endpoint. Form Plume handles email notifications, submission storage, spam protection, webhooks, and integrations.
// Cascade should preserve the detected framework.
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");The full guide
A Cascade workflow that survives deployment.
Discover the stack, constrain the edit, inspect the diff, and verify the same form on its final production origin.
Windsurf Cascade can work across an existing repository, run terminal commands, preview web apps, and create App Deploys. It still needs to discover whether your project is React, Vue, Svelte, Next.js, or something else before it edits the form.
- 1Create your Form Plume accountStart free and give your Windsurf 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 WindsurfReview Cascade's diff, test the local preview, and repeat the submission from the real production deployment. Send one test submission from the real Windsurf app or preview environment and confirm it reaches Form Plume.
Prompt Cascade with boundaries
Inspect this repository and find its contact form and framework conventions.
Connect the existing form to the public endpoint below:
https://api.formplume.com/f/your-public-slug
Keep the current design and validation. Prefer native form submission if hosted result
navigation is acceptable; otherwise send FormData and implement accessible inline pending,
success, and error states that preserve input after failure. Every submitted control needs a
name. Do not add a database, server function, SMTP package, or dependency solely for
this form. The endpoint is public configuration; never put access keys, webhook
secrets, or provider credentials in browser code. Run the repository's existing
formatter, typecheck, tests, and build. Show the diff and verification results.Cascade's previews make visual checks quick, but a successful-looking preview is not enough. Confirm the network request receives a 2xx response and that the record appears in Form Plume.
Check Cascade's work
Ask Cascade to explain which framework it found and why it chose native submission or fetch. Then inspect the diff for surprise server functions, environment variables exposed through a client prefix, or unrelated generated files.
For a Vite project, verification might be:
pnpm lint
pnpm test
pnpm build
git diff --checkThe repository remains the source of truth. Use its actual scripts and package manager. Test an invalid endpoint as well as the happy path so the generated error UI is not dead code.
Public endpoint and private secrets
The public form slug is safe in the rendered app. It is an address, not an authorization credential. Keep protected-form keys, signed-webhook secrets, and deployment credentials server-side. Moving a value into a client-prefixed environment variable only makes it configurable; it does not make it secret.
Preview-to-production checklist
- Inspect the diff and run the project's checks.
- Submit in the local preview and verify delivery in Form Plume.
- Force a rejection. For fetch, confirm accessible inline feedback and retained values. For native POST, confirm navigation reaches the hosted error response.
- Deploy through the project's normal production path.
- Retest from the final hostname and verify allowed-domain settings.
If Cascade identifies Vue, Svelte, or Next.js, use the corresponding Vue, Svelte, or Next.js guide. Compare Cursor, Claude Code, and Codex for other repository-agent workflows.
Primary sources
FAQ
Windsurf questions
before you deploy.
One line. Zero backend.
