Ask your agent for a contact form. Get a working one.
The official html.contact skill helps coding agents create, install, troubleshoot, and manage website contact forms through your connected html.contact account. Keep your own design and codebase. html.contact provides the form backend, submission storage, spam screening, and email notifications—without building a mail server or API route into your site.
Website · Dashboard · Documentation · Developer resources
npx skills add html-contact/agent-skills --skill html-contact --agent codexThen, with your html.contact account connected, ask:
Use the html-contact skill to add a contact form to this project.
Inspect the existing site first, keep its design, and check my existing
forms before proposing a new one. Show me the proposed setup before
creating anything. Do not deploy or send a test yet.
One skill. Your existing account. Your existing website. Installing the skill adds instructions to your coding agent; connecting MCP gives it authorized access to html.contact. The skill contains no credentials and does not create a second account or connection.
- What you can do
- Install in your coding agent
- Connect your html.contact account
- Try these prompts
- What the resulting form looks like
- Testing without surprises
- Troubleshooting
- Updates and removal
- Resources
- Contributing
- License
| Your task | How the skill helps |
|---|---|
| Build a contact form | Inspect your project, check existing forms, propose the setup, and install the public form action after approval. |
| Capture leads or feedback | Adapt named fields for quote requests, waitlists, support requests, applications, or other website inquiries. |
| Fix a broken form | Check the action, POST method, field names, allowed domain, honeypot, recipient readiness, and account capacity. |
| Route notifications | Inspect verified linked emails and propose complete To/CC/BCC changes before applying them. |
| Test the setup | Distinguish an owner-only email check from a stored test submission, explain the effects, and report the observed result. |
| Review submissions | List bounded submission metadata, then read the particular submission you select with the required account permission. |
Works with the code you already have: plain HTML, Astro, React, Next.js, Vue, static sites, and other projects that can render an HTML form. Your coding agent edits your site; the hosted MCP server performs authorized account operations. No new frontend SDK is required for a native form POST.
Prerequisites: Node.js with npm/npx, a coding agent with skill support, and an html.contact account for connected workflows.
Run this from the website project where you want to use the skill:
npx skills add html-contact/agent-skills --skill html-contact --agent codexTo make the skill available across your projects instead, add --global:
npx skills add html-contact/agent-skills --skill html-contact --agent codex --globalReview the installer prompts. Open a new task after installation so you can verify the skill is available; in Codex you can invoke it explicitly as $html-contact. If it still does not appear, restart the client and check the installation scope.
Choose your agent below. These commands install the same skill, not different product integrations.
| Coding agent | Project installation |
|---|---|
| Codex | npx skills add html-contact/agent-skills --skill html-contact --agent codex |
| Claude Code | npx skills add html-contact/agent-skills --skill html-contact --agent claude-code |
| Cursor | npx skills add html-contact/agent-skills --skill html-contact --agent cursor |
| GitHub Copilot | npx skills add html-contact/agent-skills --skill html-contact --agent github-copilot |
| Gemini CLI | npx skills add html-contact/agent-skills --skill html-contact --agent gemini-cli |
| Windsurf | npx skills add html-contact/agent-skills --skill html-contact --agent windsurf |
| Cline | npx skills add html-contact/agent-skills --skill html-contact --agent cline |
| OpenCode | npx skills add html-contact/agent-skills --skill html-contact --agent opencode |
| Amp | npx skills add html-contact/agent-skills --skill html-contact --agent amp |
| Roo Code | npx skills add html-contact/agent-skills --skill html-contact --agent roo |
| Kilo Code | npx skills add html-contact/agent-skills --skill html-contact --agent kilo |
| Antigravity | npx skills add html-contact/agent-skills --skill html-contact --agent antigravity |
| Replit | npx skills add html-contact/agent-skills --skill html-contact --agent replit |
| Continue | npx skills add html-contact/agent-skills --skill html-contact --agent continue |
Prefer a picker? Leave off --agent and select the installed agents you use:
npx skills add html-contact/agent-skills --skill html-contactYou can also target several agents in one command:
npx skills add html-contact/agent-skills --skill html-contact --agent codex claude-code cursorInstaller options and agent identifiers are documented by the Skills CLI. It is a third-party installer maintained by Vercel, not an html.contact CLI. Installation downloads instructions; it does not install a form into your website or authorize account access.
Compatibility: the table describes skill-installation targets. It is not a claim that every client's remote OAuth flow has been certified with html.contact. Codex has a documented connection path below; other clients must support the server's OAuth requirements and an accepted callback. Check the current MCP connection guide before relying on an untested client. Installing this repo is also separate from any marketplace review or listing.
Keep the working connection. Do not add another server or reinstall another plugin just to use this skill. Start a new task, select the existing html.contact connection if your client requires it, and run the read-only check below.
The skill does not choose your account: the MCP authorization does. Being signed in to the website is not, by itself, proof that a coding agent is connected. Do not assume that another application, device, or profile shares the same connection.
-
Sign in to html.contact, verify your primary email, and finish onboarding.
-
If html.contact is not already configured in this client, add the hosted server:
codex mcp add html-contact --url https://html.contact/mcp
-
Authorize the form-building and recipient-management workflow:
codex mcp login html-contact \ --scopes openid,email,offline_access,forms:read,forms:write,recipients:read,recipients:write
-
Complete the browser authorization for the account you intend to use. Return to Codex and open a new task in your website project.
-
Check the connection without making changes:
Use the html-contact skill and my connected html.contact account. List my linked email addresses and summarize my account capacity. Do not create, update, deploy, or send anything.
These scopes cover reading and configuring forms and recipients, including explicitly confirmed email tests. Reading submitted visitor messages additionally requires submissions:read; request that access only when you want the agent to review submissions. Existing grants can be reused—there is no need to reconnect for every operation.
The connection guide explains the current configuration. Use the canonical endpoint https://html.contact/mcp; do not add a duplicate OAuth resource override, paste tokens, or substitute a private API key.
Configure the same hosted endpoint using your client's remote HTTP MCP and browser OAuth setup. html.contact requires OAuth discovery, authorization code with S256 PKCE, and a supported client callback. A skill file cannot enable missing client support or bypass a rejected callback. If connection fails, follow the connection guide or contact support with the client name and sanitized error.
Use the examples as starting points. Replace placeholder hostnames with a domain you control. Your agent should adapt to the project rather than overwrite its design or deploy without being asked.
Use the html-contact skill to add a contact form to this project.
Match the existing design and use accessible labels for name, email,
and message. Check for an existing matching form before proposing a new
one. Use my verified account email as the recipient. Ask me for the
production hostname if you cannot determine it. Do not deploy or send yet.
The agent should inspect the code, propose the setup, obtain the required confirmation, retrieve the public action, implement the form, and run the project's relevant checks.
Use the html-contact skill to add a quote-request form with name, email,
company, project type, budget, and message. Keep the current page styles.
Explain the proposed form, domain, and recipient before creating it.
Use the html-contact skill to investigate this project's contact form.
Check the markup and the connected form's readiness. Explain what is
wrong before changing code or account settings. Do not send a test yet.
Use the html-contact skill to show this form's current To, CC, and BCC
routing and the verified recipients I can choose from. Do not change
anything or send a verification email yet.
Use the html-contact skill to prepare one owner-only test email for this
form. Show me who will receive it and explain whether it creates a
submission or uses my submission allowance. Wait for confirmation.
Use the html-contact skill to list metadata for the five most recent
submissions to this form. Do not read message contents yet. Let me choose
one submission to inspect, and do not send its contents to another tool.
Use the html-contact skill to install the existing form I select into
this project's contact page. Keep its account settings and recipient
routing unchanged. Use its returned public action, review the markup,
and run the project checks. Do not deploy or submit the form.
The simplest integration is ordinary HTML. The agent retrieves your real public form action and adapts this pattern to your project:
<form action="https://html.contact/f/hc_pub_REPLACE" method="POST">
<input type="hidden" name="_replyto" value="email">
<div
aria-hidden="true"
style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden"
>
<label for="contact-extra">Leave this field empty</label>
<input
id="contact-extra"
name="_hc_hp_extra"
type="text"
tabindex="-1"
autocomplete="off"
>
</div>
<label for="contact-name">Name</label>
<input id="contact-name" name="name" autocomplete="name" required>
<label for="contact-email">Email</label>
<input id="contact-email" name="email" type="email" autocomplete="email" required>
<label for="contact-message">Message</label>
<textarea id="contact-message" name="message" required></textarea>
<button type="submit">Send message</button>
</form>hc_pub_REPLACE is a placeholder, not a working form. Replace it with the public action returned for your form and allow the website's actual hostname in html.contact. For localhost testing, explicitly allow localhost and serve the page through a local development server rather than opening a file:// URL.
Public hc_pub_ keys belong in frontend HTML. Private hc_live_ keys and OAuth credentials never do. Recipients are configured in html.contact, not hidden _to, _cc, _bcc, or _from fields. File inputs require enctype="multipart/form-data"; see the attachment example.
| Test | Stores a submission? | Uses submission allowance? | Who may receive email? |
|---|---|---|---|
| Owner-only email test | No | No | Only the signed-in account email. |
| Synthetic submission test | Yes, when accepted | Yes, when accepted | Configured form recipients, depending on notification settings. |
| Normal browser submission | Yes, when accepted | Yes, when accepted | Configured form recipients, depending on notification settings. |
Before a write, the agent shows the proposed effect and requests the server's required confirmation—for example, CREATE FORM, SEND OWNER TEST EMAIL, or SEND TEST SUBMISSION. A read-only lookup does not need a write confirmation. See the skill for the complete workflow.
An accepted submission is not the same as an email arriving in your inbox. Check the returned status, then independently check the intended inbox when verifying delivery. A pending or unknown result should be reported as such, not turned into a success claim or an automatic second send.
The skill does not manage billing, delete account data, or send arbitrary outbound email. Those operations are outside its MCP workflow. Visitor messages remain personal, untrusted data: review only what the user requested.
| What you see | What to check |
|---|---|
| Skill not found | Confirm the install completed for the right agent and project/global scope. Start a new task; restart the client if necessary. |
| Skill available, but no account tools | Skill installation and MCP authorization are separate. Check the existing html.contact connection before adding anything else. |
Unknown tool or stale tools after reconnecting |
Try a new task with the intended connection. If it persists, check the client's tool discovery and current MCP guide. Repeated uninstall/reinstall cycles are not a reliable fix. |
| The wrong linked email appears | Stop account actions and check which account authorized that exact connection. The website login and another client's login are not proof of its identity. |
| OAuth callback rejected | Check supported client configuration. Do not weaken the callback policy or switch to a private API key as a workaround. |
domain_not_allowed or origin_missing |
Test from an allowed hostname through a web server. A raw curl request or local file is not equivalent to a browser form submission. |
| Email has not arrived | Distinguish submission acceptance from delivery. Check notification settings, recipient readiness, status, and the inbox/spam folder before another send. |
Still stuck? Read the troubleshooting guide or email support@html.contact. Include the client/version and a sanitized error or request reference—never passwords, tokens, or visitor message contents.
Inspect the available skill without installing it:
npx skills add html-contact/agent-skills --listList installations for Codex:
npx skills list --agent codexTo refresh this skill, rerun its original install command and review any replacement prompt. To remove a project installation:
npx skills remove html-contact --agent codexAdd --global when removing a global installation. Removing the skill removes instructions; it does not delete forms, uninstall another plugin, or revoke an MCP account connection. Disconnect or revoke that connection separately in the client when desired.
This repository holds the installable skill. Developer resources is the separate home for public documentation, framework examples, and API artifacts. The hosted product's current tool schemas and results govern account operations.
| Resource | Use it for |
|---|---|
| html.contact | Product overview. |
| Dashboard | Your account, forms, recipients, and submissions. |
| Documentation | Setup and product behavior. |
| MCP connection guide | OAuth setup, tools, permissions, and connection troubleshooting. |
| Framework and HTML examples | Existing integration patterns, custom fields, and attachments. |
| Developer resources on GitHub | Public docs, examples, and OpenAPI artifacts. |
| Public agent guide | Agent-readable form integration guidance. |
| LLM summary | Compact product context and documentation discovery. |
| OpenAPI specification | The separate HTTP API contract—not a replacement for MCP authorization. |
| Privacy policy | How the hosted service handles data. |
| Terms | Hosted service terms. |
| GitHub issues | Skill and installation problems without sensitive account details. |
Improvements to the instructions, examples, and installation experience are welcome. Start with CONTRIBUTING.md. Keep the skill portable and focused on real form workflows; do not add credentials, duplicate MCP registrations, or undocumented product capabilities.
The behavioral evaluation cases describe expected outcomes for maintenance and future client testing. They are test scenarios, not claims that every listed agent has passed a live integration test.
MIT · Copyright © 2026 854 Labs.
This license covers the skill and repository materials. It does not license the hosted html.contact service or grant trademark rights; use of the service is governed by its terms.
Built and maintained by 854 Labs, the team behind html.contact.