Getting Started

1

Get Your API Key

Create a free API key by sending a POST request with your email address. The API key is returned immediately and starts with ff_live_. No credit card required.

bash

curl -X POST https://formforge-api.vercel.app/api/signup \
  -H "Content-Type: application/json" \
  -d '{ "email": "you@example.com" }'

The response includes your API key:

Response — 200 OK

{
  "message": "API key created successfully.",
  "api_key": "ff_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "tier": "free",
  "rate_limit": { "forms_per_day": 20 }
}

Save your key! The plain-text key is only shown once. Pass it as Authorization: Bearer YOUR_KEY in all subsequent requests.

You can also get a key instantly through the signup form on the homepage or via the dashboard.

2

Make Your First API Call

Send a JSON form definition to the rendering endpoint. At minimum, you need a fields array with at least one field. Each field requires name, type, and label.

bash

curl -X POST https://formforge-api.vercel.app/api/json-to-form \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer ff_live_your_key_here" \
  -d '{
    "title": "Contact Us",
    "fields": [
      { "name": "name",    "type": "text",     "label": "Full Name",  "required": true },
      { "name": "email",   "type": "email",    "label": "Email",      "required": true },
      { "name": "message", "type": "textarea", "label": "Message" }
    ]
  }'

3

Check the Response

The API returns a JSON object with the rendered HTML and metadata. The html field contains a complete, self-contained HTML document ready to embed.

Response — 200 OK

{
  "html": "<!DOCTYPE html><html lang=\"en\">...</html>",
  "meta": {
    "theme": "modern",
    "fieldCount": 3,
    "fieldTypes": ["text", "email", "textarea"],
    "title": "Contact Us"
  }
}

4

Try It in Your Language

Use FormForge from any language. Here are ready-to-use examples for JavaScript and Python.

Node.js / Browser

const response = await fetch("https://formforge-api.vercel.app/api/json-to-form", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer ff_live_your_key_here",
  },
  body: JSON.stringify({
    title: "Contact Us",
    fields: [
      { name: "name",    type: "text",     label: "Full Name",  required: true },
      { name: "email",   type: "email",    label: "Email",      required: true },
      { name: "message", type: "textarea", label: "Message" },
    ],
  }),
});

const { html, meta } = await response.json();
console.log(`Form generated: ${meta.fieldCount} fields, ${meta.theme} theme`);

// Render in an iframe
document.getElementById("form-container").srcdoc = html;

// Or inject directly
// document.getElementById("form-container").innerHTML = html;

Python

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Contact Us",
        "fields": [
            {"name": "name",    "type": "text",     "label": "Full Name",  "required": True},
            {"name": "email",   "type": "email",    "label": "Email",      "required": True},
            {"name": "message", "type": "textarea", "label": "Message"},
        ],
    },
    headers={"Authorization": "Bearer ff_live_your_key_here"},
)

data = response.json()
print(f"Form generated: {data['meta']['fieldCount']} fields")

# Save to file
with open("form.html", "w") as f:
    f.write(data["html"])

SDK Packages Coming Soon

Install

# JavaScript / TypeScript
npm install formforge-sdk

# Python
pip install formforge

+

Customize with Themes

FormForge includes three built-in themes. Add a theme property to your JSON to select one:

modern (default) — Clean, minimal design with emerald green accent. Best for most use cases.
corporate — Professional blue theme with tighter border radius. Ideal for B2B and enterprise apps.
playful — Rounded corners, purple accent, friendly feel. Great for consumer-facing products.

json

{
  "title": "Event Registration",
  "theme": "playful",
  "fields": [
    { "name": "name",  "type": "text",  "label": "Your Name",  "required": true },
    { "name": "email", "type": "email", "label": "Email",      "required": true },
    { "name": "role",  "type": "select", "label": "Your Role",  "options": ["Developer", "Designer", "PM"] }
  ]
}

The generated CSS is embedded in the HTML, so there are no external dependencies regardless of which theme you choose.

+

Add Validation

FormForge generates client-side validation automatically based on field properties. You can control validation through these properties:

required: true — Field must be filled before submission
minLength / maxLength — Character limits for text and textarea fields
min / max — Value bounds for number and date fields
pattern — Custom regex pattern for text fields

Built-in format validation runs automatically for email, url, and tel field types.

json

{
  "fields": [
    {
      "name": "username",
      "type": "text",
      "label": "Username",
      "required": true,
      "minLength": 3,
      "maxLength": 20,
      "pattern": "^[a-zA-Z0-9_]+$",
      "helpText": "Letters, numbers, and underscores only"
    },
    {
      "name": "age",
      "type": "number",
      "label": "Age",
      "min": 18,
      "max": 120
    }
  ]
}

Validation errors appear inline below each field with clear messages. Error regions use aria-live for screen reader support.

+

Embed in Your App

The HTML returned by FormForge is a complete, self-contained document. You have several options for embedding it:

Option A: Iframe

The simplest approach. Set the srcdoc attribute to the returned HTML:

html

<iframe
  srcdoc="<!DOCTYPE html>...your FormForge HTML..."
  title="Contact form"
  style="width:100%;height:500px;border:none;"
></iframe>

Option B: innerHTML Injection

If you want the form to be part of your page DOM (for CSS inheritance or event handling):

javascript

const response = await fetch("/api/json-to-form", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(formSchema),
});
const { html } = await response.json();
document.getElementById("form-container").innerHTML = html;

Tip: Add a submitUrl property to your schema to have the form automatically POST responses to your backend. The generated form handles loading states, success, and error messages.

!

Common Errors

If something goes wrong, check these common issues first.

Status	Meaning	How to Fix
401	Unauthorized	Your API key is missing or invalid. Check that your `Authorization: Bearer` header includes a valid `ff_live_` key.
429	Too Many Requests	You've exceeded your daily rate limit (20 forms/day on free tier). Wait for the reset or upgrade your plan.
400	Bad Request	Check your request body. Ensure you're sending valid JSON with a `"fields"` array where each field has `name`, `type`, and `label`.

Get Your API Key

Make Your First API Call

Check the Response

Try It in Your Language

SDK Packages Coming Soon

Customize with Themes

Add Validation

Embed in Your App

Option A: Iframe

Option B: innerHTML Injection

Common Errors

What's next?

API Documentation

Live Demo

Dynamic Forms Guide

Upgrade Your Plan