Interactive email template
Signup form
Drive account creation with an in-email signup experience and interest selection.
Use signup intent in the inbox to reduce friction before onboarding.
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)
Signup 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>Signup form</title>
</head>
<body>
<div class="email-card">
<amp-state id="signupPrefs">
<script type="application/json">
{"track": "weekly-digest"}
</script>
</amp-state>
<div class="header">
<h1>Create your Mailneo workspace</h1>
<p>Start free and pick the content track you want first.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/signup" target="_top">
<label for="su-name">Full name</label>
<input id="su-name" name="full_name" type="text" required />
<label for="su-email">Work email</label>
<input id="su-email" name="email" type="email" required />
<label for="su-password">Password</label>
<input id="su-password" name="password" type="password" minlength="8" required />
<label>Onboarding track</label>
<amp-selector
layout="container"
on="select:AMP.setState({signupPrefs: {track: event.targetOption}})"
>
<div option="weekly-digest" selected class="chip">Weekly digest</div>
<div option="automation" class="chip">Automation setup</div>
<div option="deliverability" class="chip">Deliverability</div>
</amp-selector>
<input type="hidden" name="track" [value]="signupPrefs.track" />
<button class="button" type="submit">Create account</button>
<p class="muted">For regulated industries, teams still prefer signup on your own domain.</p>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-selectoramp-bind
use cases
Product-led growth
PLG teams can convert warm trial interest immediately from lifecycle emails.
Industry: SaaS
Course enrollment
Learning platforms can collect intent track during sign up.
Industry: Education
gotchas
Password handling
Security teams may block in-email password submission and force web redirect.
Client support
Non-AMP clients will only see the HTML fallback and need a web form route.
conversion uplift data
No conversion benchmark was attached to this template yet.