HTML form to JSON

Convert HTML form to JSON — schema + sample payload.

Updated September 2026 · plan facts checked against /pricing

Paste your <form> markup and get a JSON schema plus a realistic sample payload instantly — the data contract you need before a backend exists. Everything parses in your browser, no signup.

Get a free access key See the API docs

100% client-side
No signup
3 JSON outputs

An HTML form being converted into a JSON schema and sample payload

input

Paste HTML form markup

detected fields

6 fields parsed

access_keyAccess Key

hiddenhidden

nameName

textrequired

emailEmail

emailrequired

budgetBudget

select

messageMessage

textarearequired

botcheckBotcheck

checkbox

JSON schema

{
  "type": "object",
  "required": [
    "name",
    "email",
    "message"
  ],
  "properties": {
    "access_key": {
      "type": "string",
      "title": "Access Key",
      "writeOnly": true
    },
    "name": {
      "type": "string",
      "title": "Name"
    },
    "email": {
      "type": "string",
      "title": "Email",
      "format": "email"
    },
    "budget": {
      "type": "string",
      "title": "Budget",
      "enum": [
        "under-5k",
        "5k-20k",
        "20k-plus"
      ]
    },
    "message": {
      "type": "string",
      "title": "Message"
    },
    "botcheck": {
      "type": "boolean",
      "title": "Botcheck"
    }
  }
}

Sample payload

{
  "access_key": "YOUR_ACCESS_KEY",
  "name": "Name",
  "email": "[email protected]",
  "budget": "under-5k",
  "message": "Hi, I would like to talk about a project.",
  "botcheck": false
}

splitforms-ready HTML

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <label>
    Name
    <input name="name" required />
  </label>

  <label>
    Email
    <input name="email" type="email" required />
  </label>

  <label>
    Budget
    <select name="budget">
      <option value="under-5k">under-5k</option>
      <option value="5k-20k">5k-20k</option>
      <option value="20k-plus">20k-plus</option>
    </select>
  </label>

  <label>
    Message
    <textarea name="message" required></textarea>
  </label>

  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Send</button>
</form>

JSON schema

type, properties, required, enum, and writeOnly keywords, so validators and code generators read the schema directly.

Sample payload

A realistic submission object for webhook tests, API examples, and integration specs.

splitforms-ready HTML

Clean markup that POSTs to a real backend — paste your access key and the form is live.

HTML form to JSON schema

Paste markup, get JSON instantly.

The converter reads every field — inputs, textareas, selects, radio and checkbox groups, hidden fields, labels, and options — and returns a JSON Schema-style object like this, plus a matching sample payload and splitforms-ready HTML.

Get a free access key

schema.json

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "title": "Contact form",
  "properties": {
    "name":       { "type": "string" },
    "email":      { "type": "string", "format": "email" },
    "message":    { "type": "string" },
    "topic":      { "type": "string", "enum": ["Sales", "Support"] },
    "access_key": { "type": "string", "writeOnly": true }
  },
  "required": ["name", "email", "message"]
}

Setup

How to convert an HTML form to JSON.

Four steps from raw markup to a working, deploy-ready form — all in the browser, no signup.

Paste your form markup

Copy a complete <form> element or a full HTML page that contains a form. The converter reads the first form it finds.

Review detected fields

Confirm field names, labels, types, required status, hidden fields, and option values before copying the JSON output.

Copy JSON schema or sample payload

Use the JSON schema for documentation and validation. Use the sample payload for webhook tests, API examples, and integration specs.

Ship the splitforms-ready HTML

Copy the regenerated HTML, paste your access key, and deploy a working form with email delivery, spam filtering, dashboard storage, and webhooks.

Get a free access key See the API docs

Why JSON

Why convert an HTML form to JSON?

Developers need to document a form before the backend is finished. A JSON schema gives the API team a contract, gives QA a payload to test, and gives automation tools a predictable shape. Copy the regenerated HTML, paste your access key, and the same fields become webhook payloads and dashboard rows. To POST that JSON from the page with fetch, see how to send form data to an API.

Hidden fields like access_key and botcheck stay in the schema, marked write-only.
The same fields become email notifications and dashboard rows on every plan.
Webhook payloads and CSV exports unlock on paid plans (Pro at $5/mo and Annual).

The same form fields routed to email, webhooks, CSV exports, and dashboard rows

What you get

What does an HTML form to JSON converter output?

Three usable outputs from one paste — a schema to document and validate against, a payload to test with, and clean HTML that submits to a real backend.

JSON schema with type, properties, required, and enum.
A realistic sample submission payload for webhook and API tests.
splitforms-ready HTML — paste your access key and the form is live.

