{% extends 'base.html' %}
{% block title %}Features — AgentForms{% endblock %}
{% block head_extra %}
<meta name="description" content="Where AI builds communication tools on demand — intake forms, proposals, quotes, and reports. Deploy via API, share a link, get results.">
<link rel="canonical" href="https://agentforms.io/features">
{% endblock %}
{% block content %}
<h1 class="visually-hidden">Features</h1>
<!-- FEATURES -->
<section id="features">
<div class="container">
<div class="section-header center">
<p class="section-label">Features</p>
<h2 class="section-title">Communication tools your AI builds on demand</h2>
<p class="section-sub">Intake forms capture data. Branded documents deliver value. Automation handles the rest.</p>
</div>
<!-- FEATURE 1: DOCUMENT GENERATION -->
<div class="feature-section">
<div class="feature feature-detail">
<div>
<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>Form submissions automatically become professional quotes, proposals, invoices, and reports. Branded PDFs your clients actually want to read.</p>
<ul>
<li>✓ PDF & DOCX output</li>
<li>✓ Custom branded templates</li>
<li>✓ Variable insertion from form data</li>
<li>✓ Customer portal access</li>
<li>✓ Email delivery</li>
</ul>
</div>
<div class="feature-detail-visual">
<pre class="template-preview"><code class="language-text">
<span class="template-preview-title">TEMPLATE</span>
<span class="template-preview-line">{{ name }}</span>
<span class="template-preview-line">{{ service }}</span>
<span class="template-preview-line">{{ total }}</span>
<span class="template-preview-divider">{{ address }}, {{ city }}</span>
<span class="template-preview-note">→ renders as branded PDF</span>
</code></pre>
</div>
</div>
<div class="feature-table-wrap">
<table class="feature-table">
<caption>Document generation limits by tier</caption>
<thead>
<tr>
<th scope="col">Tier</th>
<th scope="col">Docs / mo</th>
</tr>
</thead>
<tbody>
<tr><td>Free</td><td>0</td></tr>
<tr><td>Starter</td><td>10</td></tr>
<tr><td>Pro</td><td>100</td></tr>
<tr><td>Teams</td><td>500</td></tr>
<tr><td>Teams+</td><td class="unlimited">unlimited</td></tr>
</tbody>
</table>
</div>
</div>
<!-- FEATURE 2: ACTION CHAINS -->
<div class="feature-section">
<div class="feature feature-detail">
<div>
<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 what happens after a form is filled. Chain actions together — send a confirmation email, generate a quote PDF, forward data to a webhook.</p>
<ul>
<li>✓ Sequential action execution</li>
<li>✓ Email notifications</li>
<li>✓ Document generation trigger</li>
<li>✓ Webhook forwarding</li>
<li>✓ Conditional branching</li>
</ul>
</div>
<div class="feature-detail-visual">
<pre class="template-preview"><code class="language-text">
<span class="template-preview-title">CHAIN: on_submit</span>
<span class="template-preview-line">① → Send confirmation email</span>
<span class="template-preview-line">② → Generate quote PDF</span>
<span class="template-preview-line">③ → POST to webhook</span>
<span class="template-preview-note">→ runs automatically on submit</span>
</code></pre>
</div>
</div>
<div class="feature-table-wrap">
<table class="feature-table">
<caption>Action chain limits by tier</caption>
<thead>
<tr>
<th scope="col">Tier</th>
<th scope="col">Chains</th>
</tr>
</thead>
<tbody>
<tr><td>Free</td><td>0</td></tr>
<tr><td>Starter</td><td>1</td></tr>
<tr><td>Pro</td><td>3</td></tr>
<tr><td>Teams</td><td>10</td></tr>
<tr><td>Teams+</td><td class="unlimited">unlimited</td></tr>
</tbody>
</table>
</div>
</div>
<!-- FEATURE 3: AGENT I/O -->
<div class="feature-section">
<div class="feature feature-detail">
<div>
<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 AI agent needs a form? Deploy one in milliseconds via API. Define the fields, attach automation, get back a shareable URL. The agent builds the tool — you just share it.</p>
<ul>
<li>✓ Deploy forms programmatically</li>
<li>✓ Define fields via JSON schema</li>
<li>✓ Attach action chains on deploy</li>
<li>✓ Structured submission JSON</li>
<li>✓ Quota endpoints for billing</li>
</ul>
</div>
<div class="feature-detail-visual">
<pre class="template-preview"><code class="language-json">
<span class="template-preview-title">POST /api/v2/forms</span>
<span class="template-preview-brace">{</span>
<span class="template-preview-indent">"title": <span class="template-preview-value">"Intake"</span>,</span>
<span class="template-preview-indent">"chain_id": <span class="template-preview-value">"ch_xyz"</span></span>
<span class="template-preview-brace">}</span>
<span class="template-preview-note">→ {"form_url": "https://af.io/f/abc"}</span>
</code></pre>
</div>
</div>
</div>
</div>
</section>
{% endblock %}