Interactive email template

Hotel availability checker

Take dates and guest count in email, then return available room options.

Availability modules help travel brands shorten the gap from browse to booking.

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)

Hotel availability checker

to me · interactive email

Find rooms for your dates

Submit check-in and check-out in-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-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>Hotel availability checker</title>
  </head>
  <body>
    <section class="card">
  <h1>Check room availability</h1>
  <p class="muted">Enter dates and guest count to view available rooms.</p>
  <form method="post" action-xhr="https://amp.mailneo.co/demo/hotel-availability" target="_top">
    <input type="date" name="checkin" required style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;margin-right:6px;" />
    <input type="date" name="checkout" required style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;" />
    <input type="number" name="guests" min="1" max="6" value="2" style="padding:8px;border:1px solid #d6d3d1;border-radius:6px;margin-top:8px;" />
    <input type="submit" value="Search rooms" class="btn" />
    <div submit-success>
      <template type="amp-mustache">
        <div class="item">
          <p style="margin:0;font-weight:700;">{{roomType}}</p>
          <p class="muted" style="margin:6px 0 0;">{{pricePerNight}} per night · {{availability}} left</p>
        </div>
      </template>
    </div>
  </form>
</section>
  </body>
</html>

AMP components used

amp-form

use cases

  • Travel booking reminder

    Convert undecided travelers with quick in-email checks.

    Industry: Hospitality

  • Last-minute deals

    Pair discounted inventory with immediate availability lookup.

gotchas

  • Timezone handling

    Process check-in dates in property-local timezone to avoid date shift bugs.

  • Inventory locking

    Avoid holding rooms until users confirm on the booking engine.

conversion uplift data

No conversion benchmark was attached to this template yet.

citations

related templates

Flight StatusWeather Widget