Code Examples

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Contact Us',
    description: 'We will get back to you within 24 hours.',
    theme: 'modern',
    submitUrl: 'https://yoursite.com/api/contact',
    submitLabel: 'Send Message',
    fields: [
      { name: 'name', type: 'text', label: 'Full Name', required: true, placeholder: 'Jane Smith' },
      { name: 'email', type: 'email', label: 'Email Address', required: true, placeholder: 'jane@example.com' },
      { name: 'subject', type: 'text', label: 'Subject', placeholder: 'How can we help?' },
      { name: 'message', type: 'textarea', label: 'Message', required: true, placeholder: 'Tell us more...', minLength: 10 }
    ]
  })
});

const { html } = await res.json();
// Embed in your page or serve as standalone HTML
document.getElementById('form-container').innerHTML = html;

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Contact Us",
        "description": "We will get back to you within 24 hours.",
        "theme": "modern",
        "submitUrl": "https://yoursite.com/api/contact",
        "submitLabel": "Send Message",
        "fields": [
            {"name": "name", "type": "text", "label": "Full Name", "required": True},
            {"name": "email", "type": "email", "label": "Email Address", "required": True},
            {"name": "subject", "type": "text", "label": "Subject"},
            {"name": "message", "type": "textarea", "label": "Message", "required": True, "minLength": 10}
        ]
    }
)

with open("contact-form.html", "w") as f:
    f.write(response.json()["html"])
print("Contact form saved to contact-form.html")

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Create Your Account',
    description: 'Join thousands of developers building with our platform.',
    theme: 'corporate',
    submitUrl: 'https://yoursite.com/api/register',
    submitLabel: 'Create Account',
    fields: [
      { name: 'first_name', type: 'text', label: 'First Name', required: true },
      { name: 'last_name', type: 'text', label: 'Last Name', required: true },
      { name: 'email', type: 'email', label: 'Work Email', required: true, placeholder: 'you@company.com' },
      { name: 'phone', type: 'tel', label: 'Phone Number', placeholder: '+1 (555) 000-0000' },
      { name: 'company', type: 'text', label: 'Company Name' },
      { name: 'role', type: 'select', label: 'Your Role',
        options: ['Developer', 'Designer', 'Product Manager', 'Engineering Manager', 'CTO', 'Other'] },
      { name: 'dob', type: 'date', label: 'Date of Birth' },
      { name: 'terms', type: 'checkbox', label: 'I agree to the Terms of Service and Privacy Policy', required: true }
    ]
  })
});

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

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Create Your Account",
        "description": "Join thousands of developers building with our platform.",
        "theme": "corporate",
        "submitUrl": "https://yoursite.com/api/register",
        "submitLabel": "Create Account",
        "fields": [
            {"name": "first_name", "type": "text", "label": "First Name", "required": True},
            {"name": "last_name", "type": "text", "label": "Last Name", "required": True},
            {"name": "email", "type": "email", "label": "Work Email", "required": True},
            {"name": "phone", "type": "tel", "label": "Phone Number"},
            {"name": "company", "type": "text", "label": "Company Name"},
            {"name": "role", "type": "select", "label": "Your Role",
             "options": ["Developer", "Designer", "Product Manager", "Engineering Manager", "CTO", "Other"]},
            {"name": "dob", "type": "date", "label": "Date of Birth"},
            {"name": "terms", "type": "checkbox", "label": "I agree to the Terms of Service and Privacy Policy", "required": True}
        ]
    }
)

data = response.json()
print(f"Fields: {data['meta']['fieldCount']}, Theme: {data['meta']['theme']}")

