Interactive email template
Event reminder template
Send interactive reminder confirmations and preference updates before events.
Reduce no-shows by confirming attendance and reminder channel in one form.
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)
Event reminder template
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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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>Event reminder</title>
</head>
<body>
<div class="email-card">
<amp-state id="reminderState">
<script type="application/json">
{"channel": "email", "attending": "yes"}
</script>
</amp-state>
<div class="header">
<h1>Your event starts tomorrow</h1>
<p>Confirm attendance and choose how you want reminders.</p>
</div>
<div class="section">
<amp-fit-text width="560" height="42" layout="fixed" max-font-size="24">
Reminder window: 24 hours before session start
</amp-fit-text>
<form method="post" action-xhr="https://example.com/api/event-reminder" target="_top">
<label>Are you attending?</label>
<amp-selector
layout="container"
on="select:AMP.setState({reminderState: {attending: event.targetOption, channel: reminderState.channel}})"
>
<div option="yes" selected class="chip">Yes</div>
<div option="maybe" class="chip">Maybe</div>
<div option="no" class="chip">No</div>
</amp-selector>
<label>Reminder channel</label>
<amp-selector
layout="container"
on="select:AMP.setState({reminderState: {attending: reminderState.attending, channel: event.targetOption}})"
>
<div option="email" selected class="chip">Email</div>
<div option="sms" class="chip">SMS</div>
</amp-selector>
<input type="hidden" name="attending" [value]="reminderState.attending" />
<input type="hidden" name="channel" [value]="reminderState.channel" />
<button class="button" type="submit">Save reminder settings</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-fit-textamp-selectoramp-bind
use cases
Webinar attendance
Reduce no-show rates with final reminder confirmation.
Industry: B2B
Community events
Let members set preferred notification channels.
Industry: Community
gotchas
Channel compliance
SMS reminders need explicit consent in many regions.
Reminder fatigue
Too many reminders can increase opt-outs.
conversion uplift data
No conversion benchmark was attached to this template yet.