Dev.to WebDev 🛠 Dev 👁 0 📖 3 min read

Add a contact form to your site from Claude Code or Cursor

An AI coding assistant can write the HTML for a contact form in seconds. What it can't do on its own is give that form somewhere to send its data. You still have to sign in to a form backend, create the form, copy the en

An AI coding assistant can write the HTML for a contact form in seconds. What it can't do on its own is give that form somewhere to send its data. You still have to sign in to a form backend, create the form, copy the endpoint and paste it back.

Formkove has a hosted MCP server that removes that step. Connect your assistant once, then ask:

Add a contact form to my Next.js site with name, email and a budget select. Use Formkove.

The assistant creates the form in your account, allows your site's address, gets code for your framework and puts it in your page. It works on every plan, including the free one (300 submissions a month).

1. Create an API key

Sign up free if you don't have an account. Then, in the dashboard:

  1. Open Settings → API keys.
  2. Name the key and choose the Build and set up forms template.
  3. Pick an expiry (30, 90 or 365 days) and click Create key.
  4. Copy the key. It is shown once.

2. Connect your assistant

The server is at https://app.formkove.com/mcp. There is nothing to install.

Claude Code

export FORMKOVE_API_KEY="fk1_your_key_here"
claude mcp add --transport http formkove https://app.formkove.com/mcp --header "Authorization: Bearer ${FORMKOVE_API_KEY}"

Run /mcp inside Claude Code to check that formkove is connected.

Cursor

Add this to ~/.cursor/mcp.json (or .cursor/mcp.json in a project) and set FORMKOVE_API_KEY in the environment Cursor starts from:

{
  "mcpServers": {
    "formkove": {
      "url": "https://app.formkove.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FORMKOVE_API_KEY}"
      }
    }
  }
}

VS Code

Add this to .vscode/mcp.json. VS Code asks for the key when the server starts and keeps it out of the file:

{
  "inputs": [
    { "id": "formkove-key", "type": "promptString", "description": "Formkove API key", "password": true }
  ],
  "servers": {
    "formkove": {
      "type": "http",
      "url": "https://app.formkove.com/mcp",
      "headers": {
        "Authorization": "Bearer ${input:formkove-key}"
      }
    }
  }
}

Don't paste the key itself into a config file that is committed to a repository.

3. Ask for the form

Say what you want in plain words. Name the framework, the fields and the site's address if the assistant can't see it:

Add a contact form to this Astro site with name, email and message. Use Formkove. The site is https://example.com.

With the Build and set up forms key, the assistant can:

  • create the form and name it,
  • add your site to the form's Allowed Origins, so fetch() submissions work,
  • get code for HTML, fetch, React, Next.js, Vue, Svelte, Astro or HTMX, with the honeypot field included,
  • turn the AI spam filter on or off and set Turnstile keys,
  • dry-run a submission to check it would be accepted, without storing or sending anything.

Submissions go to your account email and your dashboard. Other prompts that work with the same key:

Which of my forms got the most submissions this month, and how close am I to my limit?
Check that a submission from https://example.com with name, email and message would be accepted.

What the key can and can't do

A key only gives the assistant what you picked when you created it.

  • Reading and changing are separate. A key that can change forms can't read submissions, and a key that can read submissions can't change anything. To have an assistant summarise what came in, create a second key from the Read submissions template.
  • Nothing sends email. No tool lets the assistant send a message, and it can only add your own account address as a recipient.
  • Integrations and deleting are off by default. Connecting Slack, Discord, Google Sheets, Zapier or a webhook through the assistant needs a switch on the key, and a Pro or Agency plan as in the dashboard.
  • Keys expire. You can also limit a key to one form, and revoke it at any time from Settings → API keys.

The full list of tools and limits is in Connect an AI assistant.

If something doesn't work

  • The assistant says it has no Formkove tools: check that the server is connected (/mcp in Claude Code) and that the key hasn't expired.
  • A CORS error when the form submits: the site's address isn't under Allowed Origins. Ask the assistant to add it, or add it on the form's settings page.
  • No email arrives: check your spam folder for the first one. Submissions always appear in your dashboard.

More fixes are in troubleshooting. Prefer to do it by hand? See How to add a contact form to a static site.

Originally published on formkove.com.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.