Website kits
Hotel booking and contact page
Booking request page with a dates, guests and room type form, a front desk panel with a call button, directions, a check-in policy and a six-question FAQ.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page every Book direct button points to. The booking request form asks for exactly what you need to quote a stay — check-in and check-out dates, adults, children, room type and a message for arrival times or occasions — and the line above it says how fast you reply and that nothing is charged yet, which is what makes people willing to send it. Beside the form, a dark panel gives the address, front desk hours and a call button for guests who would rather talk. Directions by train, car and ferry come next, then the check-in policy, and an FAQ covering parking, dogs, children, late arrival, accessibility and cancellations, the questions a front desk answers every day. Connect the form to an inbox someone watches during the day, or replace it with your booking engine’s widget and keep the rest. Make sure the late-arrival answer matches what your team actually does after hours.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 13
- Container (grid) × 2
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 9
- Heading × 7
- Form × 1
- Icon List × 2
- Button × 1
- Icon Box × 3
- Image × 1
- Accordion × 1
Things worth knowing
- The booking form converts to an Elementor Pro Form with eight fields (text, email, two dates, three selects with their options and a textarea) and keeps the labels. It needs Elementor Pro, and the original action is removed, so set Actions After Submit, such as Email, after import.
- The six questions are details/summary pairs, so they convert to one Accordion widget with six items.
- The front desk hours and the check-in policy become two Icon List widgets, and the three directions cards become Icon Box widgets with arrow, circle and redo icons.
- The bordered Call link becomes a Button widget with its tel: link kept. Below 780px the form and the front desk panel stack with the form first, and the form fields go to one column.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Book and contact — Calder House</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2b2430;background:#f7f2ea}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
h1,h2,h3{font-family:'Cormorant Garamond',Garamond,Georgia,serif;color:#2b2430;font-weight:600}
h1{font-size:58px;line-height:1.06;letter-spacing:-.01em;margin:0 0 16px}
h2{font-size:40px;line-height:1.12;margin:0 0 14px}
h3{font-size:24px;line-height:1.25;margin:0 0 8px}
p{font-size:17px;line-height:1.75;color:#6b5f62;margin:0 0 16px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8f4a4a;margin:0 0 14px}
.intro{padding:64px 0 24px}
.intro .lead{max-width:700px;font-size:18px}
.book-sec{padding-top:24px}
.book{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
form{background:#ebe1d3;padding:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1 / -1}
label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2b2430}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6b5f62;border-radius:3px;background:#f7f2ea;color:#2b2430}
textarea{min-height:120px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:15px 32px;border:0;border-radius:3px;background:#8f4a4a;color:#f7f2ea;font:inherit;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.info{background:#2b2430;padding:36px}
.info h2{color:#f7f2ea;font-size:32px}
.info h3{color:#f7f2ea;font-size:21px;margin:26px 0 8px}
.info p{color:#ebe1d3;font-size:16px;margin:0}
.desk{display:flex;flex-direction:column;gap:8px}
.desk > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#ebe1d3}
.dot{color:#7d8a6e;font-size:10px}
.phone{display:inline-block;margin:26px 0 0;padding:12px 22px;border:1px solid #ebe1d3;border-radius:3px;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.06em}
.oat{background:#ebe1d3}
.head{max-width:660px;margin:0 0 36px}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.route{padding:28px 26px;background:#f7f2ea}
.route-icon{display:inline-block;color:#8f4a4a;font-size:20px;line-height:1;margin:0 0 14px}
.route p{font-size:15px;margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.photo{width:100%;height:440px;object-fit:cover;display:block;background:#ebe1d3}
.policy{display:flex;flex-direction:column;gap:12px;margin:6px 0 0}
.policy > div{display:flex;gap:14px;align-items:center;font-size:16px;line-height:1.55;color:#2b2430}
.tick{color:#7d8a6e;font-size:14px}
.faq{display:flex;flex-direction:column;gap:12px;max-width:840px}
details{border:1px solid #ebe1d3;padding:20px 24px;background:#f7f2ea}
summary{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-size:22px;font-weight:600;color:#2b2430;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 12px}
.book-sec{padding-top:16px}
h1{font-size:40px}
h2{font-size:31px}
.book,.routes,.split{grid-template-columns:minmax(0,1fr);gap:24px}
form{grid-template-columns:minmax(0,1fr);padding:24px 18px}
.info{padding:28px 20px}
.photo{height:260px}
summary{font-size:20px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Book direct</p>
<h1>Send us your dates</h1>
<p class="lead">Tell us when you would like to come and who is coming. We reply within four hours between 8 am and 8 pm with availability, the exact price and a link to confirm. Nothing is charged until you confirm.</p>
</div>
</section>
<section class="book-sec" id="book">
<div class="wrap book">
<form action="#" method="post">
<div class="field"><label for="b-name">Name</label><input id="b-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="b-email">Email</label><input id="b-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="b-arrive">Check-in date</label><input id="b-arrive" name="check_in" type="date" required></div>
<div class="field"><label for="b-leave">Check-out date</label><input id="b-leave" name="check_out" type="date" required></div>
<div class="field"><label for="b-adults">Adults</label><select id="b-adults" name="adults"><option>1</option><option selected>2</option><option>3</option><option>4</option></select></div>
<div class="field"><label for="b-children">Children</label><select id="b-children" name="children"><option selected>None</option><option>1 child</option><option>2 children</option></select></div>
<div class="field full"><label for="b-room">Room type</label><select id="b-room" name="room"><option>No preference</option><option>Garden Double</option><option>Courtyard Twin</option><option>Harbor View King</option><option>Loft Suite</option></select></div>
<div class="field full"><label for="b-message">Arrival time, occasions or requests</label><textarea id="b-message" name="message"></textarea></div>
<button class="submit" type="submit">Send booking request</button>
</form>
<aside class="info">
<h2>Calder House</h2>
<p>12 Quayside Terrace<br>Wrenmouth</p>
<h3>Front desk</h3>
<div class="desk">
<div><span class="dot">●</span><span>Staffed daily 7:30 am–9:00 pm</span></div>
<div><span class="dot">●</span><span>Phone answered 8:00 am–8:00 pm</span></div>
<div><span class="dot">○</span><span>Night contact number given at check-in</span></div>
</div>
<h3>Phone and email</h3>
<p>(555) 018-4471 · [email protected]</p>
<a class="phone" href="tel:+15550184471">Call (555) 018-4471</a>
</aside>
</div>
</section>
<section class="oat" id="getting-here">
<div class="wrap">
<div class="head">
<p class="eyebrow">Getting here</p>
<h2>How to find Quayside Terrace</h2>
<p>We are the gray stone house with the dark blue door, halfway along Quayside Terrace, between the harbor and the old customs house.</p>
</div>
<div class="routes">
<div class="route"><span class="route-icon">→</span><h3>By train</h3><p>Wrenmouth Station is a flat ten-minute walk. Follow Harbor Street downhill and turn right at the customs house. A taxi costs about $9.</p></div>
<div class="route"><span class="route-icon">●</span><h3>By car</h3><p>Take the harbor exit from the coast road. We have four free spaces behind the house, booked in order; otherwise the Long Quay lot is $14 a day.</p></div>
<div class="route"><span class="route-icon">↻</span><h3>By ferry</h3><p>The Holm Island ferry docks at the north quay, five minutes’ walk away. Tell us your sailing and we will look out for you.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap split">
<div>
<p class="eyebrow">Check-in policy</p>
<h2>Arriving at Calder House</h2>
<p>Someone from our team checks every guest in personally. If your room is ready early, it is yours; if not, leave your bags with us and start exploring.</p>
<div class="policy">
<div><span class="tick">✓</span><span>Check-in 3:00–9:00 pm; bags can be left from 9:00 am</span></div>
<div><span class="tick">✓</span><span>Check-out by 11:00 am, or noon for direct bookings on request</span></div>
<div><span class="tick">✓</span><span>Photo ID and the card used to book are needed at check-in</span></div>
<div><span class="tick">✓</span><span>Arriving after 9:00 pm? Tell us by 5:00 pm and we will leave a key</span></div>
</div>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/hotel/exterior.jpg" width="1600" height="1000" alt="Tall gray stone townhouse hotel with white sash windows and a dark blue front door on a quiet harbor street at early evening">
</div>
</section>
<section class="oat">
<div class="wrap">
<div class="head">
<p class="eyebrow">Before you arrive</p>
<h2>Questions guests ask us</h2>
</div>
<div class="faq">
<details><summary>Is there parking?</summary><p>We have four free spaces behind the house, allocated in the order bookings arrive; ask for one in your booking request. If they are taken, the Long Quay lot is a three-minute walk and costs $14 for 24 hours.</p></details>
<details><summary>Can I bring my dog?</summary><p>Yes, in two of our Garden Doubles, which open onto the garden. There is a $25 charge per stay for extra cleaning, and we provide a bed, a bowl and a towel. Dogs are welcome in the lounge but not in the breakfast room.</p></details>
<details><summary>Do you welcome children?</summary><p>Children of any age are welcome in the Loft Suites, where the sofa bed sleeps two. We can add a travel crib for babies under two in any room at no charge. Children’s breakfast is $12 each.</p></details>
<details><summary>What if I arrive late?</summary><p>The front desk is staffed until 9:00 pm. If you will be later, let us know by 5:00 pm on the day and we will leave your key in a coded lockbox by the front door and send you the code by text.</p></details>
<details><summary>Is the house accessible?</summary><p>The six Garden Doubles are on the ground floor with a step-free route from the street, and one has grab rails and a wide shower. The upper floors are reached by stairs only, as the house has no elevator.</p></details>
<details><summary>How do I cancel or change a booking?</summary><p>Reply to your confirmation email or call us. Flexible rates can be changed or cancelled free until 3:00 pm three days before arrival; after that we charge the first night. Non-refundable rates cannot be cancelled but can be moved once.</p></details>
</div>
</div>
</section>
</body>
</html>
