Interactive email template
Star rating survey
Collect quick 1-5 star feedback in email with optional context.
Use familiar star inputs when you need rapid qualitative signals.
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)
Star rating 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>Star rating survey</title>
</head>
<body>
<div class="email-card">
<amp-state id="starState">
<script type="application/json">
{"stars": ""}
</script>
</amp-state>
<div class="header">
<h1>Rate your latest campaign setup</h1>
<p>Tap a star score from 1 to 5.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/star-rating" target="_top">
<amp-selector
layout="container"
on="select:AMP.setState({starState: {stars: event.targetOption}})"
>
<div option="1" class="chip">★</div>
<div option="2" class="chip">★★</div>
<div option="3" class="chip">★★★</div>
<div option="4" class="chip">★★★★</div>
<div option="5" class="chip">★★★★★</div>
</amp-selector>
<input type="hidden" name="stars" [value]="starState.stars" />
<label for="star-comment">Optional note</label>
<textarea id="star-comment" name="comment"></textarea>
<button class="button" type="submit">Send rating</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bind
use cases
Support ticket closure
Capture sentiment after ticket resolution.
Industry: SaaS
Course module review
Rate lessons after completion.
Industry: Education
gotchas
Scale meaning
A 4-star score can mean excellent to one user and average to another.
Missing context
If you skip the optional comment box, actionability drops.
conversion uplift data
No conversion benchmark was attached to this template yet.