Interactive email template
Address collection form
Capture shipping or service addresses with optional details hidden behind an accordion.
Collect accurate fulfillment data before checkout reminders and demo shipments.
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)
Address collection 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-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-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>Address collection</title>
</head>
<body>
<div class="email-card">
<div class="header">
<h1>Where should we send your starter kit?</h1>
<p>Confirm shipping details so we can dispatch this week.</p>
</div>
<div class="section">
<form method="post" action-xhr="https://example.com/api/address-collection" target="_top">
<label for="ad-name">Recipient name</label>
<input id="ad-name" name="recipient_name" type="text" required />
<label for="ad-line1">Address line 1</label>
<input id="ad-line1" name="address_line_1" type="text" required />
<label for="ad-city">City</label>
<input id="ad-city" name="city" type="text" required />
<label for="ad-postal">Postal code</label>
<input id="ad-postal" name="postal_code" type="text" required />
<amp-accordion disable-session-states>
<section>
<h4 class="chip" style="cursor: pointer; margin: 0 0 8px;">Add apartment and delivery notes</h4>
<div>
<label for="ad-line2">Address line 2</label>
<input id="ad-line2" name="address_line_2" type="text" />
<label for="ad-notes">Delivery notes</label>
<textarea id="ad-notes" name="delivery_notes"></textarea>
</div>
</section>
</amp-accordion>
<button class="button" type="submit">Save address</button>
</form>
</div>
</div>
</body>
</html>AMP components used
amp-formamp-accordion
use cases
Sample dispatch
Collect addresses for demo kits and onboarding packs.
Industry: SaaS
Ecommerce fulfillment
Capture corrected addresses before repeat shipment campaigns.
Industry: Ecommerce
gotchas
Validation
Address normalization usually needs server-side checks after submit.
Regional formats
One global field layout may not fit every country format.
conversion uplift data
No conversion benchmark was attached to this template yet.