{% extends 'base.html' %}

{% block title %}AgentForms — Collect data and generate documents for your AI agent{% endblock %}

{% block head_extra %}
<meta name="description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<link rel="canonical" href="https://agentforms.io/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://agentforms.io/">
<meta property="og:title" content="AgentForms — Collect Data & Generate Documents for AI Agents">
<meta property="og:description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<meta property="og:image" content="https://agentforms.io/static/favicon.jpg">
<meta property="og:site_name" content="AgentForms">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AgentForms — Collect Data & Generate Documents for AI Agents">
<meta name="twitter:description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<meta name="twitter:image" content="https://agentforms.io/static/og-image.png">

<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "AgentForms",
    "url": "https://agentforms.io",
    "description": "AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web",
    "offers": [
        {"@type": "Offer", "price": "0", "priceCurrency": "USD", "name": "Free"},
        {"@type": "Offer", "price": "9", "priceCurrency": "USD", "name": "Starter"},
        {"@type": "Offer", "price": "29", "priceCurrency": "USD", "name": "Pro"},
        {"@type": "Offer", "price": "49", "priceCurrency": "USD", "name": "Teams"},
        {"@type": "Offer", "price": "99", "priceCurrency": "USD", "name": "Teams+"}
    ],
    "author": {
        "@type": "Organization",
        "name": "AgentForms",
        "url": "https://agentforms.io"
    }
}
</script>

{% endblock %}

{% block content %}

    <!-- HERO -->
    <section class="hero">
        <div class="container">
            <div class="badge">
                <span class="badge-dot"></span>
                API-First Form & Document Platform
            </div>
            <h1>Your AI agent can't collect data <span class="line-wrap">or produce <span class="accent">client-ready documents.</span></span></h1>
            <p class="hero-sub">
                AgentForms gives your AI agent forms to collect data from humans and branded PDF documents to deliver back — deployed with a single API call.
            </p>
            <div class="hero-actions">
                <a href="{{ url_for('auth.register') }}" class="btn btn-lg">Start Free →</a>
                <a href="/api/docs" class="btn btn-outline btn-lg">API Docs</a>
            </div>
            <p class="hero-note">Free tier · No credit card required</p>

            <!-- CODE PREVIEW -->
            <div class="code-preview">
                <div class="code-header">
                    <span class="code-dot red"></span>
                    <span class="code-dot yellow"></span>
                    <span class="code-dot green"></span>
                    <span class="code-title">deploy-agent-form.sh</span>
                </div>
                <pre class="code-body"><code class="language-bash"><span class="comment"># Your AI agent deploys a form, collects data, generates a PDF</span>
                curl -X POST <span class="string">https://agentforms.io/api/v2/forms</span> \\\
                -H <span class="string">"Authorization: Bearer *** \
                -H <span class="string">"Content-Type: application/json"</span> \
                -d <span class="string">'{
                </span><span class="param">"title"</span>: <span class="string">"Client Requirements"</span>,
                </span><span class="param">"fields"</span>: [<span class="string">"name"</span>, <span class="string">"scope"</span>, <span class="string">"budget"</span>],
                </span><span class="param">"on_submit"</span>: { <span class="param">"chain"</span>: <span class="string">"generate_proposal_pdf"</span> }
                }'</span>

                <span class="comment"># → { "form_url": "https://agentforms.io/f/abc123", "chain_id": "ch_..." }</span>
                </code></pre>
            </div>
        </div>
    </section>

    <!-- THE PROBLEM -->
    <section class="section-alt-bg">
        <div class="container">
            <div class="section-header center">
                <p class="section-label">The Problem</p>
                <h2 class="section-title">AI agents are stuck in the chat window</h2>
                <p class="section-sub">Your agent can draft a proposal, but can't collect requirements, send a branded PDF, or automate follow-up — without stitching together four different tools.</p>
            </div>
            <div class="problem-grid">
                <div class="problem">
                    <div class="problem-icon" aria-hidden="true">🔒</div>
                    <h3>Can't collect data</h3>
                    <p>AI agents generate text. They can't ask a human structured questions, validate inputs, or build a requirement intake process.</p>
                </div>
                <div class="problem">
                    <div class="problem-icon" aria-hidden="true">📄</div>
                    <h3>Can't produce documents</h3>
                    <p>Your agent drafts content, but turning it into a branded proposal, quote, or invoice PDF is a separate tool chain no agent speaks fluently.</p>
                </div>
                <div class="problem">
                    <div class="problem-icon" aria-hidden="true">🔗</div>
                    <h3>Can't automate follow-up</h3>
                    <p>After the client submits, the agent doesn't know what happened — no email sent, no webhook fired, no status tracked.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- THE SOLUTION -->
    <section>
        <div class="container">
            <div class="section-header center">
                <p class="section-label">The Solution</p>
                <h2 class="section-title">One API call replaces four services</h2>
                <p class="section-sub">AgentForms is the bridge between your AI agent and the human world — intake, output, and everything in between.</p>
            </div>

            <!-- Use Case 1: Data Collection -->
            <div class="use-case-row">
                <div class="use-case-text">
                    <h3>Collect structured data from anyone</h3>
                    <p>Your AI agent needs requirements, feedback, or client details. Deploy a form — define the fields, get a shareable URL. Clients fill it. You get clean JSON.</p>
                    <ul>
                        <li>Deploy forms programmatically — no builder UI needed</li>
                        <li>Define fields, validation, and conditional logic</li>
                        <li>Share a link, embed on a site, or send via email</li>
                        <li>Get structured data back via webhook or API</li>
                    </ul>
                </div>
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent collects data</span>
                    </div>
                    <pre class="code-body"><code class="language-python"><span class="comment"># Agent deploys a requirements form</span>