const surveySchema = {
  title: 'Customer Satisfaction Survey',
  description: 'Help us improve. Takes 2 minutes.',
  theme: 'playful',
  submitLabel: 'Submit Survey',
  fields: [
    {
      name: 'satisfaction', type: 'radio',
      label: 'How satisfied are you with our product?',
      required: true,
      options: ['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']
    },
    {
      name: 'recommend', type: 'select',
      label: 'How likely are you to recommend us?',
      required: true,
      options: ['Extremely likely', 'Very likely', 'Somewhat likely', 'Not likely', 'Not at all']
    },
    {
      name: 'features', type: 'checkbox',
      label: 'Which features do you use most?',
      options: ['Dashboard', 'Reports', 'API Access', 'Integrations', 'Mobile App']
    },
    {
      name: 'improvement', type: 'textarea',
      label: 'What could we improve?',
      placeholder: 'Your feedback matters...'
    }
  ]
};

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(surveySchema)
});

const { html } = await res.json();
document.getElementById('survey-frame').srcdoc = html;

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Customer Satisfaction Survey",
        "description": "Help us improve. Takes 2 minutes.",
        "theme": "playful",
        "submitLabel": "Submit Survey",
        "fields": [
            {"name": "satisfaction", "type": "radio", "label": "How satisfied are you?",
             "required": True,
             "options": ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied", "Very Dissatisfied"]},
            {"name": "recommend", "type": "select", "label": "Likelihood to recommend?",
             "required": True,
             "options": ["Extremely likely", "Very likely", "Somewhat likely", "Not likely", "Not at all"]},
            {"name": "features", "type": "checkbox", "label": "Features you use most?",
             "options": ["Dashboard", "Reports", "API Access", "Integrations", "Mobile App"]},
            {"name": "improvement", "type": "textarea", "label": "What could we improve?"}
        ]
    }
)

with open("survey.html", "w") as f:
    f.write(response.json()["html"])
print("Survey form saved to survey.html")

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Product Feedback',
    description: 'Rate your experience and help us improve.',
    theme: 'modern',
    submitLabel: 'Submit Feedback',
    fields: [
      { name: 'rating', type: 'radio', label: 'Overall Rating', required: true,
        options: ['1 Star', '2 Stars', '3 Stars', '4 Stars', '5 Stars'] },
      { name: 'category', type: 'select', label: 'Feedback Category', required: true,
        options: ['Usability', 'Performance', 'Features', 'Documentation', 'Support', 'Other'] },
      { name: 'email', type: 'email', label: 'Your Email (optional)',
        placeholder: 'For follow-up questions' },
      { name: 'feedback', type: 'textarea', label: 'Your Feedback', required: true,
        placeholder: 'What went well? What could be better?', minLength: 20, maxLength: 2000 }
    ]
  })
});

const { html } = await res.json();
// Serve as a standalone page or embed in an iframe
const blob = new Blob([html], { type: 'text/html' });
window.open(URL.createObjectURL(blob));

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Product Feedback",
        "description": "Rate your experience and help us improve.",
        "theme": "modern",
        "submitLabel": "Submit Feedback",
        "fields": [
            {"name": "rating", "type": "radio", "label": "Overall Rating", "required": True,
             "options": ["1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars"]},
            {"name": "category", "type": "select", "label": "Feedback Category", "required": True,
             "options": ["Usability", "Performance", "Features", "Documentation", "Support", "Other"]},
            {"name": "email", "type": "email", "label": "Your Email (optional)"},
            {"name": "feedback", "type": "textarea", "label": "Your Feedback",
             "required": True, "minLength": 20, "maxLength": 2000}
        ]
    }
)

with open("feedback.html", "w") as f:
    f.write(response.json()["html"])
print("Feedback form saved to feedback.html")

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Place Your Order',
    description: 'Free shipping on orders over $50.',
    theme: 'corporate',
    submitUrl: 'https://yourstore.com/api/orders',
    submitLabel: 'Place Order',
    fields: [
      { name: 'product', type: 'select', label: 'Product', required: true,
        options: ['Widget Pro ($25)', 'Gadget Plus ($45)', 'Mega Pack ($99)', 'Starter Kit ($15)'] },
      { name: 'quantity', type: 'number', label: 'Quantity', required: true, min: 1, max: 100, value: '1' },
      { name: 'name', type: 'text', label: 'Full Name', required: true },
      { name: 'email', type: 'email', label: 'Email', required: true },
      { name: 'address', type: 'textarea', label: 'Shipping Address', required: true,
        placeholder: 'Street, City, State, ZIP' },
      { name: 'phone', type: 'tel', label: 'Phone Number', helpText: 'For delivery notifications' },
      { name: 'notes', type: 'textarea', label: 'Order Notes',
        placeholder: 'Special instructions (optional)' }
    ]
  })
});

