Interactive email template
Multi-step form
Break longer forms into short stages so users complete high-value responses inside email.
Short progressive steps reduce fatigue for complex qualification forms.
Inbox preview
Static HTML rendering of the email body. Use it to check the layout before sending the live AMP version to a test inbox.
Gmail · Primary
Mailneo demo <hello@mailneo.co>
10:42 AM (2 min ago)
Multi-step form
to me · interactive email
code snippets
<!doctype html>
<html amp4email>
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
body {
margin: 0;
padding: 20px;
background: #f8fafc;
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
}
.email-card {
max-width: 640px;
margin: 0 auto;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 14px;
overflow: hidden;
}
.header {
background: #fff7ed;
border-bottom: 1px solid #fed7aa;
padding: 20px 24px;
}
.header h1 {
margin: 0;
font-size: 22px;
line-height: 1.3;
color: #9a3412;
}
.header p {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.5;
color: #7c2d12;
}
.section {
padding: 20px 24px;
}
label {
display: block;
margin: 0 0 6px;
font-size: 13px;
line-height: 18px;
font-weight: 700;
color: #334155;
}
input,
textarea,
select {
width: 100%;
box-sizing: border-box;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-size: 14px;
color: #1f2937;
background: #ffffff;
}
textarea {
min-height: 90px;
resize: vertical;
}
.inline-checkbox {
width: auto;
margin: 0 8px 0 0;
vertical-align: middle;
}
.button {
display: inline-block;
border: 0;
border-radius: 8px;
background: #f97316;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 12px 16px;
cursor: pointer;
}
.button.alt {
background: #ea580c;
}
.button.ghost {
background: #ffffff;
color: #9a3412;
border: 1px solid #fdba74;
}
.muted {
margin: 10px 0 0;
font-size: 12px;
line-height: 18px;
color: #64748b;
}
.chip {
display: inline-block;
border: 1px solid #fdba74;
border-radius: 999px;
padding: 8px 12px;
margin: 0 8px 8px 0;
font-size: 13px;
line-height: 1;
color: #9a3412;
background: #fff7ed;
}
amp-selector [option][selected] {
background: #f97316;
color: #ffffff;
border-color: #f97316;
}
.score-grid [option] {
min-width: 40px;
text-align: center;
}
.step-nav {
margin-bottom: 14px;
}
.step-pill {
display: inline-block;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #cbd5e1;
color: #475569;
text-align: center;
line-height: 28px;
font-size: 12px;
margin-right: 8px;
}
.step-pill.active {
border-color: #f97316;
background: #f97316;
color: #ffffff;
}
.note-box {
border: 1px dashed #fdba74;
border-radius: 10px;
padding: 10px 12px;
margin: 12px 0;
background: #fff7ed;
font-size: 13px;
line-height: 1.5;
color: #7c2d12;
}
.session-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px;
background: #ffffff;
}
</style>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<title>Multi-step form</title>
</head>
<body>
<div class="email-card">
<amp-state id="multiStep">
<script type="application/json">
{"step": 1}
</script>
</amp-state>
<div class="header">
<h1>Get your lifecycle audit</h1>
<p>Three short steps. Completion takes around two minutes.</p>
</div>
<div class="section">
<div class="step-nav">
<span class="step-pill" [class]="multiStep.step == 1 ? 'step-pill active' : 'step-pill'">1</span>
<span class="step-pill" [class]="multiStep.step == 2 ? 'step-pill active' : 'step-pill'">2</span>
<span class="step-pill" [class]="multiStep.step == 3 ? 'step-pill active' : 'step-pill'">3</span>
</div>
<form method="post" action-xhr="https://example.com/api/multi-step" target="_top">
<div [hidden]="multiStep.step != 1">
<label for="ms-name">Name</label>
<input id="ms-name" name="name" type="text" required />
<label for="ms-email">Work email</label>
<input id="ms-email" name="email" type="email" required />
<button
class="button"
type="button"
on="tap:AMP.setState({multiStep: {step: 2}})"
>
Next step
</button>
</div>
<div [hidden]="multiStep.step != 2">
<label for="ms-volume">Monthly send volume</label>
<select id="ms-volume" name="send_volume" required>
<option value="">Select one</option>
<option value="under-25k">Under 25k</option>
<option value="25k-250k">25k-250k</option>
<option value="250k+">250k+</option>
</select>
<label for="ms-stack">Current stack</label>
<input id="ms-stack" name="stack" type="text" placeholder="ESP, CRM, data warehouse" required />
<button
class="button ghost"
type="button"
on="tap:AMP.setState({multiStep: {step: 1}})"
>
Back
</button>
<button
class="button alt"
type="button"
on="tap:AMP.setState({multiStep: {step: 3}})"
>
Next
</button>
</div>
<div [hidden]="multiStep.step != 3">
<label for="ms-goal">Main goal this quarter</label>
<textarea id="ms-goal" name="goal" required></textarea>
<button
class="button ghost"
type="button"
on="tap:AMP.setState({multiStep: {step: 2}})"
>
Back
</button>
<button class="button" type="submit">Submit audit request</button>
</div>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-bind
use cases
Enterprise intake
Capture deeper qualification data without a long single-screen form.
Industry: B2B
Agency audits
Agencies can collect account context before a strategy call.
Industry: Agency
gotchas
Step persistence
If a user closes the email mid-flow, AMP state may reset on reopen.
Validation clarity
Errors in earlier hidden steps are easy to miss unless copy is explicit.
conversion uplift data
No conversion benchmark was attached to this template yet.