<span class="keyword">form</span> = client.forms.create(
  <span class="param">title</span>=<span class="string">"Project Requirements"</span>,
  <span class="param">fields</span>=[<span class="string">"company"</span>, <span class="string">"goals"</span>, <span class="string">"timeline"</span>],
  <span class="param">webhook</span>=<span class="string">"https://my-agent.io/collected"</span>
)
<span class="comment"># → Share: https://agentforms.io/f/abc123</span>
</code></pre>
                </div>
            </div>

            <!-- Use Case 2: Document Generation -->
            <div class="use-case-row">
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent generates PDF</span>
                    </div>
                    <pre class="code-body"><code class="language-python"><span class="comment"># Form data → branded proposal PDF</span>
<span class="keyword">doc</span> = client.documents.create(
  <span class="param">template</span>=<span class="string">"proposal"</span>,
  <span class="param">data</span>=form_submission,
  <span class="param">brand</span>={<span class="string">"logo"</span>: <span class="string">"your-logo.png"</span>,
          <span class="string">"color"</span>: <span class="string">"#10b981"</span>}
)
<span class="comment"># → https://agentforms.io/d/xyz789.pdf</span>
</code></pre>
                </div>
                <div class="use-case-text">
                    <h3>Turn data into client-ready documents</h3>
                    <p>Form submission triggers a branded PDF — proposal, quote, invoice, or report. Templates are tier-gated so you scale from solo to team.</p>
                    <ul>
                        <li>Pre-built templates: proposals, quotes, invoices</li>
                        <li>Custom branding — logo, colors, typography</li>
                        <li>Tier-gated: Starter gets 10, Pro 100, Teams+ unlimited</li>
                        <li>Hosted PDFs — share a link, embed, or download</li>
                    </ul>
                </div>
            </div>

            <!-- Use Case 3: Automation -->
            <div class="use-case-row">
                <div class="use-case-text">
                    <h3>Automate what happens after</h3>
                    <p>Client submits a form? Chain actions together — send a confirmation email, generate the PDF, forward data to your CRM. Your agent stays in the loop via real-time events.</p>
                    <ul>
                        <li>Sequential action chains triggered on form submit</li>
                        <li>Email notifications, webhook forwarding, PDF generation</li>
                        <li>Real-time SSE — your agent knows when things happen</li>
                        <li>Tier-gated chains: Starter gets 1, Pro 3, Teams+ unlimited</li>
                    </ul>
                </div>
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent chains actions</span>
                    </div>
                    <pre class="code-body"><code class="language-python"><span class="comment"># On submit → email + PDF + webhook</span>
<span class="keyword">chain</span> = client.chains.create(
  <span class="param">trigger</span>=<span class="string">"form_submit"</span>,
  <span class="param">actions</span>:[
    {<span class="string">"type"</span>: <span class="string">"email"</span>,     <span class="string">"to"</span>: <span class="string">"client"</span>},
    {<span class="string">"type"</span>: <span class="string">"pdf"</span>,       <span class="string">"template"</span>: <span class="string">"quote"</span>},
    {<span class="string">"type"</span>: <span class="string">"webhook"</span>, <span class="string">"url"</span>: <span class="string">"crm.io"</span>}
  ]
)
</code></pre>
                </div>
            </div>
        </div>
    </section>

    <!-- CORE CAPABILITIES -->
    <section class="section-alt-bg">
        <div class="container">
            <div class="section-header center">
                <p class="section-label">Capabilities</p>
                <h2 class="section-title">Everything your agent needs to interact with humans</h2>
            </div>
            <div class="features-grid">
                <div class="feature">
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <span class="feature-tag">tier-gated</span>
                    <h3>Branded Documents</h3>
                    <p>Turn form data into professional quotes, proposals, invoices, and reports. PDFs your clients actually want to read.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h2"/><path d="M21 13v2a4 4 0 0 1-4 4h-2"/><polyline points="7 23 3 19 7 15"/><path d="M3 13h18"/></svg>
                    </div>
                    <span class="feature-tag">tier-gated</span>
                    <h3>Action Chains</h3>
                    <p>Automate the follow-up. Send email, generate PDF, forward to webhook — all in sequence after form submission.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    </div>
                    <span class="feature-tag">api-first</span>
                    <h3>Deploy On Demand</h3>
                    <p>Your agent builds the tool. Define fields, attach a chain, get a shareable URL — all via one API call.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ARCHITECTURE FLOW -->
    <section>
        <div class="container">
            <div class="section-header center">
                <p class="section-label">How It Works</p>
                <h2 class="section-title">From agent request to client document</h2>
                <p class="section-sub">Your AI agent deploys a form. A client fills it. Data flows through automation. A branded document gets generated and delivered.</p>
            </div>
            <div class="arch-flow">
                <div class="arch-node">
                    <h4>AI Agent</h4>
                    <p>Deploys the form via API</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Client</h4>
                    <p>Opens link, fills the form</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Action Chain</h4>
                    <p>Processes data, triggers steps</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Document</h4>
                    <p>Branded PDF delivered</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta">
        <div class="container">
            <div class="cta-box">
                <h2>Give your AI agent a way to talk to humans</h2>
                <p>Deploy your first form in 30 seconds. No credit card required.</p>
                <div class="hero-actions">
                    <a href="{{ url_for('auth.register') }}" class="btn btn-lg">Get Started Free →</a>
                    <a href="/pricing" class="btn btn-outline btn-lg">View Plans</a>
                </div>
            </div>
        </div>
    </section>

{% endblock %}
