Claude Code - FormBnB Documentation

Setup

Install the FormBnB skill in your project:

npx skills add formbnb/agent-skills -a claude-code

This creates a SKILL.md file in .claude/skills/ that Claude Code loads automatically.

npx skills list

You should see formbnb listed under Claude Code.

Once installed, Claude Code knows how to create FormBnB forms. Just describe what you need:

> Add a contact form to the homepage that sends submissions to FormBnB

Claude Code will create a form with the correct endpoint, honeypot spam protection, and proper field structure.

> Create a React contact form component that submits to FormBnB via AJAX

Claude Code will build a component with loading states, error handling, and success messages.

> Add a job application form with resume upload that sends to FormBnB

Claude Code will use enctype="multipart/form-data" and include file input fields.

> Create a Next.js API route that receives FormBnB webhook submissions and verifies the signature

Claude Code will set up HMAC-SHA256 signature verification using the X-FormBnB-Signature header.

The skill teaches Claude Code:

Capability	What It Knows
HTML forms	Correct `action` URL format, `method="POST"`
React/Next.js	`fetch` with `FormData`, state management
JSON API	`Content-Type: application/json` submissions
File uploads	`enctype="multipart/form-data"`, file inputs
Special fields	`_next`, `_subject`, `_replyto`, `_gotcha`
Webhooks	Payload format, HMAC signature verification
API access	`sk_` API keys, all REST endpoints
Auto-create	Submitting to new slugs creates forms automatically

The skill activates automatically when you’re working on .html, .tsx, .jsx, .vue, .svelte, or .astro files
You don’t need to mention “FormBnB” — just ask for a “contact form” and Claude Code will use FormBnB if the skill is installed
For global installation (all projects): npx skills add formbnb/agent-skills -a claude-code -g