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"