Website kits
Dental appointment request page
Appointment page with an emergency notice, a request form (Elementor Pro Form), opening hours, address, parking and accessibility details.
When to use it
The page every booking button on the clinic site points to. It opens with an emergency notice, before the form, because someone with severe swelling should not be filling in a request and waiting for a callback; the notice tells them when to call 911 and when to call the clinic. The request form asks only what the front desk needs to call back: name, contact details, new or returning patient, reason and a preferred time. Beside it sit the address, opening hours, parking and accessibility notes, which are the questions people phone about when a site leaves them out. Set the form’s email action first, then replace the hours and address. One dental-specific tip: ask patients not to type medical history into the message box, since an ordinary form email is not a secure place for health information, and collect it on your intake forms instead.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- The form converts to an Elementor Pro Form widget with text, tel, email, select, date, textarea and checkbox fields, so it needs Elementor Pro. Its action is removed during conversion; set Actions After Submit (email or webhook) in the form panel after import.
- Every field has a visible label element, so the converted form keeps labels on; field widths are snapped to Elementor’s percentage options, with the name and contact fields in two half-width columns.
- The emergency notice is a styled Container with a Heading and Text Editor widgets, not an Alert widget, so it cannot be dismissed by visitors.
- The opening hours are text rows, not a table, so each day is an editable Text Editor; the two-column layout stacks with the form first below 780px.
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>Dental appointment request page</title>
<style>
body{margin:0;font-family:'Inter',Arial,sans-serif;color:#263538;background:#ffffff}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;color:#0e4f55;margin:0 0 12px;letter-spacing:-.02em}
h1{font-size:44px;line-height:1.1}
h2{font-size:28px;line-height:1.2}
h3{font-size:18px;line-height:1.3}
p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#263538}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:64px 0}
.head{background:#d6efe8;padding:60px 0 54px}
.head-text{max-width:760px}
.lead{font-size:18px;margin:0}
.urgent-sec{padding:48px 0 0}
.main{padding:36px 0 72px}
.urgent{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 24px;border-radius:14px;background:#ffffff;border:2px solid #e07a52}
.urgent-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#e07a52;color:#263538;font-size:20px;font-weight:800}
.urgent h2{font-size:20px;margin:0 0 6px}
.urgent p{margin:0;font-size:15.5px}
.layout{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.panel{padding:32px;border-radius:18px;background:#f2f5f5}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.field{display:flex;flex-direction:column;gap:7px}
.full{grid-column:1 / -1}
label{font-size:14px;font-weight:600;color:#263538}
input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #d6efe8;border-radius:10px;background:#ffffff;color:#263538}
textarea{min-height:110px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start}
.consent input{margin-top:4px}
.consent label{font-weight:400}
button{font:inherit;font-size:15px;font-weight:700;padding:14px 24px;border:0;border-radius:10px;background:#0e4f55;color:#ffffff;cursor:pointer;justify-self:start}
.form-note{font-size:14px;margin:18px 0 0}
.info{display:flex;flex-direction:column;gap:18px}
.box{padding:24px;border-radius:16px;border:1px solid #d6efe8;background:#ffffff}
.box p{font-size:15px;margin:0 0 8px}
.box p:last-child{margin:0}
.day{display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:1.5;padding:7px 0;border-bottom:1px solid #f2f5f5}
.phone{font-family:'Manrope',Arial,sans-serif;font-size:20px;font-weight:800}
.phone a{color:#0e4f55;text-decoration:none}
@media(max-width:780px){.urgent-sec{padding:32px 0 0}.main{padding:28px 0 52px}.head{padding:44px 0 40px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:28px}form{grid-template-columns:1fr}.panel{padding:22px 18px}.urgent{grid-template-columns:1fr;gap:12px;padding:20px}.lead{font-size:17px}}
</style>
</head>
<body>
<section class="head">
<div class="wrap">
<div class="head-text">
<h1>Request an appointment</h1>
<p class="lead">Send us a few details and a preferred time. The front desk will call you back within one working day to confirm a slot. Requests are not confirmed until we have spoken to you.</p>
</div>
</div>
</section>
<section class="urgent-sec">
<div class="wrap">
<div class="urgent">
<span class="urgent-icon">+</span>
<div>
<h2>In pain or need help today?</h2>
<p>Do not use this form. During opening hours, call (555) 014-2283 and say it is urgent. For facial swelling with fever, trouble breathing or swallowing, or an injury after an accident, call 911 or go to the nearest emergency room.</p>
</div>
</div>
</div>
</section>
<section class="main">
<div class="wrap layout">
<div class="panel">
<form action="#" method="post">
<div class="field"><label for="first-name">First name</label><input id="first-name" name="first_name" type="text" autocomplete="given-name" required></div>
<div class="field"><label for="last-name">Last name</label><input id="last-name" name="last_name" type="text" autocomplete="family-name" required></div>
<div class="field"><label for="phone">Phone</label><input id="phone" name="phone" type="tel" autocomplete="tel" required></div>
<div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email"></div>
<div class="field"><label for="patient-type">New or returning?</label><select id="patient-type" name="patient_type"><option>New patient</option><option>Returning patient</option></select></div>
<div class="field"><label for="reason">Reason for visit</label><select id="reason" name="reason"><option>Check-up and cleaning</option><option>A tooth that is bothering me</option><option>Cosmetic consultation</option><option>Orthodontic consultation</option><option>Something else</option></select></div>
<div class="field"><label for="preferred-date">Preferred date</label><input id="preferred-date" name="preferred_date" type="date"></div>
<div class="field"><label for="preferred-time">Preferred time</label><select id="preferred-time" name="preferred_time"><option>Early morning (from 7:30)</option><option>Morning</option><option>Afternoon</option><option>Saturday morning</option></select></div>
<div class="field full"><label for="message">Anything we should know?</label><textarea id="message" name="message" placeholder="For example: booking for two children, or you would like a longer appointment."></textarea></div>
<div class="consent full"><input id="consent" name="consent" type="checkbox" required><label for="consent">I agree to be contacted by phone or email about this request.</label></div>
<button type="submit">Request appointment</button>
</form>
<p class="form-note">Please do not include medical history here. We will send you a secure intake form before your visit.</p>
</div>
<div class="info">
<div class="box">
<h3>Call the front desk</h3>
<p class="phone"><a href="tel:+15550142283">(555) 014-2283</a></p>
<p>[email protected]</p>
</div>
<div class="box">
<h3>Opening hours</h3>
<div class="day"><span>Monday</span><span>8:00–18:00</span></div>
<div class="day"><span>Tuesday</span><span>7:30–18:00</span></div>
<div class="day"><span>Wednesday</span><span>8:00–18:00</span></div>
<div class="day"><span>Thursday</span><span>7:30–18:00</span></div>
<div class="day"><span>Friday</span><span>8:00–18:00</span></div>
<div class="day"><span>Saturday</span><span>9:00–13:00</span></div>
<div class="day"><span>Sunday</span><span>Closed</span></div>
</div>
<div class="box">
<h3>Address and parking</h3>
<p>48 Quillon Row, Suite 2, Fernhollow, OR 97000</p>
<p>Free parking in the lot behind the building, entered from Alder Court. Bus route 14 stops outside.</p>
</div>
<div class="box">
<h3>Accessibility</h3>
<p>Step-free entrance from the parking lot with an automatic door. All three treatment rooms and the restroom are on the ground floor, with room for a wheelchair.</p>
<p>Tell us if you need extra time, an interpreter or a support person with you.</p>
</div>
</div>
</div>
</section>
</body>
</html>