Prompts

Claude Code prompt to add a contact form

Claude Code works in your terminal and edits real files. This prompt keeps the change small: one form that posts to Formgong, with no API route and no secrets.

Short answer: Start Claude Code in your project, paste the prompt, put in your access key, and review the changes. For later sessions, add the Formgong rules to CLAUDE.md.

Copy the Claude Code prompt

Run claude in your project folder and paste the prompt. If it is not obvious which page needs the form, say so, for example "on the contact page in src/pages/contact". Claude Code asks before it edits files or runs commands, so check each step.

Prompt for Claude Code
Add a contact form to the existing site in this repository, using its current framework, components and styles. Submissions go to Formgong, a hosted form backend. Claude Code: do not add an API route, serverless function, environment variable, or email package for this form, and change only the files the form needs.

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 Claude Code tends to get wrong

Claude Code is thorough. Asked for a working contact form, it may add an API route, install an email package and ask you for SMTP or Resend keys. That is a lot of code for one form. The prompt says the form posts to Formgong from the browser and that only the files the form needs should change.

It also likes to add tests. That is fine, but make sure no test sends real submissions. Send one test message by hand instead.

For agents: connect the MCP server

Add the Formgong MCP server with one command. Claude Code then has list_forms, create_form and get_form_snippet and can insert your real key itself. Keep the token out of files you commit.

Claude Code MCP settings
claude mcp add --transport http formgong https://formgong.com/mcp \
  --header "Authorization: Bearer fgp_your_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:

Claude Code · 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. Check the git diff: the form, maybe a style change, nothing in an API folder.
  2. Make sure no new environment variable or email package was added.
  3. Send a test message and find it in the Formgong inbox.
  4. Optional: put the Formgong rules in CLAUDE.md or AGENTS.md for later sessions.

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

Questions

Does Claude Code read AGENTS.md?

Claude Code reads CLAUDE.md, and its docs describe when it reads AGENTS.md too. The simplest setup for several tools: keep the Formgong rules in AGENTS.md and put the line @AGENTS.md in CLAUDE.md.

Can Claude Code create the Formgong form for me?

Yes, with the MCP server connected and a token that may create forms. It calls create_form and then get_form_snippet. Messages go to your account email until you add Telegram or other recipients in the dashboard.

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: Claude Code: MCP, Claude Code: CLAUDE.md, Formgong /agents.md.

← Formgong