const { html } = await res.json();
document.getElementById('order-container').innerHTML = html;

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Place Your Order",
        "description": "Free shipping on orders over $50.",
        "theme": "corporate",
        "submitUrl": "https://yourstore.com/api/orders",
        "submitLabel": "Place Order",
        "fields": [
            {"name": "product", "type": "select", "label": "Product", "required": True,
             "options": ["Widget Pro ($25)", "Gadget Plus ($45)", "Mega Pack ($99)", "Starter Kit ($15)"]},
            {"name": "quantity", "type": "number", "label": "Quantity", "required": True,
             "min": 1, "max": 100, "value": "1"},
            {"name": "name", "type": "text", "label": "Full Name", "required": True},
            {"name": "email", "type": "email", "label": "Email", "required": True},
            {"name": "address", "type": "textarea", "label": "Shipping Address", "required": True},
            {"name": "phone", "type": "tel", "label": "Phone Number"},
            {"name": "notes", "type": "textarea", "label": "Order Notes"}
        ]
    }
)

with open("order-form.html", "w") as f:
    f.write(response.json()["html"])
print("Order form saved to order-form.html")

# Flask route that generates forms from query parameters
from flask import Flask, request, Response
import requests as http_client

app = Flask(__name__)

@app.route("/form-builder", methods=["POST"])
def build_form():
    """Accept a form config from your admin UI and return rendered HTML."""
    config = request.get_json()

    # Forward to FormForge API
    api_res = http_client.post(
        "https://formforge-api.vercel.app/api/json-to-form",
        json=config
    )

    if api_res.status_code != 200:
        return {"error": api_res.json()}, api_res.status_code

    html = api_res.json()["html"]
    return Response(html, mimetype="text/html")

# Usage: POST /form-builder with the same JSON schema
# The response is the rendered HTML form, ready to serve

# Build a form dynamically from shell variables

TITLE="Event Registration"
THEME="playful"

curl -X POST https://formforge-api.vercel.app/api/json-to-form \
  -H "Content-Type: application/json" \
  -d "{
    \"title\": \"$TITLE\",
    \"theme\": \"$THEME\",
    \"submitLabel\": \"Register Now\",
    \"fields\": [
      {\"name\": \"name\", \"type\": \"text\", \"label\": \"Your Name\", \"required\": true},
      {\"name\": \"email\", \"type\": \"email\", \"label\": \"Email\", \"required\": true},
      {\"name\": \"session\", \"type\": \"select\", \"label\": \"Preferred Session\",
       \"options\": [\"Morning (9am)\", \"Afternoon (2pm)\", \"Evening (6pm)\"]},
      {\"name\": \"dietary\", \"type\": \"checkbox\", \"label\": \"Dietary requirements\",
       \"options\": [\"Vegetarian\", \"Vegan\", \"Gluten-free\", \"No restrictions\"]}
    ]
  }" | jq -r '.html' > event-form.html

echo "Dynamic form saved to event-form.html"

const res = await fetch('https://formforge-api.vercel.app/api/json-to-form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Job Application',
    theme: 'corporate',
    steps: [
      {
        title: 'Personal Info',
        fields: [
          { name: 'name', type: 'text', label: 'Full Name', required: true },
          { name: 'email', type: 'email', label: 'Email', required: true },
          { name: 'phone', type: 'tel', label: 'Phone Number' }
        ]
      },
      {
        title: 'Experience',
        fields: [
          { name: 'role', type: 'select', label: 'Desired Role',
            options: ['Frontend', 'Backend', 'Full Stack', 'DevOps'] },
          { name: 'years', type: 'number', label: 'Years of Experience', required: true },
          { name: 'skills', type: 'textarea', label: 'Key Skills' }
        ]
      },
      {
        title: 'Final Details',
        fields: [
          { name: 'start_date', type: 'date', label: 'Earliest Start Date' },
          { name: 'portfolio', type: 'url', label: 'Portfolio URL' },
          { name: 'terms', type: 'checkbox', label: 'I agree to the terms', required: true }
        ]
      }
    ]
  })
});

