Interactive email template
Post-event survey
Collect session quality ratings and next-topic requests after an event.
Capture event feedback while recall is fresh and engagement is high.
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-event survey
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-event survey</title>
</head>
<body>
<div class="email-card">
<amp-state id="eventSurveyState">
<script type="application/json">
{"rating": ""}
</script>
</amp-state>
<div class="header">
<h1>Thanks for joining us</h1>
<p>Share quick feedback so we can improve the next event.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/post-event-survey" target="_top">
<label>Overall event rating</label>
<amp-selector
layout="container"
on="select:AMP.setState({eventSurveyState: {rating: 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="rating" [value]="eventSurveyState.rating" />
<amp-accordion disable-session-states>
<section>
<h4 class="chip" style="cursor: pointer; margin: 10px 0 8px;">Tell us more</h4>
<div>
<label>
<input class="inline-checkbox" type="checkbox" name="liked_live_teardown" value="yes" />
Live teardown session
</label>
<label>
<input class="inline-checkbox" type="checkbox" name="liked_benchmarks" value="yes" />
Benchmark session
</label>
<label for="pes-topic">Topic you want next</label>
<input id="pes-topic" name="next_topic" type="text" />
</div>
</section>
</amp-accordion>
<label for="pes-comment">Additional comments</label>
<textarea id="pes-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
Webinar retro
Use feedback to improve session format and promotion timing.
Industry: B2B
Conference planning
Prioritize tracks and speakers for the next edition.
Industry: Events
gotchas
Survey length
Long post-event forms can drop completion after attendee fatigue.
Response delay
Feedback quality declines when surveys are sent too late.
conversion uplift data
No conversion benchmark was attached to this template yet.