8 Free Hotel Booking Forms for Your Website (HTML)
Important - Read First
How to Make These Forms Work
Sign up with a free form backend service such as Formspree or Basin.
Once you create a form on their site, they will give you a unique form endpoint URL (for example, https://formspree.io/f/abcd1234).
In the HTML below, replace YOUR_ENDPOINT_HERE in the <form action="..."> with that endpoint URL.
Publish the page. When someone fills out the form and clicks Submit Reservation, the data will be sent to the endpoint and the backend service will email it to you (or store it in their dashboard).
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
First Name
Last Name
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.
.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-actions{ display:flex; align-items:center; margin-top:0.75rem; } .he-btn{ padding:0.75rem 1rem; border:0; border-radius:6px; cursor:pointer; } .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:600; } .he-mini-link a:hover{ text-decoration:underline; } .he-msg{ font-size:0.9rem; margin-top:0.75rem; } .he-msg--ok{ color:#166534; } .he-msg--err{ color:#991b1b; }
Hotel Reservation Form – code preview
below -->
Copy code
Hotel Reservation Form
First Name
Last Name
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
/* 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; }
/* 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
Hotel Reservation Form
First Name
Last Name
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 */ .he-form { max-width: 720px; margin: 2rem auto; } .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; background: #fff; } .he-actions { display: flex; align-items: center; margin-top: 0.75rem; } .he-btn { padding: 0.75rem 1rem; border: 0; border-radius: 6px; cursor: pointer; } .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: 600; } .he-mini-link a:hover { text-decoration: underline; } .he-msg { font-size: 0.9rem; margin-top: 0.75rem; } .he-msg--ok { color: #166534; } .he-msg--err { color: #991b1b; }
/* Grid */ .he-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .he-field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .he-grid { grid-template-columns: 1fr; } }
/* WIDE variant */ .he-form--wide { max-width: 1040px; } /* wider container */ .he-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.25rem; } /* Map fields across four columns for a 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 */
/* Keep it single-column on smaller screens */ @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; } }
Copy the Wide Form Code
Copy code
Hotel Reservation Form
First Name
Last Name
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
(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
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
Hotel Reservation Form
First Name
Last Name
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; --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; }
(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
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
Hotel Reservation Form
First Name
Last Name
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; }
(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
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
Hotel Reservation Form
First Name
Last Name
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; }
(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
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
Hotel Reservation Form
First Name
Last Name
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; }
(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
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
Hotel Reservation Form
First Name
Last Name
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 ===== */ .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 */
(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
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
Hotel Reservation Form
First Name
Last Name
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.
/* (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; }
(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; }