The three outputs of the HTML to JSON converter: schema, payload, and ready HTML

API + MCP

Get form JSON back out through the API and MCP.

Need the JSON without a live form? The REST API returns stored submissions in this same shape, and the MCP server lets AI agents create forms and read submissions using the field names shown in the schema.

GET /api/submissions returns { submissions, has_more } as JSON.
Filter by form, limit, before, or since (60 requests/min).
MCP tools create_form, generate_form, and list_submissions.

An AI agent reading form submissions as JSON through the splitforms MCP server

How SplitForms works

What happens after someone submits your form?

splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.

A SplitForms contact form submission launching straight to your inbox

Add your endpoint

Point your form to your unique SplitForms endpoint. That's it.

HTML form pointing at a SplitForms submit endpoint

Receive submissions

We instantly capture and organize every submission in your inbox.

Submissions inbox with searchable leads and status pills

Route anywhere

Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.

Generic integration tiles for email, sheets, chat, CRM, automate, and webhook

Start Free Read the Docs

No credit card required. Set up in under 60 seconds.

Connect & automate

Where can submissions go besides email?

On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.

NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See plans →

View all integrations →

Setup guides for the stacks you use

HTMLReactNext.jsAstroWebflowWordPress

FAQ

HTML form to JSON questions.

View all FAQs

What does this HTML form to JSON converter generate?

It parses the first form in your pasted HTML and generates three outputs: a JSON schema for the named fields, a sample submission payload, and clean splitforms-ready HTML that posts to a real backend. It detects inputs, textareas, selects, radio groups, checkbox groups, hidden fields, required fields, labels, placeholders, and option values.

Is my HTML uploaded or stored when I convert it to JSON?

No. The converter runs entirely in your browser using DOMParser. The HTML you paste is never sent to splitforms or any third party. You can load the page, disconnect from the internet, and keep converting forms locally.

Can this convert a React or JSX form to JSON?

Paste rendered HTML, not JSX. React, Next.js, Vue, Svelte, and Astro all render normal HTML in the browser. Open DevTools, copy the outerHTML for the form element, then paste that markup into the converter.

Does the output follow the JSON Schema standard?

Yes. The schema is a JSON Schema-style object with type, properties, required, enum, and writeOnly keywords, so validators and code generators can read it directly. Text inputs map to string, number and range inputs to number, checkboxes to boolean, and multi-selects and choice groups to array, with any detected option values listed under enum.

How do I make the converted form actually submit?

Copy the splitforms-ready HTML output, replace YOUR_ACCESS_KEY with your free splitforms key, and paste the form into your site. The form posts to splitforms, which handles dashboard storage and spam filtering on Free; Free includes owner email delivery; paid plans add webhooks.

Does it include hidden access keys or honeypot fields?

Yes. Hidden fields are detected and marked as write-only in the schema. If the form does not include a splitforms access_key or botcheck honeypot, the generated HTML adds both so the copied form can submit and resist basic spam.

Can I get form submissions back out as JSON through an API?

Yes. GET https://splitforms.com/api/submissions with an Authorization: Bearer token returns { submissions, has_more } as JSON, filterable by form, limit, before, or since (60 requests/min). Your token lives at Dashboard → MCP, and the JSON shape it returns matches what this converter generates.

Can an AI agent or chatbot use this JSON schema directly?

Yes. splitforms ships a free MCP server (all plans) with tools like create_form, generate_form, and list_submissions, so an agent can create a form and read its submissions using the same field names this converter outputs. A chatbot that collects a lead in conversation can POST the gathered fields as JSON to https://splitforms.com/api/submit with the form's access_key, exactly like the splitforms-ready HTML this page generates.

Simple pricing

How much does splitforms cost?

Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.

Free

$0— 500 submissions

No card, no time limit

Best for testing

For side projects and indie devs.

500 free submissions
Unlimited forms
Email notifications included
Smart spam filtering
Submissions dashboard
Redirect after submit
MCP server included

Get Started

Recommended

Pro

$5/ month

Billed monthly

Every paid feature, for agencies and growing products.

5,000 submissions / mo
Unlimited forms
Webhooks and integrations
CC/BCC, auto-replies and routing
File uploads with 500 MB storage
Stripe payments on your forms
3 team seats
Cancel anytime

Annual

$49/ year

About $4.08/mo, billed yearly

Best value

Every Pro feature with triple the volume — $0.27 per 1,000 at full use.

15,000 submissions / mo
Unlimited forms
Everything in Pro
File uploads with 5 GB storage
3 team seats
Priority email support

No credit card required on Free • Cancel anytime • Full pricing and FAQ