Prompts

Windsurf prompt to add a contact form

Paste one prompt into Cascade and get a contact form that sends messages to your inbox, built with your project's own components.

Short answer: Open Cascade in your project, paste the prompt, add your access key, and accept the changes. Save the Formgong rules in .windsurfrules so later edits stay correct.

Copy the Windsurf prompt

Open the Cascade panel in your project and paste the prompt. If there are several pages, name the one that should get the form. Cascade shows each file change; accept the form and its styles. Windsurf's documentation now uses the name Devin Desktop; Cascade and these steps work the same way.

Prompt for Windsurf
Add a contact form to the existing site in this workspace, using its current framework, components and styles. Submissions go to Formgong, a hosted form backend. Windsurf Cascade: do not create an API route, serverless function, environment variable, or email-sending code for this form.

Formgong spec (follow exactly):
- Plain HTML: <form action="https://formgong.com/submit" method="POST">. With JavaScript, POST the same fields to https://formgong.com/submit using fetch.
- Hidden field access_key with value fk_your_access_key. The key is public and belongs in frontend code. Do not move it to a server or a secret.
- Hidden field _lang with the page language code, e.g. "en" (on multilingual sites use document.documentElement.lang). Formgong uses it for error messages, the thank-you page, and the autoreply.
- Fields: name, email, message (required); phone is optional. Keep these field names, and use <input type="email"> for email so browsers check the address.
- Honeypot: <input type="text" name="botcheck" tabindex="-1" autocomplete="off"> inside a wrapper with aria-hidden="true", visually hidden with CSS (position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)). Never fill it.
- Success, plain form POST: optionally add a hidden _redirect field with the absolute https URL of the site's thank-you page. Without it, Formgong shows its own thank-you page.
- Success, fetch: send Accept: application/json (and Content-Type: application/json for a JSON body; for FormData let the browser set it). If the response has success === true, show an inline thank-you message and reset the form; otherwise show the response's message.
- Turnstile: only if I give you a Cloudflare Turnstile site key, add <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> and <div class="cf-turnstile" data-sitekey="SITE_KEY"></div> inside the form. Otherwise leave it out.
- Optional: add <script src="https://formgong.com/fg.js" async></script> once per page. It fills _lang from <html lang>, sets the Turnstile language, and counts form views without cookies.
- Do not create a backend, API route, server function, database table, or email-sending code (Supabase, Resend, SendGrid, nodemailer), and do not add secrets. No file uploads.

What the prompt makes the tool do

The prompt gives the tool one short spec, so the result is predictable:

  • Endpoint: the form posts to https://formgong.com/submit, as a plain HTML form or with fetch.
  • Access key: a hidden access_key field with your public key.
  • Fields: name, email and message, with type="email" on the email field.
  • Honeypot: a hidden botcheck field that people never see. Bots fill it in, and Formgong marks those messages as spam.
  • Success state: with fetch, a thank-you message only when the answer has success: true. With a plain form, Formgong's thank-you page, or your own page through _redirect.
  • Turnstile: added only if you give the tool a site key.
  • No secrets, no backend: no API route, server function, database or email code.

What Windsurf tends to get wrong

Cascade looks at your whole workspace and often adds what it thinks a "complete" form needs: an API endpoint, an email library and environment variables. The prompt says the form is frontend-only and posts to Formgong, so you don't end up maintaining mail code.

Cascade also follows rules. A .windsurfrules snippet keeps the endpoint, honeypot and success handling the same in later sessions.

For agents: connect the MCP server

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Remote servers use the serverUrl field. The settings below read the token from the FORMGONG_TOKEN environment variable. Refresh the MCP list in Cascade after you save.

Windsurf MCP settings
{
  "mcpServers": {
    "formgong": {
      "serverUrl": "https://formgong.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FORMGONG_TOKEN}"
      }
    }
  }
}

Prompt for an agent with MCP

With the MCP server connected, this prompt lets the agent find your form and key on its own:

Windsurf · MCP
Use the Formgong MCP server to add a working contact form to this site.
1. Call list_forms. If there is no form for this site, call create_form with the site name.
2. Call get_form_snippet with that form_id and framework "react" (use "html" for a static page, "next" for the Next.js App Router).
3. Add the returned code as the contact form, styled like the rest of the site. Keep access_key, _lang and the botcheck honeypot exactly as returned.
4. Do not add a backend, API route, database or email code, and never write the fgp_ token into project files.

Check the result

  1. Review the changes: one form, no new API endpoint or mail library.
  2. Run the site and send a test message.
  3. Find the message in the Formgong inbox.
  4. Optional: add the Formgong rules to .windsurfrules.

The form checker reads the published page and lists concrete problems, such as a missing name attribute or a placeholder key.

Questions

Should I use .windsurfrules or the rules folder?

Both work. .windsurfrules is one file in the project root and always applies. The rules folder (.windsurf/rules, or .devin/rules in newer versions) holds one file per rule, each with its own trigger. For one Formgong rule, either is fine.

Does the prompt work in other editors?

Yes. It only describes the form and the endpoint, so it works in any coding agent. The Cursor and Claude Code pages have the same prompt with notes for those tools.

Is the access key in the prompt a secret?

No. The access key (fk_…) is public by design. It can only send submissions to one form, which anyone can already do on your site. Secrets, such as a Turnstile secret key or a Formgong API token (fgp_…), must never go into a prompt or frontend code.

How do I put my real key into the prompt?

Copy it from your Formgong dashboard and replace fk_your_access_key. If you are signed in, use the button under the prompt. It reads your forms from your own dashboard in the browser and swaps the key in. Nothing is sent to the AI tool until you paste the prompt.

Sources

Checked on 04.10.2026 against these public pages: Windsurf (Devin Desktop): MCP, Windsurf (Devin Desktop): rules, Formgong /agents.md.

← Formgong