Interactive email template
Product review form
Collect star ratings and review text inside the inbox after purchase.
Post-purchase review requests can capture more feedback when the form lives in email.
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.
Mailneo demo <hello@mailneo.co>
10:42 AM (2 min ago)
Product review 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-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
body { margin: 0; padding: 16px; font-family: Arial, Helvetica, sans-serif; background: #fff7ed; color: #1f2937; }
.card { max-width: 560px; margin: 0 auto; padding: 16px; border: 1px solid #fed7aa; border-radius: 12px; background: #ffffff; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 30px; }
.muted { color: #6b7280; font-size: 13px; line-height: 18px; }
.btn { display: inline-block; margin-top: 10px; padding: 10px 14px; border: 0; border-radius: 8px; background: #f97316; color: #ffffff; text-decoration: none; font-weight: 700; cursor: pointer; }
.pill { display: inline-block; margin-right: 8px; margin-bottom: 8px; padding: 4px 9px; border-radius: 999px; border: 1px solid #fdba74; background: #fff7ed; font-size: 12px; }
.item { padding: 10px; border: 1px solid #fed7aa; border-radius: 10px; margin-top: 8px; }
</style>
<title>Product review form</title>
</head>
<body>
<section class="card">
<h1>How was your order?</h1>
<p class="muted">Select a rating and send your review.</p>
<amp-state id="reviewState">
<script type="application/json">
{"rating": "5"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({reviewState: {rating: event.targetOption}})">
<span option="5" class="pill">★★★★★</span>
<span option="4" class="pill">★★★★☆</span>
<span option="3" class="pill">★★★☆☆</span>
<span option="2" class="pill">★★☆☆☆</span>
<span option="1" class="pill">★☆☆☆☆</span>
</amp-selector>
<form method="post" action-xhr="https://amp.mailneo.co/demo/product-review" target="_top" style="margin-top:10px;">
<input type="hidden" name="rating" value="5" [value]="reviewState.rating" />
<textarea name="comment" rows="3" placeholder="Share your experience" style="width:100%;padding:8px;border:1px solid #d6d3d1;border-radius:6px;"></textarea>
<input type="submit" value="Submit review" class="btn" />
<div submit-success>
<template type="amp-mustache">
<p class="muted">Thanks. Your {{rating}}-star review was submitted.</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
Post-purchase flow
Ask for feedback 7 days after delivery.
Industry: Online stores
Review volume boost
Lower friction by skipping a landing page click.
gotchas
Moderation
Queue review text for moderation before publishing on storefront pages.
Data consent
Include a note on how review data will be displayed and stored.
conversion uplift data
No conversion benchmark was attached to this template yet.