Interactive email template
Restock alert signup
Collect variant-specific restock requests and confirm alerts directly in email.
Restock emails perform best when users can subscribe to exact sizes and colors quickly.
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)
Restock alert signup
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>Restock alert signup</title>
</head>
<body>
<section class="card">
<h1>Get notified when this item returns</h1>
<p class="muted">Choose your size and we'll send a restock alert.</p>
<amp-state id="stockState">
<script type="application/json">
{"size": "M"}
</script>
</amp-state>
<amp-selector layout="container" on="select:AMP.setState({stockState: {size: event.targetOption}})">
<span option="S" class="pill">S</span>
<span option="M" class="pill">M</span>
<span option="L" class="pill">L</span>
<span option="XL" class="pill">XL</span>
</amp-selector>
<form method="post" action-xhr="https://amp.mailneo.co/demo/restock-alert" target="_top" style="margin-top:10px;">
<input type="hidden" name="size" value="M" [value]="stockState.size" />
<input type="email" name="email" required placeholder="you@example.com" style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;" />
<input type="submit" value="Set alert" class="btn" style="margin-left:8px;" />
<div submit-success>
<template type="amp-mustache">
<p class="muted">Alert set for size {{size}}.</p>
</template>
</div>
</form>
</section>
</body>
</html>AMP components used
use cases
High-demand drops
Collect intent for sold-out colorways and sizes.
Industry: Apparel
Waitlist management
Tag subscribers by variant for precise restock sends.
gotchas
Variant IDs
Map selected size or color to backend SKU IDs before submitting.
Alert frequency
Cap repeated alerts to avoid complaint spikes.
conversion uplift data
No conversion benchmark was attached to this template yet.