Generate HTML Forms from JSON Schemas — No Frontend Code Required
Building forms is tedious. You define the fields, wire up validation, handle different input types, make it look decent, then repeat the whole thing when the requirements change. FormForge API lets you define your form as a JSON schema and get back ready-to-use HTML — styled, validated, and embeddable.
FormForge API generates HTML forms from JSON definitions. You describe what fields you need, pick a theme, and get back complete HTML with built-in client-side validation. Free tier gives you 20 forms per day.
Getting Your API Key
curl -X POST https://formforge-api.vercel.app/api/signup \
-H "Content-Type: application/json" \
-d '{"email": "[email protected]"}'
You'll get a key prefixed with ff_live_. That's your access token for all endpoints.
JSON to Form
The /api/json-to-form endpoint takes a JSON schema describing your form fields and returns complete HTML.
curl
curl -X POST https://formforge-api.vercel.app/api/json-to-form \
-H "Content-Type: application/json" \
-H "x-api-key: ff_live_your_key_here" \
-d '{
"title": "Contact Us",
"theme": "modern",
"fields": [
{
"name": "full_name",
"label": "Full Name",
"type": "text",
"required": true,
"placeholder": "Jane Smith"
},
{
"name": "email",
"label": "Email Address",
"type": "email",
"required": true,
"placeholder": "[email protected]"
},
{
"name": "department",
"label": "Department",
"type": "select",
"options": ["Sales", "Support", "Engineering", "Other"]
},
{
"name": "message",
"label": "Message",
"type": "textarea",
"required": true,
"placeholder": "How can we help?"
}
],
"submitText": "Send Message"
}'
The response contains fully styled HTML that you can drop directly into any page.
Node.js
const response = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': process.env.FORMFORGE_API_KEY,
},
body: JSON.stringify({
title: 'Event Registration',
theme: 'corporate',
fields: [
{ name: 'name', label: 'Name', type: 'text', required: true },
{ name: 'email', label: 'Email', type: 'email', required: true },
{ name: 'company', label: 'Company', type: 'text' },
{ name: 'role', label: 'Role', type: 'select', options: ['Developer', 'Manager', 'Executive', 'Student'] },
{ name: 'dietary', label: 'Dietary Restrictions', type: 'text', placeholder: 'e.g. vegetarian, gluten-free' },
{ name: 'terms', label: 'I agree to the event terms', type: 'checkbox', required: true },
],
submitText: 'Register',
}),
});
const { html } = await response.json();
// Use html in your page, save to a file, or serve it dynamically
Themes
FormForge ships with 4 built-in themes. Same schema, different look:
| Theme | Style |
|---|---|
modern | Clean lines, rounded corners, blue accent. Good default for SaaS apps. |
corporate | Formal layout, muted colors, serif headings. Works for enterprise tools. |
playful | Rounded elements, bright colors, larger touch targets. Great for consumer apps. |
minimal | No borders, no background, bare structure. For when you want to apply your own CSS. |
Pass the theme field in your request to switch between them. The minimal theme is especially useful if you want the form structure and validation without any opinionated styling.
Embeddable Forms
The /api/json-to-embed endpoint returns an <iframe>-ready HTML snippet. This is useful when you need to embed a form in a CMS, email, or third-party page where you can't inject arbitrary HTML.
curl -X POST https://formforge-api.vercel.app/api/json-to-embed \
-H "Content-Type: application/json" \
-H "x-api-key: ff_live_your_key_here" \
-d '{
"title": "Quick Survey",
"theme": "playful",
"fields": [
{ "name": "rating", "label": "How would you rate our service?", "type": "select", "options": ["5 - Excellent", "4 - Good", "3 - Average", "2 - Poor", "1 - Terrible"], "required": true },
{ "name": "feedback", "label": "Any additional feedback?", "type": "textarea" }
],
"submitText": "Submit Feedback"
}'
The response includes a self-contained HTML document with styles inlined, ready to be loaded in an iframe:
<iframe
srcdoc="<!-- FormForge embed HTML goes here -->"
width="100%"
height="400"
frameborder="0"
></iframe>
Multi-Step Forms
For longer forms, FormForge supports wizard-style multi-step layouts. Group your fields into steps and the generated HTML includes a progress indicator and next/back navigation:
const response = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': process.env.FORMFORGE_API_KEY,
},
body: JSON.stringify({
title: 'Job Application',
theme: 'modern',
steps: [
{
title: 'Personal Info',
fields: [
{ name: 'name', label: 'Full Name', type: 'text', required: true },
{ name: 'email', label: 'Email', type: 'email', required: true },
{ name: 'phone', label: 'Phone', type: 'text' },
],
},
{
title: 'Experience',
fields: [
{ name: 'current_role', label: 'Current Role', type: 'text' },
{ name: 'years_exp', label: 'Years of Experience', type: 'select', options: ['0-2', '3-5', '6-10', '10+'] },
{ name: 'skills', label: 'Key Skills', type: 'textarea', placeholder: 'List your top skills' },
],
},
{
title: 'Confirm',
fields: [
{ name: 'start_date', label: 'Available Start Date', type: 'text', placeholder: 'YYYY-MM-DD' },
{ name: 'consent', label: 'I confirm this information is accurate', type: 'checkbox', required: true },
],
},
],
submitText: 'Submit Application',
}),
});
const { html } = await response.json();
The output includes step navigation, a progress bar, and per-step validation — all generated from your JSON definition.
Practical Use Case: Dynamic Forms from a Database
If your app lets users create custom forms (think Typeform-style), FormForge handles the rendering:
// Fetch form definition from your database
const formConfig = await db.query('SELECT config FROM forms WHERE id = $1', [formId]);
// Generate HTML via FormForge
const response = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': process.env.FORMFORGE_API_KEY,
},
body: JSON.stringify(formConfig.rows[0].config),
});
const { html } = await response.json();
// Serve to the end user
res.send(html);
Your backend stores the schema. FormForge renders it. You never write form HTML.
Pricing
| Tier | Price | Rate Limit |
|---|---|---|
| Free | $0 | 20 forms/day |
| Builder | $14/mo | 300 forms/day |
| Enterprise | $39/mo | Unlimited |
No credit card for the free tier. Twenty forms per day is plenty for development and small production workloads.
Get Started
- Full docs: formforge-api.vercel.app/docs
- Sign up for a free API key
- Try all 4 themes in the interactive playground
Check the examples page for sample forms rendered in each theme.
Source code: GitHub