Website kits
Salon booking page
Salon booking page with an appointment request form (service, stylist, day, time), hours and call panel, three policy cards 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 an appointment button leads to. The request form comes first and asks only what the desk needs to offer a slot: name, mobile, email, service, preferred stylist, preferred day and time window, whether the person is a new client, and a notes box for hair history and allergies. Beside it, a dark panel repeats the address, hours and phone with a call button for anyone who wants something within 24 hours. The cancellation, late arrival and no-show rules come next in three short cards, stated before anyone books so nobody is surprised by a charge. The FAQ answers the questions the desk hears every day, from patch tests to gift cards. Edit the service and stylist lists to match your menu and team, then connect the form to an inbox that is checked every opening day. If you use online booking software, link the button to it and keep the policies and FAQ here.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 12
- 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 request form converts to an Elementor Pro Form with nine fields — text, tel, email, four selects with their options, a checkbox and a textarea — with the labels kept and the two-column rows at 50% width. 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, the bordered Call link becomes a Button widget with its tel: link kept, and the three policy cards become Icon Box widgets with undo, arrow and times icons.
- Below 780px the form fields go to one column and the info panel moves below the form.
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 an appointment — Linnea Hair & Skin</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2f2635;background:#faf8f5}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#2f2635;font-weight:600}
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.7;color:#6d6570;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4e6e61;margin:0 0 14px}
.intro{padding:64px 0 24px}
.intro .lead{max-width:700px}
.book-sec{padding-top:24px}
.book{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.form-card{background:#ede6dc;border-radius:16px;padding:34px}
form{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;color:#2f2635}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6d6570;border-radius:8px;background:#faf8f5;color:#2f2635}
textarea{min-height:110px;resize:vertical}
.check{grid-column:1 / -1;display:flex;align-items:center;gap:10px}
.check input{width:18px;height:18px;margin:0;padding:0}
.check label{font-weight:600}
.submit{grid-column:1 / -1;justify-self:start;padding:15px 30px;border:0;border-radius:10px;background:#4e6e61;color:#faf8f5;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.info{background:#2f2635;border-radius:16px;padding:34px}
.info h2{color:#faf8f5;font-size:26px}
.info h3{color:#faf8f5;font-size:18px;margin:22px 0 8px}
.info p{color:#ede6dc;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:#ede6dc}
.dot{color:#dfe8e2;font-size:10px}
.phone{display:inline-block;margin:24px 0 0;padding:12px 22px;border:1px solid #dfe8e2;border-radius:10px;color:#faf8f5;text-decoration:none;font-weight:700;font-size:15px}
.sage{background:#dfe8e2}
.head{max-width:660px;margin:0 0 36px}
.policies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.policy{padding:28px 26px;border-radius:14px;background:#faf8f5}
.policy-icon{display:inline-block;color:#4e6e61;font-size:22px;line-height:1;margin:0 0 12px}
.policy p{font-size:15px;margin:0}
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
details{border:1px solid #ede6dc;border-radius:12px;padding:18px 22px;background:#faf8f5}
summary{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;color:#2f2635;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:38px}
h2{font-size:27px}
.book,.policies{grid-template-columns:minmax(0,1fr);gap:24px}
.policies{gap:18px}
form{grid-template-columns:minmax(0,1fr)}
.form-card{padding:24px 18px}
.info{padding:26px 20px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Appointments</p>
<h1>Book an appointment</h1>
<p class="lead">Tell us what you would like and when suits you. The desk replies by text within one working day with a confirmed time. For anything in the next 24 hours, please call instead.</p>
</div>
</section>
<section class="book-sec" id="book">
<div class="wrap book">
<div class="form-card">
<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-phone">Mobile number</label><input id="b-phone" name="phone" type="tel" autocomplete="tel" required></div>
<div class="field full"><label for="b-email">Email</label><input id="b-email" name="email" type="email" autocomplete="email"></div>
<div class="field"><label for="b-service">Service</label><select id="b-service" name="service"><option>Cut and blow-dry</option><option>Restyle or big change</option><option>Curly cut</option><option>Short or clipper cut</option><option>Blow-dry or occasion hair</option><option>Root touch-up</option><option>Full color or foils</option><option>Balayage</option><option>Free consultation</option><option>Facial</option><option>Nails</option><option>Brows or lash tint</option></select></div>
<div class="field"><label for="b-stylist">Stylist</label><select id="b-stylist" name="stylist"><option>First available</option><option>Ada Moreno, creative director</option><option>Jonah Reyes, senior colorist</option><option>Mei Tanaka, stylist</option><option>Treatment room therapist</option></select></div>
<div class="field"><label for="b-day">Preferred day</label><select id="b-day" name="day"><option>Any day</option><option>Tuesday</option><option>Wednesday</option><option>Thursday</option><option>Friday</option><option>Saturday</option></select></div>
<div class="field"><label for="b-time">Preferred time</label><select id="b-time" name="time"><option>Morning, 9 am–12 pm</option><option>Afternoon, 12–4 pm</option><option>Evening, 4–8 pm (Thu–Fri)</option></select></div>
<div class="check"><input id="b-new" name="new_client" type="checkbox" value="yes"><label for="b-new">I am a new client (20% off my first visit)</label></div>
<div class="field full"><label for="b-notes">Anything we should know? Hair history, allergies, photos you like</label><textarea id="b-notes" name="notes"></textarea></div>
<button class="submit" type="submit">Request appointment</button>
</form>
</div>
<aside class="info" id="visit">
<h2>Find us</h2>
<p>27 Quarry Hill Road<br>Ellisford</p>
<h3>Opening hours</h3>
<div class="hours">
<div><span class="dot">●</span><span>Tue–Wed · 9:00 am–6:00 pm</span></div>
<div><span class="dot">●</span><span>Thu–Fri · 9:00 am–8:00 pm</span></div>
<div><span class="dot">●</span><span>Sat · 8:30 am–4:00 pm</span></div>
<div><span class="dot">○</span><span>Closed Sundays and Mondays</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="sage">
<div class="wrap">
<div class="head">
<p class="eyebrow">Our policies</p>
<h2>Cancellations and running late</h2>
<p>Most appointments are booked weeks ahead, so a late change usually means a chair sits empty that someone else wanted.</p>
</div>
<div class="policies">
<div class="policy"><span class="policy-icon">↺</span><h3>Cancel or move</h3><p>Free with 24 hours’ notice by phone, text or email. For color and treatments over two hours, please give us 48 hours.</p></div>
<div class="policy"><span class="policy-icon">→</span><h3>Running late</h3><p>Up to 15 minutes late, we will do all we can in the time left. Later than that, we may need to shorten the service or rebook you.</p></div>
<div class="policy"><span class="policy-icon">✕</span><h3>Missed appointments</h3><p>A no-show or a same-day cancellation is charged at 50% of the booked service. We waive it once, no questions asked.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Good to know</p>
<h2>Questions before you book</h2>
</div>
<div class="faq">
<details><summary>Do I need a patch test?</summary><p>Yes, for any color, lash tint or brow tint if you are new to us or have not had one in six months. Walk in any time we are open, at least 48 hours before your appointment. It takes five minutes and is free.</p></details>
<details><summary>How do I know which stylist level to book?</summary><p>For a regular cut or blow-dry, any level will do a great job. For a big change, curls or color correction, choose a senior stylist or creative director, or pick “first available” and we will match you.</p></details>
<details><summary>Can I book a cut and a treatment in one visit?</summary><p>Yes. Mention both in the notes and we will line them up back to back, for example a manicure while your color develops.</p></details>
<details><summary>Do you cut children’s hair?</summary><p>We cut hair for children aged three and over, on weekdays before 4 pm and on Saturday mornings. Kids’ cuts are priced from $28.</p></details>
<details><summary>Is the salon accessible?</summary><p>There is step-free access from Quarry Hill Road, an accessible restroom and a backwash basin that can be used from your own wheelchair. Let us know when you book and we will keep the front station free.</p></details>
<details><summary>Do you sell gift cards?</summary><p>Yes, in any amount from $25, at the desk or by phone. They are valid for 12 months on every service and product.</p></details>
</div>
</div>
</section>
</body>
</html>
