8 Free Hotel Booking Forms for Your Website (HTML)

September 26, 2025

8 Free Hotel Booking Forms for Your Website (HTML)

Important - Read First

How to Make These Forms Work No extra coding is required. Just paste your endpoint URL, and the form is plug-and-play. .he-form-instructions { background: #fff7ed; /* light orange background */ border: 1px solid #fed7aa; /* light orange border */ border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.95rem; color: #374151; } .he-form-instructions h3 { margin-top: 0; font-size: 1.05rem; font-weight: 700; } .he-form-instructions ol { padding-left: 1.25rem; margin: 0.5rem 0 0.75rem 0; } .he-form-instructions code { background: #f3f4f6; padding: 0.15rem 0.3rem; border-radius: 4px; font-size: 0.85rem; } .he-form-note { font-size: 0.85rem; color: #6b7280; }

‍

Booking Form #1 - Basic

Hotel Reservation Form – code preview Copy code <section class="he-form" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2> <form action="#" method="post" novalidate> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-grid"> <div class="he-field"> <label for="checkIn">Check-in Date</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out Date</label> <input type="date" id="checkOut" name="checkOut" required> </div> </div> <div class="he-grid"> <div class="he-field"> <label for="adults">Number of Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Number of Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> </div> <div class="he-field"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4"></textarea> </div> <button class="he-btn" type="submit">Submit Reservation</button> </form> </section> <style> /* Scoped form styles */ .he-form { max-width: 720px; margin: 2rem 0; } .he-field { display: block; margin-bottom: 1rem; } .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; } .he-field input, .he-field select, .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; line-height: 1.4; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px){ .he-grid { grid-template-columns: 1fr; } } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; } </style> /* Emphasized card using light orange + dark gray */ .he-codebox.he-accent{ border: 1px solid #fed7aa; /* light orange border */ background: #fff7ed; /* very light orange bg */ color: #1f2937; /* dark gray text */ border-radius: 10px; padding: 0.875rem 1rem; max-width: 760px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } /* Three-line code preview */ .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem 0; padding: 0.625rem 0.75rem; background: #111827; /* near-black for contrast */ border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; /* ~3 lines at 1.4 line-height */ } .he-codebox__preview code{ display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } /* subtle fade to indicate more content exists */ .he-codebox__preview::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events: none; } .he-codebox__actions{ display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start; } .he-codebox__btn{ appearance: none; border: 1px solid #fb923c; /* orange border */ background: #fdba74; /* light orange fill */ color: #111827; /* dark text for contrast */ font-weight: 700; padding: 0.55rem 0.95rem; border-radius: 8px; cursor: pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background: #fcae66; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background: #f59e0b; /* deeper orange to confirm */ color: #111827; border-color: #ea580c; } .he-codebox__hint{ font-size: 0.875rem; color: #6b7280; } /* Reduce outer spacing on very small screens */ @media (max-width: 480px){ .he-codebox { padding: 0.75rem; } } (function(){ var btn = document.getElementById('heCopyBtn'); var src = document.getElementById('heFormCode'); var preview = document.getElementById('heCodePreview'); var status = document.getElementById('heCopyStatus'); if (!btn || !src || !preview) return; // Build 3-line preview from the hidden source var raw = (src.textContent || '').trim().split(/\r?\n/); var firstThree = raw.slice(0, 3).join('\n'); preview.textContent = firstThree; function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ btn.classList.add('is-copied'); var old = btn.textContent; btn.textContent = 'Copied!'; if (status) status.textContent = 'Code copied to clipboard.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })();

‍

Booking Form #2 - Basic Wider

Copy the Wide Form Code Copy code  <section class="he-form he-form--wide" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2> <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate> <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-grid he-grid--wide"> <div class="he-field"> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input type="tel" id="phone" name="phone" required> </div> <div class="he-field"> <label for="checkIn">Check-in Date</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out Date</label> <input type="date" id="checkOut" name="checkOut" required> </div> <div class="he-field"> <label for="adults">Number of Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Number of Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> <div class="he-field he-field--full"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field he-field--full"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div> </form> </section>  (function(){ var btn = document.getElementById('heCopyBtnWide'); var src = document.getElementById('heFormCodeWide'); var preview = document.getElementById('heCodePreviewWide'); var status = document.getElementById('heCopyStatusWide'); if (!btn || !src || !preview) return; // first 3 lines preview var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ btn.classList.add('is-copied'); var old = btn.textContent; btn.textContent = 'Copied!'; if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })();

‍

Booking Form #3 - Dark Color

Hotel Reservation Form First Name Last Name Email Phone Check-in Date Check-out Date Number of Adults Number of Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #9ca3af; } .he-mini-link a { color: #f59e0b; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #22c55e; } .he-msg--err { color: #ef4444; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Dark Theme (black/gray) ===== */ .he-theme-dark { --he-bg: #0b0d11; /* page section */ --he-card: #0f1216; /* field bg */ --he-border: #2a2f36; /* field border */ --he-text: #e5e7eb; /* primary text */ --he-muted: #9ca3af; /* labels / helper */ --he-focus: #f59e0b; /* accent (orange) */ --he-btn: #1f2937; /* button bg */ --he-btn-hover: #111827; /* button hover */ } .he-theme-dark.he-form { background: var(--he-bg); padding: 1.25rem; border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.4); } .he-theme-dark h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-dark .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-dark .he-field input, .he-theme-dark .he-field select, .he-theme-dark .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-dark .he-field input::placeholder, .he-theme-dark .he-field textarea::placeholder { color: #6b7280; } .he-theme-dark .he-field input:focus, .he-theme-dark .he-field select:focus, .he-theme-dark .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-dark .he-btn { background: var(--he-btn); color: var(--he-text); box-shadow: 0 1px 0 rgba(0,0,0,0.5); } .he-theme-dark .he-btn:hover { background: var(--he-btn-hover); } .he-theme-dark .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; }

Copy the Wide Dark Form Code Copy code  <section class="he-form he-form--wide he-theme-dark" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2>  <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate>  <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-grid he-grid--wide"> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-field"> <label for="checkIn">Check-in Date</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out Date</label> <input type="date" id="checkOut" name="checkOut" required> </div> <div class="he-field"> <label for="adults">Number of Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Number of Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> <div class="he-field he-field--full"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field he-field--full"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div>  <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #9ca3af; } .he-mini-link a { color: #f59e0b; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #22c55e; } .he-msg--err { color: #ef4444; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Dark Theme (black/gray) ===== */ .he-theme-dark { --he-bg: #0b0d11; --he-card: #0f1216; --he-border: #2a2f36; --he-text: #e5e7eb; --he-muted: #9ca3af; --he-focus: #f59e0b; --he-btn: #1f2937; --he-btn-hover: #111827; } .he-theme-dark.he-form { background: var(--he-bg); padding: 1.25rem; border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.4); } .he-theme-dark h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-dark .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-dark .he-field input, .he-theme-dark .he-field select, .he-theme-dark .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-dark .he-field input::placeholder, .he-theme-dark .he-field textarea::placeholder { color: #6b7280; } .he-theme-dark .he-field input:focus, .he-theme-dark .he-field select:focus, .he-theme-dark .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-dark .he-btn { background: var(--he-btn); color: var(--he-text); box-shadow: 0 1px 0 rgba(0,0,0,0.5); } .he-theme-dark .he-btn:hover { background: var(--he-btn-hover); } .he-theme-dark .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; } </style>  (function(){ var btn = document.getElementById('heCopyBtnDarkWide'); var src = document.getElementById('heFormCodeDarkWide'); var preview = document.getElementById('heCodePreviewDarkWide'); var status = document.getElementById('heCopyStatusDarkWide'); if (!btn || !src || !preview) return; // show first 3 lines var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox.he-accent{ border: 1px solid #fed7aa; background: #fff7ed; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 1040px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox__btn{ appearance:none; border:1px solid #fb923c; background:#fdba74; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background:#fcae66; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background:#f59e0b; color:#111827; border-color:#ea580c; } .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Booking Form #4 - Red / Pink

Hotel Reservation Form First Name Last Name Email Phone Check-in Date Check-out Date Number of Adults Number of Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #6b7280; } .he-mini-link a { color: #b91c1c; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #166534; } .he-msg--err { color: #991b1b; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Red Theme ===== */ .he-theme-red { --he-bg: #fff1f2; /* very light rose background */ --he-card: #ffffff; /* field background */ --he-border: #fecaca; /* light red border */ --he-text: #1f2937; /* dark gray text */ --he-muted: #6b7280; /* labels / helper */ --he-focus: #ef4444; /* red focus */ --he-btn: #dc2626; /* red button */ --he-btn-hover: #b91c1c; /* darker red hover */ --he-btn-text: #ffffff; } .he-theme-red.he-form { background: var(--he-bg); padding: 1.25rem; border: 1px solid var(--he-border); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .he-theme-red h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-red .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-red .he-field input, .he-theme-red .he-field select, .he-theme-red .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-red .he-field input::placeholder, .he-theme-red .he-field textarea::placeholder { color: #9ca3af; } .he-theme-red .he-field input:focus, .he-theme-red .he-field select:focus, .he-theme-red .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-red .he-btn { background: var(--he-btn); color: var(--he-btn-text); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .he-theme-red .he-btn:hover { background: var(--he-btn-hover); } .he-theme-red .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; }

Copy the Wide Red Form Code Copy code  <section class="he-form he-form--wide he-theme-red" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2>  <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate>  <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-grid he-grid--wide"> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-field"> <label for="checkIn">Check-in Date</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out Date</label> <input type="date" id="checkOut" name="checkOut" required> </div> <div class="he-field"> <label for="adults">Number of Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Number of Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> <div class="he-field he-field--full"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field he-field--full"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div>  <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #6b7280; } .he-mini-link a { color: #b91c1c; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #166534; } .he-msg--err { color: #991b1b; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Red Theme ===== */ .he-theme-red { --he-bg: #fff1f2; /* very light rose background */ --he-card: #ffffff; /* field background */ --he-border: #fecaca; /* light red border */ --he-text: #1f2937; /* dark gray text */ --he-muted: #6b7280; /* labels / helper */ --he-focus: #ef4444; /* red focus */ --he-btn: #dc2626; /* red button */ --he-btn-hover: #b91c1c; /* darker red hover */ --he-btn-text: #ffffff; } .he-theme-red.he-form { background: var(--he-bg); padding: 1.25rem; border: 1px solid var(--he-border); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .he-theme-red h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-red .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-red .he-field input, .he-theme-red .he-field select, .he-theme-red .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-red .he-field input::placeholder, .he-theme-red .he-field textarea::placeholder { color: #9ca3af; } .he-theme-red .he-field input:focus, .he-theme-red .he-field select:focus, .he-theme-red .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-red .he-btn { background: var(--he-btn); color: var(--he-btn-text); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .he-theme-red .he-btn:hover { background: var(--he-btn-hover); } .he-theme-red .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; } </style>  (function(){ var btn = document.getElementById('heCopyBtnRedWide'); var src = document.getElementById('heFormCodeRedWide'); var preview = document.getElementById('heCodePreviewRedWide'); var status = document.getElementById('heCopyStatusRedWide'); if (!btn || !src || !preview) return; var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox.he-accent{ border: 1px solid #fecaca; background: #fff1f2; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 1040px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox__btn{ appearance:none; border:1px solid #fca5a5; background:#fecaca; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background:#fca5a5; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background:#ef4444; color:#ffffff; border-color:#b91c1c; } .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Booking Form #5 - Blue

Hotel Reservation Form First Name Last Name Email Phone Check-in Date Check-out Date Number of Adults Number of Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #6b7280; } .he-mini-link a { color: #1d4ed8; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #166534; } .he-msg--err { color: #991b1b; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Blue Theme ===== */ .he-theme-blue { --he-bg: #eff6ff; /* very light blue background */ --he-card: #ffffff; /* field background */ --he-border: #bfdbfe; /* light blue border */ --he-text: #1f2937; /* dark gray text */ --he-muted: #6b7280; /* labels / helper */ --he-focus: #3b82f6; /* blue focus */ --he-btn: #2563eb; /* blue button */ --he-btn-hover: #1d4ed8; /* darker blue hover */ --he-btn-text: #ffffff; } .he-theme-blue.he-form { background: var(--he-bg); padding: 1.25rem; border: 1px solid var(--he-border); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .he-theme-blue h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-blue .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-blue .he-field input, .he-theme-blue .he-field select, .he-theme-blue .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-blue .he-field input::placeholder, .he-theme-blue .he-field textarea::placeholder { color: #9ca3af; } .he-theme-blue .he-field input:focus, .he-theme-blue .he-field select:focus, .he-theme-blue .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-blue .he-btn { background: var(--he-btn); color: var(--he-btn-text); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .he-theme-blue .he-btn:hover { background: var(--he-btn-hover); } .he-theme-blue .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; }

Copy the Wide Blue Form Code Copy code  <section class="he-form he-form--wide he-theme-blue" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2>  <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate>  <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-grid he-grid--wide"> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-field"> <label for="checkIn">Check-in Date</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out Date</label> <input type="date" id="checkOut" name="checkOut" required> </div> <div class="he-field"> <label for="adults">Number of Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Number of Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> <div class="he-field he-field--full"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field he-field--full"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div>  <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* ===== Base Layout ===== */ .he-form { max-width: 720px; margin: 2rem auto; } .he-form--wide { max-width: 1040px; } .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } .he-field { display: block; margin-bottom: 0.25rem; } .he-field--full { grid-column: 1 / -1; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; gap: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; font-weight: 700; } .he-mini-link { margin-left: auto; font-size: 0.72rem; line-height: 1; color: #6b7280; } .he-mini-link a { color: #1d4ed8; text-decoration: none; font-weight: 700; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.92rem; margin-top: 0.75rem; } .he-msg--ok { color: #166534; } .he-msg--err { color: #991b1b; } /* Map fields across four columns for denser desktop layout */ .he-grid--wide > .he-field:nth-child(1) { grid-column: span 2; } /* First Name */ .he-grid--wide > .he-field:nth-child(2) { grid-column: span 2; } /* Last Name */ .he-grid--wide > .he-field:nth-child(3) { grid-column: span 2; } /* Email */ .he-grid--wide > .he-field:nth-child(4) { grid-column: span 2; } /* Phone */ .he-grid--wide > .he-field:nth-child(5) { grid-column: span 2; } /* Check-in */ .he-grid--wide > .he-field:nth-child(6) { grid-column: span 2; } /* Check-out */ .he-grid--wide > .he-field:nth-child(7) { grid-column: span 2; } /* Adults */ .he-grid--wide > .he-field:nth-child(8) { grid-column: span 2; } /* Children */ .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } /* Room Type, Requests */ @media (max-width: 900px) { .he-grid--wide { grid-template-columns: 1fr 1fr; } .he-grid--wide > .he-field { grid-column: span 1; } .he-grid--wide > .he-field.he-field--full { grid-column: 1 / -1; } } @media (max-width: 640px) { .he-form--wide { max-width: 100%; padding: 0 1rem; } .he-grid--wide { grid-template-columns: 1fr; } } /* ===== Blue Theme ===== */ .he-theme-blue { --he-bg: #eff6ff; /* very light blue background */ --he-card: #ffffff; /* field background */ --he-border: #bfdbfe; /* light blue border */ --he-text: #1f2937; /* dark gray text */ --he-muted: #6b7280; /* labels / helper */ --he-focus: #3b82f6; /* blue focus */ --he-btn: #2563eb; /* blue button */ --he-btn-hover: #1d4ed8; /* darker blue hover */ --he-btn-text: #ffffff; } .he-theme-blue.he-form { background: var(--he-bg); padding: 1.25rem; border: 1px solid var(--he-border); border-radius: 12px; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .he-theme-blue h2 { color: var(--he-text); margin: 0 0 0.75rem 0; } .he-theme-blue .he-field label { display: block; font-weight: 600; margin-bottom: 0.375rem; color: var(--he-muted); } .he-theme-blue .he-field input, .he-theme-blue .he-field select, .he-theme-blue .he-field textarea { display: block; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--he-border); border-radius: 8px; background: var(--he-card); color: var(--he-text); line-height: 1.4; } .he-theme-blue .he-field input::placeholder, .he-theme-blue .he-field textarea::placeholder { color: #9ca3af; } .he-theme-blue .he-field input:focus, .he-theme-blue .he-field select:focus, .he-theme-blue .he-field textarea:focus { outline: 2px solid var(--he-focus); outline-offset: 0; border-color: var(--he-focus); } .he-theme-blue .he-btn { background: var(--he-btn); color: var(--he-btn-text); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .he-theme-blue .he-btn:hover { background: var(--he-btn-hover); } .he-theme-blue .he-btn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 2px; } </style>  (function(){ var btn = document.getElementById('heCopyBtnBlueWide'); var src = document.getElementById('heFormCodeBlueWide'); var preview = document.getElementById('heCodePreviewBlueWide'); var status = document.getElementById('heCopyStatusBlueWide'); if (!btn || !src || !preview) return; var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox.he-accent-blue{ border: 1px solid #bfdbfe; background: #eff6ff; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 1040px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox__btn{ appearance:none; border:1px solid #93c5fd; background:#bfdbfe; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background:#93c5fd; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background:#3b82f6; color:#ffffff; border-color:#1d4ed8; } .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Booking Form #6 - Tall & Medium Skinny (sidebar)

Hotel Reservation Form First Name Last Name Email Phone Check-in Check-out Adults Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* ===== Tall & Skinny layout ===== */ .he-form { margin: 1.25rem auto; } .he-form--skinny{ max-width: 420px; /* narrow container */ background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1rem 0.875rem; box-shadow: 0 2px 12px rgba(17,24,39,.06); } .he-form--skinny h2{ margin: 0 0 0.75rem 0; font-size: 1.1rem; line-height: 1.25; color: #111827; } /* vertical stack with minimal gaps */ .he-stack{ display: grid; gap: 0.75rem; } /* split rows for small pairs */ .he-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 420px){ .he-split{ grid-template-columns: 1fr; } } .he-field label{ display:block; font-weight:600; margin: 0 0 0.35rem 0; color:#374151; font-size: 0.9rem; } .he-field input, .he-field select, .he-field textarea{ display:block; width:100%; padding: 0.55rem 0.7rem; /* slightly denser */ border: 1px solid #d1d5db; border-radius: 8px; line-height: 1.35; background: #fff; } .he-field textarea{ min-height: 96px; } .he-field input:focus, .he-field select:focus, .he-field textarea:focus{ outline: 2px solid #f59e0b; outline-offset: 0; border-color: #f59e0b; } .he-actions{ display:flex; align-items:center; margin-top: 0.9rem; } .he-btn{ padding: 0.65rem 0.9rem; border:0; border-radius: 8px; cursor:pointer; font-weight:700; background:#111827; color:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); } .he-btn:hover{ background:#0f172a; } .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-mini-link{ margin-left:auto; font-size:0.72rem; line-height:1; color:#6b7280; } .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-mini-link a:hover{ text-decoration: underline; } .he-msg{ font-size:0.9rem; margin: 0.75rem 0 0.25rem; } .he-msg--ok{ color:#166534; } .he-msg--err{ color:#991b1b; }

Copy the Tall & Skinny Form Code Copy code  <section class="he-form he-form--skinny" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2>  <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate>  <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-stack"> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-split"> <div class="he-field"> <label for="checkIn">Check-in</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out</label> <input type="date" id="checkOut" name="checkOut" required> </div> </div> <div class="he-split"> <div class="he-field"> <label for="adults">Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> </div> <div class="he-field"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4" placeholder="Anything we should know?"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div>  <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* ===== Tall & Skinny layout ===== */ .he-form { margin: 1.25rem auto; } .he-form--skinny{ max-width: 420px; /* narrow container */ background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1rem 0.875rem; box-shadow: 0 2px 12px rgba(17,24,39,.06); } .he-form--skinny h2{ margin: 0 0 0.75rem 0; font-size: 1.1rem; line-height: 1.25; color: #111827; } /* vertical stack with minimal gaps */ .he-stack{ display: grid; gap: 0.75rem; } /* split rows for small pairs */ .he-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } @media (max-width: 420px){ .he-split{ grid-template-columns: 1fr; } } .he-field label{ display:block; font-weight:600; margin: 0 0 0.35rem 0; color:#374151; font-size: 0.9rem; } .he-field input, .he-field select, .he-field textarea{ display:block; width:100%; padding: 0.55rem 0.7rem; /* slightly denser */ border: 1px solid #d1d5db; border-radius: 8px; line-height: 1.35; background: #fff; } .he-field textarea{ min-height: 96px; } .he-field input:focus, .he-field select:focus, .he-field textarea:focus{ outline: 2px solid #f59e0b; outline-offset: 0; border-color: #f59e0b; } .he-actions{ display:flex; align-items:center; margin-top: 0.9rem; } .he-btn{ padding: 0.65rem 0.9rem; border:0; border-radius: 8px; cursor:pointer; font-weight:700; background:#111827; color:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); } .he-btn:hover{ background:#0f172a; } .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-mini-link{ margin-left:auto; font-size:0.72rem; line-height:1; color:#6b7280; } .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-mini-link a:hover{ text-decoration: underline; } .he-msg{ font-size:0.9rem; margin: 0.75rem 0 0.25rem; } .he-msg--ok{ color:#166534; } .he-msg--err{ color:#991b1b; } </style>  (function(){ var btn = document.getElementById('heCopyBtnSkinny'); var src = document.getElementById('heFormCodeSkinny'); var preview = document.getElementById('heCodePreviewSkinny'); var status = document.getElementById('heCopyStatusSkinny'); if (!btn || !src || !preview) return; var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox.he-accent{ border: 1px solid #fed7aa; background: #fff7ed; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 520px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox__btn{ appearance:none; border:1px solid #fb923c; background:#fdba74; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background:#fcae66; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background:#f59e0b; color:#111827; border-color:#ea580c; } .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Booking Form #7 - Tall & Skinny (sidebar)

Hotel Reservation Form First Name Last Name Email Phone Check-in Check-out Adults Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* ===== Base skinny (from previous) ===== */ .he-form { margin: 1.25rem auto; } .he-form--skinny{ max-width: 420px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1rem 0.875rem; box-shadow: 0 2px 12px rgba(17,24,39,.06); } .he-form--skinny h2{ margin: 0 0 0.75rem 0; font-size: 1.1rem; line-height: 1.25; color: #111827; } .he-stack{ display: grid; gap: 0.75rem; } .he-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } /* For extra-narrow variant, stack pairs vertically (readable on 315px) */ .he-split--stacked{ grid-template-columns: 1fr; } .he-field label{ display:block; font-weight:600; margin: 0 0 0.35rem 0; color:#374151; font-size: 0.9rem; } .he-field input, .he-field select, .he-field textarea{ display:block; width:100%; padding: 0.55rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; line-height: 1.35; background: #fff; } .he-field textarea{ min-height: 96px; } .he-field input:focus, .he-field select:focus, .he-field textarea:focus{ outline: 2px solid #f59e0b; outline-offset: 0; border-color: #f59e0b; } .he-actions{ display:flex; align-items:center; margin-top: 0.9rem; } .he-btn{ padding: 0.6rem 0.85rem; border:0; border-radius: 8px; cursor:pointer; font-weight:700; background:#111827; color:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); } .he-btn:hover{ background:#0f172a; } .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-mini-link{ margin-left:auto; font-size:0.72rem; line-height:1; color:#6b7280; } .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-mini-link a:hover{ text-decoration: underline; } .he-msg{ font-size:0.9rem; margin: 0.75rem 0 0.25rem; } .he-msg--ok{ color:#166534; } .he-msg--err{ color:#991b1b; } /* ===== 25% skinnier modifier ===== */ .he-form--skinny-25{ max-width: 315px; } /* 420px * 0.75 */

Copy the Extra-Skinny (−25%) Form Code Copy code  <section class="he-form he-form--skinny he-form--skinny-25" aria-labelledby="he-form-title"> <h2 id="he-form-title">Hotel Reservation Form</h2>  <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate>  <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-stack"> <div class="he-field"> <label for="firstName">First Name</label> <input autocomplete="given-name" type="text" id="firstName" name="firstName" required> </div> <div class="he-field"> <label for="lastName">Last Name</label> <input autocomplete="family-name" type="text" id="lastName" name="lastName" required> </div> <div class="he-field"> <label for="email">Email</label> <input autocomplete="email" type="email" id="email" name="email" required> </div> <div class="he-field"> <label for="phone">Phone</label> <input autocomplete="tel" type="tel" id="phone" name="phone" required> </div> <div class="he-split he-split--stacked"> <div class="he-field"> <label for="checkIn">Check-in</label> <input type="date" id="checkIn" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut">Check-out</label> <input type="date" id="checkOut" name="checkOut" required> </div> </div> <div class="he-split he-split--stacked"> <div class="he-field"> <label for="adults">Adults</label> <input type="number" id="adults" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children">Children</label> <input type="number" id="children" name="children" min="0" value="0" required> </div> </div> <div class="he-field"> <label for="roomType">Room Type</label> <select id="roomType" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field"> <label for="requests">Special Requests</label> <textarea id="requests" name="requests" rows="4" placeholder="Anything we should know?"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div>  <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* ===== Base skinny ===== */ .he-form { margin: 1.25rem auto; } .he-form--skinny{ max-width: 420px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1rem 0.875rem; box-shadow: 0 2px 12px rgba(17,24,39,.06); } .he-form--skinny h2{ margin: 0 0 0.75rem 0; font-size: 1.1rem; line-height: 1.25; color: #111827; } .he-stack{ display: grid; gap: 0.75rem; } .he-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .he-split--stacked{ grid-template-columns: 1fr; } /* stacks pairs on extra-narrow */ .he-field label{ display:block; font-weight:600; margin: 0 0 0.35rem 0; color:#374151; font-size: 0.9rem; } .he-field input, .he-field select, .he-field textarea{ display:block; width:100%; padding: 0.55rem 0.7rem; border: 1px solid #d1d5db; border-radius: 8px; line-height: 1.35; background: #fff; } .he-field textarea{ min-height: 96px; } .he-field input:focus, .he-field select:focus, .he-field textarea:focus{ outline: 2px solid #f59e0b; outline-offset: 0; border-color: #f59e0b; } .he-actions{ display:flex; align-items:center; margin-top: 0.9rem; } .he-btn{ padding: 0.6rem 0.85rem; border:0; border-radius: 8px; cursor:pointer; font-weight:700; background:#111827; color:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.06); } .he-btn:hover{ background:#0f172a; } .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-mini-link{ margin-left:auto; font-size:0.72rem; line-height:1; color:#6b7280; } .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-mini-link a:hover{ text-decoration: underline; } .he-msg{ font-size:0.9rem; margin: 0.75rem 0 0.25rem; } .he-msg--ok{ color:#166534; } .he-msg--err{ color:#991b1b; } /* ===== 25% skinnier modifier ===== */ .he-form--skinny-25{ max-width: 315px; } /* 420px * 0.75 */ </style>  (function(){ var btn = document.getElementById('heCopyBtnSkinny25'); var src = document.getElementById('heFormCodeSkinny25'); var preview = document.getElementById('heCodePreviewSkinny25'); var status = document.getElementById('heCopyStatusSkinny25'); if (!btn || !src || !preview) return; var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox.he-accent{ border: 1px solid #fed7aa; background: #fff7ed; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 520px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox__btn{ appearance:none; border:1px solid #fb923c; background:#fdba74; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox__btn:hover{ background:#fcae66; } .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox__btn.is-copied{ background:#f59e0b; color:#111827; border-color:#ea580c; } .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Booking Form #8 - Compact / Dense

Hotel Reservation Form First Name Last Name Email Phone Check-in Date Check-out Date Adults Children Room Type Select Room Type Single Double Suite Special Requests Submit Reservation Powered By: Engine.com Thanks! Your request was sent. Sorry, something went wrong. Please try again. /* Scope everything to .he-form--compact so other forms are untouched */ .he-form--compact{ max-width: 760px; margin: 1.25rem auto; padding: 0.75rem 0.75rem 0.5rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .he-form--compact h2{ margin: 0 0 0.5rem 0; font-size: 1rem; line-height: 1.2; color: #111827; } /* Grid (scoped) */ .he-form--compact .he-grid{ display: grid; } .he-form--compact .he-grid--compact{ grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0.6rem; /* tighter gaps */ } .he-form--compact .he-field--full{ grid-column: 1 / -1; } @media (max-width: 640px){ .he-form--compact .he-grid--compact{ grid-template-columns: 1fr; } } /* Fields (scoped) */ .he-form--compact .he-field{ margin: 0; } .he-form--compact .he-field label{ display:block; margin: 0 0 0.25rem 0; font-weight: 600; color:#374151; font-size: 0.85rem; } .he-form--compact .he-field input, .he-form--compact .he-field select, .he-form--compact .he-field textarea{ width:100%; padding: 0.45rem 0.6rem; /* reduced padding */ border: 1px solid #d1d5db; border-radius: 6px; /* slightly smaller radius */ line-height: 1.25; background: #fff; font-size: 0.92rem; /* slightly smaller text */ } .he-form--compact .he-field textarea{ min-height: 84px; } /* shorter textarea */ .he-form--compact .he-field input:focus, .he-form--compact .he-field select:focus, .he-form--compact .he-field textarea:focus{ outline: 2px solid #f59e0b; outline-offset: 0; border-color: #f59e0b; } /* Actions (scoped) */ .he-form--compact .he-actions{ display:flex; align-items:center; margin-top: 0.6rem; } .he-form--compact .he-btn{ padding: 0.5rem 0.75rem; border:0; border-radius: 6px; cursor:pointer; font-weight:700; background:#111827; color:#fff; } .he-form--compact .he-btn:hover{ background:#0f172a; } .he-form--compact .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-form--compact .he-mini-link{ margin-left:auto; font-size:0.7rem; line-height:1; color:#6b7280; } .he-form--compact .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-form--compact .he-mini-link a:hover{ text-decoration: underline; } /* Messages (scoped) */ .he-form--compact .he-msg{ font-size:0.85rem; margin: 0.5rem 0 0.25rem; } .he-form--compact .he-msg--ok{ color:#166534; } .he-form--compact .he-msg--err{ color:#991b1b; } Copy the Compact Dense Form Code Copy code  <section class="he-form he-form--compact" aria-labelledby="he-form-title-compact"> <h2 id="he-form-title-compact">Hotel Reservation Form</h2> <form action="YOUR_ENDPOINT_HERE" method="post" class="he-form-el" novalidate> <input type="text" name="company_website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true"> <div class="he-grid he-grid--compact"> <div class="he-field"> <label for="firstName8">First Name</label> <input autocomplete="given-name" type="text" id="firstName8" name="firstName" required> </div> <div class="he-field"> <label for="lastName8">Last Name</label> <input autocomplete="family-name" type="text" id="lastName8" name="lastName" required> </div> <div class="he-field"> <label for="email8">Email</label> <input autocomplete="email" type="email" id="email8" name="email" required> </div> <div class="he-field"> <label for="phone8">Phone</label> <input autocomplete="tel" type="tel" id="phone8" name="phone" required> </div> <div class="he-field"> <label for="checkIn8">Check-in Date</label> <input type="date" id="checkIn8" name="checkIn" required> </div> <div class="he-field"> <label for="checkOut8">Check-out Date</label> <input type="date" id="checkOut8" name="checkOut" required> </div> <div class="he-field"> <label for="adults8">Adults</label> <input type="number" id="adults8" name="adults" min="1" value="1" required> </div> <div class="he-field"> <label for="children8">Children</label> <input type="number" id="children8" name="children" min="0" value="0" required> </div> <div class="he-field he-field--full"> <label for="roomType8">Room Type</label> <select id="roomType8" name="roomType" required> <option value="">Select Room Type</option> <option value="single">Single</option> <option value="double">Double</option> <option value="suite">Suite</option> </select> </div> <div class="he-field he-field--full"> <label for="requests8">Special Requests</label> <textarea id="requests8" name="requests" rows="3" placeholder="Optional"></textarea> </div> </div> <div class="he-actions"> <button class="he-btn" type="submit">Submit Reservation</button> <span class="he-mini-link"> Powered By: <a href="https://engine.com/travel-trends-tech/free-hotel-booking-forms">Engine.com</a> </span> </div> <input type="hidden" name="_subject" value="New Hotel Reservation"> <input type="hidden" name="_gotcha" value=""> </form> <p class="he-msg he-msg--ok" hidden>Thanks! Your request was sent.</p> <p class="he-msg he-msg--err" hidden>Sorry, something went wrong. Please try again.</p> </section> <style> /* (same scoped styles as above; kept here so the copied snippet is standalone) */ .he-form--compact{ max-width: 760px; margin: 1.25rem auto; padding: 0.75rem 0.75rem 0.5rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; } .he-form--compact h2{ margin:0 0 0.5rem; font-size:1rem; line-height:1.2; color:#111827; } .he-form--compact .he-grid{ display:grid; } .he-form--compact .he-grid--compact{ grid-template-columns:repeat(2,1fr); gap:0.5rem 0.6rem; } .he-form--compact .he-field--full{ grid-column:1 / -1; } @media (max-width:640px){ .he-form--compact .he-grid--compact{ grid-template-columns:1fr; } } .he-form--compact .he-field{ margin:0; } .he-form--compact .he-field label{ display:block; margin:0 0 0.25rem; font-weight:600; color:#374151; font-size:0.85rem; } .he-form--compact .he-field input, .he-form--compact .he-field select, .he-form--compact .he-field textarea{ width:100%; padding:0.45rem 0.6rem; border:1px solid #d1d5db; border-radius:6px; line-height:1.25; background:#fff; font-size:0.92rem; } .he-form--compact .he-field textarea{ min-height:84px; } .he-form--compact .he-field input:focus, .he-form--compact .he-field select:focus, .he-form--compact .he-field textarea:focus{ outline:2px solid #f59e0b; outline-offset:0; border-color:#f59e0b; } .he-form--compact .he-actions{ display:flex; align-items:center; margin-top:0.6rem; } .he-form--compact .he-btn{ padding:0.5rem 0.75rem; border:0; border-radius:6px; cursor:pointer; font-weight:700; background:#111827; color:#fff; } .he-form--compact .he-btn:hover{ background:#0f172a; } .he-form--compact .he-btn:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; } .he-form--compact .he-mini-link{ margin-left:auto; font-size:0.7rem; line-height:1; color:#6b7280; } .he-form--compact .he-mini-link a{ color:#ea580c; text-decoration:none; font-weight:700; } .he-form--compact .he-mini-link a:hover{ text-decoration:underline; } .he-form--compact .he-msg{ font-size:0.85rem; margin:0.5rem 0 0.25rem; } .he-form--compact .he-msg--ok{ color:#166534; } .he-form--compact .he-msg--err{ color:#991b1b; } </style>  (function(){ var btn = document.getElementById('heCopyBtnCompact'); var src = document.getElementById('heFormCodeCompact'); var preview = document.getElementById('heCodePreviewCompact'); var status = document.getElementById('heCopyStatusCompact'); if (!btn || !src || !preview) return; var raw = (src.textContent || '').trim().split(/\r?\n/); preview.textContent = raw.slice(0, 3).join('\n'); function copy(text){ if (navigator.clipboard && navigator.clipboard.writeText) { return navigator.clipboard.writeText(text); } var ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly',''); ta.style.position = 'absolute'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(e){} document.body.removeChild(ta); return Promise.resolve(); } btn.addEventListener('click', function(){ var code = src.textContent; copy(code).then(function(){ var old = btn.textContent; btn.textContent = 'Copied!'; btn.classList.add('is-copied'); if (status) status.textContent = 'Code copied.'; setTimeout(function(){ btn.textContent = old; btn.classList.remove('is-copied'); if (status) status.textContent = ''; }, 1600); }); }); })(); .he-codebox--compact{ border: 1px solid #fed7aa; background: #fff7ed; color: #1f2937; border-radius: 10px; padding: 0.875rem 1rem; max-width: 800px; box-shadow: 0 1px 0 rgba(17,24,39,0.04); margin: 1rem 0; } .he-codebox--compact .he-codebox__header{ font-size: 0.95rem; margin-bottom: 0.5rem; } .he-codebox--compact .he-codebox__preview{ position: relative; margin: 0.25rem 0 0.75rem; padding: 0.625rem 0.75rem; background: #111827; border: 1px solid #374151; border-radius: 8px; overflow: hidden; line-height: 1.4; max-height: 4.2em; } .he-codebox--compact .he-codebox__preview code{ display:block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.85rem; color: #e5e7eb; white-space: pre; } .he-codebox--compact .he-codebox__preview::after{ content:""; position:absolute; inset:0; background: linear-gradient(to bottom, rgba(17,24,39,0) 40%, rgba(17,24,39,0.85) 100%); pointer-events:none; } .he-codebox--compact .he-codebox__actions{ display:flex; align-items:center; gap:0.75rem; } .he-codebox--compact .he-codebox__btn{ appearance:none; border:1px solid #fb923c; background:#fdba74; color:#111827; font-weight:700; padding:0.55rem 0.95rem; border-radius:8px; cursor:pointer; transition: transform 0.04s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow:0 1px 0 rgba(0,0,0,0.06); } .he-codebox--compact .he-codebox__btn:hover{ background:#fcae66; } .he-codebox--compact .he-codebox__btn:active{ transform: translateY(1px); } .he-codebox--compact .he-codebox__btn.is-copied{ background:#f59e0b; color:#111827; border-color:#ea580c; } .he-codebox--compact .he-codebox__hint{ font-size:0.875rem; color:#6b7280; }

‍

Table Of Contents

Engine streamlines business travel.

Join for Free

Share This Article: