Hotel Booking Confirmed email template
A hotel booking confirmation with a sunny villa pool photo and live headline, stay dates and address, a price summary with room photos and a manage button.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Hotel Booking Confirmed</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-ds-40{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#100e0c!important;}
.ete-content{background-color:#191613!important;}
.ete-text{color:#e2dcd5!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#a69e95!important;}
.ete-link{color:#eca88a!important;}
.ete-border{border-color:#322d28!important;}
.ete-panel{background-color:#221e1a!important;border-color:#322d28!important;}
.ete-btn{background-color:#ea9a78!important;border-color:#ea9a78!important;}
.ete-btn-text{color:#191613!important;}
.ete-btn-outline{border-color:#ea9a78!important;}
.ete-btn-outline-text{color:#ea9a78!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#e2dcd5!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#a69e95!important;}
[data-ogsc] .ete-link{color:#eca88a!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#100e0c!important;}
[data-ogsb] .ete-content{background-color:#191613!important;}
[data-ogsb] .ete-panel{background-color:#221e1a!important;border-color:#322d28!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1ede6;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Booking CA-48213 is confirmed: 3 nights from Friday 12 June. Everything you need is inside. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1ede6;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:6px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="center" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:Georgia, 'Times New Roman', serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#1c1814;">CASA ALBA</span><div class="ete-muted" style="padding-top:6px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;color:#736c66;">Hotel and terrace</div></td></tr>
<tr><td bgcolor="#2c4a55" background="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/hotel-booking-confirmed-hero.jpg" valign="top" style="background-color:#2c4a55;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/hotel-booking-confirmed-hero.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:340px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/hotel-booking-confirmed-hero.jpg" color="#2c4a55" /><v:textbox inset="0,0,0,0"><![endif]--><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-px" valign="middle" align="center" height="340" style="height:340px;padding:48px 6.67%;mso-padding-alt:48px 40px;text-align:center;background-color:rgba(0,0,0,0.4);"><p style="margin:0 0 12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ffffff;text-align:center;">Booking CA-48213</p><h1 class="ete-ds-40" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:40px;line-height:43px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;letter-spacing:-0.5px;font-size:min(40px,6.67vw);line-height:min(43px,7.17vw);overflow-wrap:anywhere;word-break:break-word;">Your stay is confirmed</h1><p style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:16px;text-align:center;">See you soon, {{first_name}}. We will have the terrace ready.</p></td></tr></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-panel" style="padding:24px;background-color:#f7f4ef;border:1px solid #e6e0d7;border-radius:6px;"><h3 class="ete-heading" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:19px;line-height:26px;font-weight:700;color:#1c1814;text-align:left;mso-line-height-rule:exactly;">Your stay</h3><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736c66;">Dates</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#3f3a35;">Friday 12 June to Monday 15 June 2026</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736c66;">Times</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#3f3a35;">Check in from 3:00 pm, check out by 11:00 am</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736c66;">Hotel</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:22px;color:#3f3a35;">Casa Alba Hotel<br><span class="ete-muted" style="color:#736c66;font-size:14px;">Carrer de la Mar 14, 07012 Palma, Spain</span></td></tr></table><div style="padding-top:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/directions" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="8%" strokecolor="#a24a2a" fillcolor="#a24a2a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Get directions</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/directions" style="display:inline-block;background-color:#a24a2a;border:1px solid #a24a2a;line-height:48px;border-radius:4px;color:#ffffff;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Get directions</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:24px;line-height:32px;font-weight:700;color:#1c1814;text-align:left;mso-line-height-rule:exactly;">Booking summary</h2><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#736c66;padding-top:4px;">CA-48213</p><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e6e0d7;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/hotel-booking-confirmed-room.jpg" alt="A made white bed with pillows beside a pendant lamp in a hotel room" width="64" height="64" class="" style="display:block;width:64px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:4px;"></td><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e0d7;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;"><strong>Terrace double room</strong><br><span class="ete-muted" style="color:#736c66;font-size:13px;">3 nights, 2 adults</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e0d7;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;;white-space:nowrap;">€540.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e6e0d7;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/hotel-booking-confirmed-breakfast.jpg" alt="A croissant and a latte with leaf art on a wooden table" width="64" height="64" class="" style="display:block;width:64px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:4px;"></td><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e0d7;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;"><strong>Breakfast for two</strong><br><span class="ete-muted" style="color:#736c66;font-size:13px;">Served daily from 8 to 11 am</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e0d7;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;;white-space:nowrap;">€72.00</td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#736c66;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;">€612.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#736c66;">City tax</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3f3a35;">€18.00</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #1c1814;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1c1814;">Paid</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #1c1814;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1c1814;">€630.00</td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:26px;color:#736c66;text-align:center;">Free cancellation until 9 June. After that date we charge the first night.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/booking/CA-48213" style="height:48px;v-text-anchor:middle;width:190px;" arcsize="8%" strokecolor="#a24a2a" fillcolor="#a24a2a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Manage booking</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/booking/CA-48213" style="display:inline-block;background-color:#a24a2a;border:1px solid #a24a2a;line-height:48px;border-radius:4px;color:#ffffff;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Manage booking</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#736c66;line-height:20px;text-align:center;"><strong>Casa Alba Hotel</strong><br>Carrer de la Mar 14, 07012 Palma, Spain</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#736c66;line-height:20px;text-align:center;padding-top:10px;">You get this email because you booked a stay at Casa Alba Hotel.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#736c66;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#736c66;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#736c66;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#736c66;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
A booking confirmation for boutique hotels, guesthouses, villas and small resorts. Guests open it more than once before the trip, so it starts with a calm photo of the place and then gets out of the way with clear facts.
A short band with a pool and white villa photo carries the headline and the booking number in live text. Below it, a details card lists the dates, check in and check out times and the address with a directions button. A booking summary shows the room and breakfast with small photos, the city tax and the total. A short line explains the cancellation rule, and one button lets the guest manage the booking.
Plain system fonts and one terracotta accent keep it clear and easy to scan.
Fill the dates, rooms and prices from your booking system and send it right after payment.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark
- Photo band with live headline
- Stay details
- Booking summary with photos
- Cancellation note
- Manage button
- Footer
Subject line ideas
- Your stay at Casa Alba is confirmed
- Booking CA-48213: see you on 12 June
- {{first_name}}, your room is ready for June
Preview text idea
Booking CA-48213 is confirmed: 3 nights from Friday 12 June. Everything you need is inside.