How to let Claude Code set up a contact form with MCP

To let Claude Code set up a contact form, add FormThunder's MCP server with one command, then ask for the form in plain English. Claude Code creates the form, writes the code into your project, sends a real test and checks the live page. You'll need to do one thing yourself: click the verification link in your inbox.

What you need

• Claude Code in a project with a website in it. Any framework works.
• A FormThunder account. The free plan includes MCP, with 250 submissions a month.
• An email address you can open, for the form's recipient.

Step 1: connect the server

claude mcp add formthunder -- npx -y formthunder mcp

The server needs a key. Log in from a terminal, which opens your browser to approve the device.

npx formthunder login

Check that it worked by asking Claude Code who it's connected as. It should call whoami and tell you the account and plan.

Step 2: ask for the form

Add a contact form to the contact page that emails hello@example.com.
Keep our existing styling. Test it when you're done.

What happens next

Here's the sequence the server tells agents to follow, and why each step is there.

1. `list_linked_emails` checks that the recipient is verified. FormThunder only sends to verified addresses, which is what makes a public access key safe. If yours isn't verified, the agent calls add_linked_email and asks you to click the link.
2. `list_forms` looks for a form to reuse, so you don't collect duplicates.
3. `create_form` creates the form, if one is needed.
4. `get_snippet` returns working code for your framework, with the key filled in. The agent reads your package.json to pick html, react, nextjs, vue, svelte or astro.
5. The agent edits your files. It keeps your classes and any field names you already use.
6. `test_form` runs a real submission, stored and emailed, and returns each delivery's status.
7. `check_form_on_site` runs after you deploy. It fetches the live page and reports what's wrong, with a fix for each failed check.

Step 7 needs a public URL, so it won't work on localhost. The agent should ask you for the URL once the change is live.

Step 3: match the emails to your site

Read https://example.com and make our FormThunder emails match the site's branding.

The agent calls extract_brand_from_website, then checks the result against your actual CSS or Tailwind config. A served page only shows part of the picture, and your code is the better source. It saves the kit with set_brand.

On the free plan, it picks a built-in theme such as card, and the theme takes on your colours and logo. On Pro, it can write a custom HTML template, preview it, fix the warnings, send a test email to you and attach it to the form.

When something goes wrong

Errors are written so the agent can act on them. Each one has a hint saying what to do next.

{
  "error": {
    "code": "feature_requires_pro",
    "message": "Webhooks need the Pro plan.",
    "hint": "Upgrade at https://formthunder.com/app/billing or run `formthunder billing upgrade`.",
    "docs": "https://formthunder.com/docs/webhooks"
  }
}

So if you ask for a Slack integration on the free plan, the agent should tell you it needs Pro. It won't go in circles.

If a test delivery fails, test_form reports the last error. The agent can fix the cause and call resend_deliveries.

What the agent won't do without you

Tools that delete data or cost money tell the agent to confirm first, and Claude Code asks before running tools unless you've allowed them. Upgrading a client, for example, adds $5 a month to a bill, so the tool's description says to check with you.

You can review what happened afterwards with get_audit_log, which records what changed and which key changed it.

Other agents

This isn't specific to Claude Code. Any MCP client can connect, and an agent with a terminal but no MCP support can use the CLI with --json.