Interactive email template
NPS 1-10 survey
Run an in-email Net Promoter Score survey with one-click score capture.
Use one tap scoring to collect NPS data while intent 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)
NPS 1-10 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>
<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>NPS 1-10 survey</title>
</head>
<body>
<div class="email-card">
<amp-state id="npsState">
<script type="application/json">
{"score": ""}
</script>
</amp-state>
<div class="header">
<h1>How likely are you to recommend Mailneo?</h1>
<p>Select a score from 0 to 10. It takes a few seconds.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/nps" target="_top">
<amp-selector
class="score-grid"
layout="container"
on="select:AMP.setState({npsState: {score: event.targetOption}})"
>
<div option="0" class="chip">0</div>
<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>
<div option="6" class="chip">6</div>
<div option="7" class="chip">7</div>
<div option="8" class="chip">8</div>
<div option="9" class="chip">9</div>
<div option="10" class="chip">10</div>
</amp-selector>
<input type="hidden" name="score" [value]="npsState.score" />
<label for="nps-comment">Why this score? (optional)</label>
<textarea id="nps-comment" name="comment"></textarea>
<button class="button" type="submit">Submit score</button>
<p class="muted">Ask a clear follow-up or NPS alone can be hard to act on.</p>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bind
use cases
Post-onboarding check
Measure promoter sentiment after first value milestone.
Industry: SaaS
Quarterly pulse
Run lightweight recurring sentiment checks with minimal friction.
Industry: Services
gotchas
Comment fatigue
Users may skip open-ended comments unless prompts are short and specific.
Sampling bias
Highly engaged users respond first, so NPS can skew positive without weighting.
conversion uplift data
No conversion benchmark was attached to this template yet.