Website kits
Restaurant reservations and contact page
Reservation page with a table request form, an address and hours panel with a call button, three directions cards and a six-question FAQ.
When to use it
The page every Book a table button points to, and the one people open when they are already on their way. The request form comes first because that is why most visitors arrive: name, email, phone, date, time, party size and a notes field for allergies and occasions. Beside it, a dark panel repeats the address, hours and phone with a call button, for anyone booking for tonight who should not wait for an email. Directions by train, car and bike follow, then an FAQ answering the questions staff otherwise answer by phone: large groups, walk-ins, dogs, parking, accessibility and cancellations. Edit the time slots and party sizes to match how you actually seat the room, then connect the form to an inbox someone checks during service. If you use a booking service instead, replace the form with its widget but keep the panel and FAQ. Check every FAQ answer against your real house rules before publishing.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 11
- Container (grid) × 1
- Container (grid, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 7
- Heading × 6
- Form × 1
- Icon List × 1
- Button × 1
- Icon Box × 3
- Accordion × 1
Things worth knowing
- The reservation form converts to an Elementor Pro Form with seven fields (text, email, tel, date, two 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 opening hours become an Icon List widget and the three directions cards become Icon Box widgets with arrow, circle and redo icons; swap the icons in the panel for more literal ones if you prefer.
- The bordered Call link becomes a Button widget with its tel: link kept. Below 780px the form and the info panel stack, with the form first.
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>Visit and book — Linden & Salt</title>
<style>
body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#231f1b;background:#f6efe3}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:#231f1b;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px}
h2{font-size:32px;line-height:1.2;margin:0 0 14px}
h3{font-size:20px;line-height:1.3;margin:0 0 6px}
p{font-size:17px;line-height:1.75;color:#6e6358;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a64b2f;margin:0 0 14px}
.intro{padding:64px 0 24px}
.intro .lead{max-width:680px}
.book-sec{padding-top:24px}
.book{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
form{background:#e9dcc6;border-radius:6px;padding:34px;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:14px;font-weight:700;letter-spacing:.04em;color:#231f1b}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6e6358;border-radius:4px;background:#f6efe3;color:#231f1b}
textarea{min-height:110px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:15px 30px;border:0;border-radius:999px;background:#a64b2f;color:#f6efe3;font:inherit;font-size:15px;font-weight:700;letter-spacing:.03em;cursor:pointer}
.info{background:#231f1b;border-radius:6px;padding:34px}
.info h2{color:#f6efe3;font-size:26px}
.info h3{color:#f6efe3;font-size:18px;margin:22px 0 6px}
.info p{color:#e9dcc6;font-size:16px;margin:0}
.hours{display:flex;flex-direction:column;gap:8px}
.hours > div{display:flex;gap:10px;align-items:center;font-size:16px;color:#e9dcc6}
.dot{color:#a64b2f;font-size:10px}
.phone{display:inline-block;margin:22px 0 0;padding:12px 22px;border:1px solid #e9dcc6;border-radius:999px;color:#f6efe3;text-decoration:none;font-weight:700;font-size:15px}
.sand{background:#e9dcc6}
.head{max-width:640px;margin:0 0 36px}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.route{padding:26px 28px;border-radius:6px;background:#f6efe3}
.route-icon{display:inline-block;color:#5f6234;font-size:22px;line-height:1;margin:0 0 12px}
.route p{font-size:16px;margin:0}
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
details{border:1px solid #e9dcc6;border-radius:6px;padding:18px 22px;background:#f6efe3}
summary{font-family:'Playfair Display',Georgia,serif;font-size:19px;font-weight:700;color:#231f1b;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:36px}
h2{font-size:27px}
.book,.routes{grid-template-columns:minmax(0,1fr);gap:24px}
form{grid-template-columns:minmax(0,1fr);padding:24px 18px}
.info{padding:26px 20px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Visit Linden & Salt</p>
<h1>Book a table</h1>
<p class="lead">Send a request and we will confirm by email within a few hours during opening times. For tonight, please call — the phone is answered from 3 pm.</p>
</div>
</section>
<section class="book-sec" id="book">
<div class="wrap book">
<form action="#" method="post">
<div class="field"><label for="r-name">Name</label><input id="r-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="r-email">Email</label><input id="r-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="r-phone">Phone</label><input id="r-phone" name="phone" type="tel" autocomplete="tel"></div>
<div class="field"><label for="r-date">Date</label><input id="r-date" name="date" type="date" required></div>
<div class="field"><label for="r-time">Time</label><select id="r-time" name="time"><option>5:00 pm</option><option>5:30 pm</option><option>6:00 pm</option><option>6:30 pm</option><option>7:00 pm</option><option>7:30 pm</option><option>8:00 pm</option><option>8:30 pm</option><option>9:00 pm</option></select></div>
<div class="field"><label for="r-guests">Guests</label><select id="r-guests" name="guests"><option>1</option><option selected>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7 or more</option></select></div>
<div class="field full"><label for="r-notes">Allergies, occasions or seating requests</label><textarea id="r-notes" name="notes"></textarea></div>
<button class="submit" type="submit">Request a table</button>
</form>
<aside class="info">
<h2>Find us</h2>
<p>214 Larkspur Row<br>Millbrook</p>
<h3>Opening hours</h3>
<div class="hours">
<div><span class="dot">●</span><span>Tue–Thu · 5:00–10:00 pm</span></div>
<div><span class="dot">●</span><span>Fri–Sat · 5:00–11:00 pm</span></div>
<div><span class="dot">●</span><span>Sun · 12:00–9:00 pm</span></div>
<div><span class="dot">○</span><span>Closed Mondays</span></div>
</div>
<h3>Phone and email</h3>
<p>(555) 014-2290 · [email protected]</p>
<a class="phone" href="tel:+15550142290">Call (555) 014-2290</a>
</aside>
</div>
</section>
<section class="sand">
<div class="wrap">
<div class="head">
<p class="eyebrow">Getting here</p>
<h2>How to get to Larkspur Row</h2>
<p>We are on the corner of Larkspur Row and Cooper Street, opposite the library.</p>
</div>
<div class="routes">
<div class="route"><span class="route-icon">→</span><h3>By train</h3><p>Millbrook Station is a two-minute walk. Leave by the Market Street exit and turn left onto Larkspur Row.</p></div>
<div class="route"><span class="route-icon">●</span><h3>By car</h3><p>Free street parking after 6 pm on Cooper Street. The Elm Yard garage is 200 yards away and open until midnight.</p></div>
<div class="route"><span class="route-icon">↻</span><h3>By bike</h3><p>Two bike racks sit outside the front door, and the river path ends one block away.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Before you visit</p>
<h2>Questions we get asked</h2>
</div>
<div class="faq">
<details><summary>Can you take a group of eight or more?</summary><p>Yes. Groups of seven to fourteen sit in the back room with a shared set menu from $65 per guest. Send a request with your date and we will reply with menu options.</p></details>
<details><summary>Do you take walk-ins?</summary><p>The eight bar seats are always kept for walk-ins, first come first served. On Fridays and Saturdays expect a short wait after 7 pm.</p></details>
<details><summary>Can I bring my dog?</summary><p>Well-behaved dogs are welcome on the front terrace from May to September. Inside, only assistance dogs, as our kitchen is open to the room.</p></details>
<details><summary>Is there parking nearby?</summary><p>Street parking on Cooper Street is free after 6 pm. The Elm Yard garage is a three-minute walk and charges a flat evening rate.</p></details>
<details><summary>Is the restaurant wheelchair accessible?</summary><p>Yes. There is step-free access from Larkspur Row, an accessible restroom, and tables at standard height. Let us know when you book and we will seat you near the entrance.</p></details>
<details><summary>What is your cancellation policy?</summary><p>Please give us 24 hours’ notice. For groups of six or more we ask for 48 hours, as we order produce for your table in advance.</p></details>
</div>
</div>
</section>
</body>
</html>