Interactive email template
Webinar RSVP form
Collect webinar confirmations and attendee questions from the inbox.
Shrink the RSVP funnel by letting registrants confirm without page hops.
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)
Webinar RSVP 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>
<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>Webinar RSVP</title>
</head>
<body>
<div class="email-card">
<amp-state id="rsvpState">
<script type="application/json">
{"response": "yes"}
</script>
</amp-state>
<div class="header">
<h1>Join our deliverability teardown webinar</h1>
<p>Confirm your seat in one step and share your top question.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/webinar-rsvp" target="_top">
<label>Will you attend?</label>
<amp-selector
layout="container"
on="select:AMP.setState({rsvpState: {response: event.targetOption}})"
>
<div option="yes" selected class="chip">Yes, I will attend</div>
<div option="maybe" class="chip">Maybe</div>
<div option="no" class="chip">No</div>
</amp-selector>
<input type="hidden" name="response" [value]="rsvpState.response" />
<label for="wr-team">Team size</label>
<select id="wr-team" name="team_size" required>
<option value="">Select one</option>
<option value="solo">Solo</option>
<option value="2-10">2-10</option>
<option value="11-50">11-50</option>
<option value="50+">50+</option>
</select>
<label for="wr-question">Question for the host (optional)</label>
<textarea id="wr-question" name="question"></textarea>
<button class="button" type="submit">Save RSVP</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bind
use cases
Demand gen webinars
Capture high-intent registrations with one in-email form.
Industry: B2B
Customer training
Collect session questions before live office hours.
Industry: SaaS
gotchas
Attendance gap
RSVP confirmations do not guarantee attendance without reminders.
Capacity planning
Maybe responses can inflate expected attendance if not modeled carefully.
conversion uplift data
No conversion benchmark was attached to this template yet.