const { html, meta } = await res.json();
console.log(`Generated ${meta.stepCount}-step wizard with ${meta.fieldCount} fields`);

// Embed in your page
document.getElementById('form-container').innerHTML = html;

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-form",
    json={
        "title": "Job Application",
        "theme": "corporate",
        "steps": [
            {
                "title": "Personal Info",
                "fields": [
                    {"name": "name", "type": "text", "label": "Full Name", "required": True},
                    {"name": "email", "type": "email", "label": "Email", "required": True},
                    {"name": "phone", "type": "tel", "label": "Phone Number"}
                ]
            },
            {
                "title": "Experience",
                "fields": [
                    {"name": "role", "type": "select", "label": "Desired Role",
                     "options": ["Frontend", "Backend", "Full Stack", "DevOps"]},
                    {"name": "years", "type": "number", "label": "Years of Experience", "required": True},
                    {"name": "skills", "type": "textarea", "label": "Key Skills"}
                ]
            },
            {
                "title": "Final Details",
                "fields": [
                    {"name": "start_date", "type": "date", "label": "Earliest Start Date"},
                    {"name": "portfolio", "type": "url", "label": "Portfolio URL"},
                    {"name": "terms", "type": "checkbox", "label": "I agree to the terms", "required": True}
                ]
            }
        ]
    }
)

data = response.json()
print(f"Generated {data['meta']['stepCount']}-step wizard")

# Save the wizard form
with open("application.html", "w") as f:
    f.write(data["html"])

const res = await fetch('https://formforge-api.vercel.app/api/json-to-embed', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Newsletter Signup',
    description: 'Get weekly product updates delivered to your inbox.',
    theme: 'playful',
    fields: [
      { name: 'name', type: 'text', label: 'Your Name', required: true },
      { name: 'email', type: 'email', label: 'Email Address', required: true },
      { name: 'interests', type: 'select', label: 'Interest',
        options: ['Engineering', 'Design', 'Product', 'Marketing'] }
    ],
    options: {
      submitText: 'Subscribe',
      successMessage: 'Welcome aboard! Check your inbox.',
      honeypot: true
    }
  })
});

const { html, embedSnippet, meta } = await res.json();
console.log(`Embed form: ${meta.fieldCount} fields, ${meta.validationRules} validation rules`);

// Paste embedSnippet into any HTML page
console.log(embedSnippet);

import requests

response = requests.post(
    "https://formforge-api.vercel.app/api/json-to-embed",
    json={
        "title": "Newsletter Signup",
        "description": "Get weekly product updates delivered to your inbox.",
        "theme": "playful",
        "fields": [
            {"name": "name", "type": "text", "label": "Your Name", "required": True},
            {"name": "email", "type": "email", "label": "Email Address", "required": True},
            {"name": "interests", "type": "select", "label": "Interest",
             "options": ["Engineering", "Design", "Product", "Marketing"]}
        ],
        "options": {
            "submitText": "Subscribe",
            "successMessage": "Welcome aboard! Check your inbox.",
            "honeypot": True
        }
    }
)

data = response.json()
print(f"Embed ready: {data['meta']['fieldCount']} fields, height {data['meta']['estimatedHeight']}px")

# Save the embed snippet for use in other pages
with open("embed-snippet.html", "w") as f:
    f.write(data["embedSnippet"])