HTML Form to JSON Converter — schema, payload, and working HTML.
Paste any HTML <form> and instantly get a JSON schema, a sample submission payload, a detected-field map, and regenerated splitforms-ready HTML. Everything runs locally in your browser.
input
Paste HTML form markup
detected fields
6 fields parsed
JSON schema
{
"type": "object",
"required": [
"name",
"email"
],
"properties": {
"access_key": {
"type": "string",
"title": "Access Key",
"writeOnly": true
},
"name": {
"type": "string",
"title": "Name"
},
"email": {
"type": "string",
"title": "Email"
},
"budget": {
"type": "array",
"title": "Budget",
"enum": [
"under-5k",
"5k-20k",
"20k-plus"
]
},
"message": {
"type": "string",
"title": "Message"
},
"botcheck": {
"type": "boolean",
"title": "Botcheck",
"enum": [
"Option 1"
]
}
}
}Sample payload
{
"access_key": "YOUR_ACCESS_KEY",
"name": "Name",
"email": "jane@example.com",
"budget": [
"under-5k"
],
"message": "Hi, I would like to talk about a project.",
"botcheck": ""
}splitforms-ready HTML
<form action="https://splitforms.com/api/submit" method="POST">
<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"></textarea>
</label>
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
<button type="submit">Send</button>
</form>What this converter is for
Developers often 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. This page turns plain HTML into that contract without asking you to rewrite your form by hand.
The converter intentionally keeps hidden fields visible in the output schema. Hidden fields like access_key, redirect, and botcheck matter to real submissions, so they belong in your payload model even if end users never type them.
If the form needs a backend after conversion, copy the regenerated splitforms HTML, replace YOUR_ACCESS_KEY, and deploy. The same fields become email notifications, dashboard rows, webhook payloads, and CSV exports.
How to use it
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.
Frequently asked questions
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?
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 parse React or JSX form components?
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.
Why convert an HTML form into JSON?
A JSON schema makes a form easier to document, test, validate, and hand to a backend or automation tool. It also gives you a realistic sample payload for webhooks, API tests, and integration docs before the form is live.
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 email delivery, dashboard storage, spam filtering, and 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.
Need the JSON to come from real submissions?
splitforms turns the same form fields into webhook payloads, email notifications, CSV exports, and dashboard rows. Free for 1,000 submissions/month.