<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ og_title or site_name }}</title>
{% if og_description %}<meta name="description" content="{{ og_description }}">{% endif %}
{% if og_title %}<meta property="og:title" content="{{ og_title }}">{% else %}<meta property="og:title" content="{{ site_name }}">{% endif %}
{% if og_description %}<meta property="og:description" content="{{ og_description }}">{% endif %}
{% if og_image %}<meta property="og:image" content="{{ og_image }}">{% endif %}
<meta property="og:type" content="website">
<meta property="og:site_name" content="{{ og_title or site_name }}">
{% if og_title %}<meta name="twitter:title" content="{{ og_title }}">{% endif %}
{% if og_description %}<meta name="twitter:description" content="{{ og_description }}">{% endif %}
{% if og_image %}<meta name="twitter:image" content="{{ og_image }}">{% endif %}
<meta name="twitter:card" content="summary_large_image">
{% if favicon_url %}<link rel="icon" href="{{ favicon_url }}">{% endif %}
{% if favicon_url %}<link rel="apple-touch-icon" href="{{ favicon_url }}">{% endif %}
{% if branding_color %}<meta name="theme-color" content="{{ branding_color }}">{% endif %}
{% set color = branding_color or '#2563eb' %}
<style nonce="{{ csp_nonce }}">
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
background: #f7f7f8;
color: #1a1a2e;
line-height: 1.6;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.form-container {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
width: 100%;
max-width: 520px;
overflow: hidden;
}
.form-header {
padding: 28px 32px 20px;
{% if branding_color %}background: {{ branding_color }}; color: white;{% else %}border-bottom: 1px solid #eee;{% endif %}
}
{% if logo_url %}
.form-logo {
max-height: 48px;
max-width: 200px;
margin-bottom: 16px;
display: block;
}
{% endif %}
.form-header h1 {
font-size: 22px;
font-weight: 700;
{% if branding_color %}color: white;{% else %}color: #1a1a2e;{% endif %}
line-height: 1.3;
}
{% if og_description %}
.form-header p {
font-size: 14px;
{% if branding_color %}color: rgba(255,255,255,0.85);{% else %}color: #666;{% endif %}
margin-top: 8px;
}
{% endif %}
.form-body {
padding: 24px 32px 32px;
}
.field-group {
margin-bottom: 20px;
}
.field-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.field-group label .required {
color: #e53e3e;
margin-left: 2px;
}
.field-group input,
.field-group textarea,
.field-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 15px;
color: #333;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
border-color: {{ color }};
box-shadow: 0 0 0 3px {{ color }}20;
}
.field-group textarea {
min-height: 100px;
resize: vertical;
}
.field-group .checkbox-group {
display: flex;
align-items: center;
gap: 8px;
}
.field-group .checkbox-group input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: {{ color }};
}
.field-group .checkbox-group label {
margin-bottom: 0;
font-weight: 400;
}
.field-group .options-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-group .options-list label {
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
}
.field-group .options-list input {
width: 16px;
height: 16px;
accent-color: {{ color }};
}
.submit-btn {
width: 100%;
padding: 12px 24px;
background: {{ color }};
color: white;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
margin-top: 8px;
}
.submit-btn:hover {
background: {{ color }}dd;
}
.form-footer {
padding: 16px 32px;
background: #f9fafb;
border-top: 1px solid #eee;
text-align: center;
}
.form-footer p {
font-size: 12px;
color: #9ca3af;
}
.form-footer a {
color: #6b7280;
text-decoration: none;
}
.honeypot {
position: absolute;
left: -9999px;
}
@media (max-width: 480px) {
body { padding: 12px; }
.form-header { padding: 20px 20px 16px; }
.form-body { padding: 20px; }
.form-footer { padding: 12px 20px; }
}
</style>
</head>
<body>
<div class="form-container">
<div class="form-header">
{% if logo_url %}
<img class="form-logo" src="{{ logo_url }}" alt="{{ site_name }}">
{% endif %}
<h1>{{ site_name }}</h1>
{% if og_description %}
<p>{{ og_description }}</p>
{% endif %}
</div>
<div class="form-body">
<form action="/api/submit" method="POST">
<input type="hidden" name="token" value="{{ token }}">
{% if honeypot_enabled %}
<div class="honeypot" aria-hidden="true">
<label>
_fr_check
<input type="text" name="_fr_check" tabindex="-1" autocomplete="off">
</label>
</div>
{% endif %}
{% for field in fields %}
<div class="field-group"
data-field-key="{{ field.key }}"
{% if field.condition %}data-condition="{{ field.condition | tojson | forceescape }}" style="display:none;"{% endif %}>
{% set field_type = field.type | default('text') %}
{% if field_type == 'checkbox' %}
<div class="checkbox-group">
<input type="checkbox"
id="{{ field.key }}"
name="{{ field.key }}"
{% if field.required %}required{% endif %}
{% if field.default == 'true' %}checked{% endif %}>
<label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
</div>
{% elif field_type in ['radio', 'select'] and field.options | length > 0 %}
{% if field_type == 'radio' %}
<p style="font-weight:600;font-size:14px;margin-bottom:6px;">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</p>
<div class="options-list">
{% for opt in field.options %}
<label>
<input type="radio"
name="{{ field.key }}"
value="{{ opt.value if opt is mapping else opt }}"
{% if field.required and loop.first == false %}required{% endif %}
{% if field.default and (opt.value if opt is mapping else opt) == field.default %}checked{% endif %}>
{{ opt.label if opt is mapping else opt }}
</label>
{% endfor %}
</div>
{% else %}
<label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
<select id="{{ field.key }}" name="{{ field.key }}" {% if field.required %}required{% endif %}>
<option value="">Select an option</option>
{% for opt in field.options %}
<option value="{{ opt.value if opt is mapping else opt }}"
{% if field.default and (opt.value if opt is mapping else opt) == field.default %}selected{% endif %}>
{{ opt.label if opt is mapping else opt }}
</option>
{% endfor %}
</select>
{% endif %}
{% elif field_type == 'textarea' %}
<label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
<textarea id="{{ field.key }}"
name="{{ field.key }}"
{% if field.required %}required{% endif %}
placeholder="{{ field.placeholder | default('') }}"
rows="{{ field.rows | default(4) }}">{{ field.default | default('') }}</textarea>
{% else %}
<label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
<input type="{{ field_type | default('text') }}"
id="{{ field.key }}"
name="{{ field.key }}"
value="{{ field.default | default('') }}"
{% if field.required %}required{% endif %}
{% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
{% if field_type == 'number' %}step="{{ field.step | default('any') }}"{% endif %}
{% if field.min %}min="{{ field.min }}"{% endif %}
{% if field.max %}max="{{ field.max }}"{% endif %}
{% if field.pattern %}pattern="{{ field.pattern }}"{% endif %}>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="submit-btn">{{ submit_text | default('Submit') }}</button>
</form>
</div>
<div class="form-footer">
<p>Powered by <a href="https://agentforms.io" target="_blank" rel="noopener">AgentForms</a></p>
</div>
</div>
<script type="application/json" id="data-hosted-form">{{ {'submit_text': submit_text | default('Submit')} | tojson }}</script>
<script src="/static/js/hosted-form-inline.js"></script>
</body>
</html>