Interactive email template
Post-purchase feedback form
Collect quality, delivery, and value feedback right after an order arrives.
Use post-delivery timing to capture practical insights while memory is fresh.
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)
Post-purchase feedback 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-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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>Post-purchase feedback</title>
</head>
<body>
<div class="email-card">
<amp-state id="purchaseState">
<script type="application/json">
{"score": ""}
</script>
</amp-state>
<div class="header">
<h1>Tell us how your order went</h1>
<p>Your feedback helps us improve shipping and product quality.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/post-purchase-feedback" target="_top">
<label>Overall experience</label>
<amp-selector
layout="container"
on="select:AMP.setState({purchaseState: {score: event.targetOption}})"
>
<div option="1" class="chip">1</div>
<div option="2" class="chip">2</div>
<div option="3" class="chip">3</div>
<div option="4" class="chip">4</div>
<div option="5" class="chip">5</div>
</amp-selector>
<input type="hidden" name="score" [value]="purchaseState.score" />
<amp-accordion disable-session-states>
<section>
<h4 class="chip" style="cursor: pointer; margin: 0 0 8px;">Rate specific areas</h4>
<div>
<label>
<input class="inline-checkbox" type="checkbox" name="area_packaging" value="yes" />
Packaging quality
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="area_delivery" value="yes" />
Delivery speed
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="area_fit" value="yes" />
Product fit
</label>
</div>
</section>
</amp-accordion>
<label for="pp-comment">Comments</label>
<textarea id="pp-comment" name="comment"></textarea>
<button class="button" type="submit">Send feedback</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bindamp-accordion
use cases
Ecommerce post-delivery
Collect actionable feedback after package delivery events.
Industry: Ecommerce
Subscription box reviews
Capture recurring quality feedback by shipment cycle.
Industry: DTC
gotchas
Timing
If the survey arrives before delivery, responses become noisy.
Response burden
Asking for too many category ratings can lower completion rates.
conversion uplift data
No conversion benchmark was attached to this template yet.