Website kits
Fitness studio free trial booking page
Free trial booking form with class and time choices, location, opening hours and parking details, and a first-visit checklist.
When to use it
The page every other page in the kit links to. The form asks only for what the front desk needs to book a trial: name, email, phone, which class and a preferred time of day, plus a free-text box for experience or injuries so the coach is not surprised on the day. Location, hours and parking sit beside the form on desktop and below it on phones, because the next question after booking is how to get there. The first-visit checklist closes the page and removes the unknowns that make people cancel, such as when to arrive, the waiver and the tour. Replace the address, hours and class options first, then set the form’s email action so requests reach the desk. A tip for studios: if your entrance is hard to find, describe it in the parking card, because first-timers who circle the block twice often go home.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 10
- Container (grid) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 6
- Heading × 5
- Form × 1
- Image × 1
- Icon List × 1
Things worth knowing
- The form converts to an Elementor Pro Form widget with six fields (text, email, phone, two dropdowns and a text area) and keeps the labels and required flags. It needs Elementor Pro, and the original action is removed, so set the submit action (email or webhook) after import.
- The dropdown choices carry over as the field options, one per line, so renaming a class is a change in that field’s settings.
- The first four fields are set to 50% width with no separate mobile width. Set each one to 100% for mobile in the field settings so they do not sit side by side on phones.
- The three info cards convert to Containers with a Heading and a Text Editor each, and the first-visit rows become one Icon List.
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>Fitness studio contact page</title>
<style>
body{margin:0;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#111315;background:#ffffff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:76px 0}
h1,h2,h3{font-family:'Oswald','Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:58px;line-height:1.04;margin:0 0 18px;color:#ffffff}
h2{font-size:38px;line-height:1.1;margin:0 0 16px}
h3{font-size:21px;line-height:1.2;margin:0 0 8px}
p{font-size:16px;line-height:1.75;color:#5d6670;margin:0 0 16px}
.intro{background:#111315;padding:64px 0}
.intro p{color:#e8ebef;font-size:18px;max-width:700px;margin:0}
.eyebrow{font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c8f135;margin:0 0 14px}
.layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:44px;align-items:start}
form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:32px;border:1px solid #e8ebef;border-radius:6px;background:#ffffff}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.full{grid-column:1 / -1}
label{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#24282d}
input,select,textarea{min-width:0;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:13px 14px;border:1px solid #5d6670;border-radius:4px;background:#ffffff;color:#111315}
textarea{min-height:110px;resize:vertical}
button{grid-column:1 / -1;justify-self:start;padding:16px 30px;border:0;border-radius:4px;background:#c8f135;color:#111315;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.info{display:flex;flex-direction:column;gap:18px}
.info > div{padding:24px;border-radius:6px;background:#e8ebef}
.info p{margin:0;font-size:15.5px;color:#24282d}
.tint{background:#e8ebef}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.studio-img{width:100%;height:440px;object-fit:cover;border-radius:6px;display:block;background:#ffffff}
.checks{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.checks > div{display:flex;align-items:flex-start;gap:14px;font-size:16.5px;line-height:1.6;color:#111315;background:#ffffff;padding:14px 16px;border-radius:6px}
.tick{color:#111315;background:#c8f135;font-size:14px;line-height:1;padding:6px 7px;border-radius:4px}
@media(max-width:780px){section{padding:54px 0}.wrap{padding:0 16px}.intro{padding:46px 0}h1{font-size:38px}h2{font-size:28px}.layout,.split{grid-template-columns:minmax(0,1fr);gap:28px}form{grid-template-columns:minmax(0,1fr);padding:20px}.studio-img{height:260px;background:#ffffff}}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Free trial class</p>
<h1>Book your first class on us</h1>
<p>Tell us which class you would like to try and when suits you. We reply within one working day to confirm a time, and there is no card needed to book.</p>
</div>
</section>
<section id="free-trial">
<div class="wrap layout">
<form action="#" method="post">
<div class="field"><label for="trial-name">Full name</label><input id="trial-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="trial-email">Email</label><input id="trial-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="trial-phone">Phone</label><input id="trial-phone" name="phone" type="tel" autocomplete="tel"></div>
<div class="field"><label for="trial-class">Class you would like to try</label><select id="trial-class" name="class"><option>Strength</option><option>Conditioning</option><option>Ride</option><option>Mobility</option><option>Not sure yet</option></select></div>
<div class="field full"><label for="trial-time">Best time for you</label><select id="trial-time" name="time"><option>Weekday early morning (6:00 to 7:15 am)</option><option>Weekday late morning or lunchtime</option><option>Weekday evening (5:30 pm or later)</option><option>Weekend morning</option></select></div>
<div class="field full"><label for="trial-notes">Anything the coach should know?</label><textarea id="trial-notes" name="notes" placeholder="Training experience, injuries, or questions about the class"></textarea></div>
<button type="submit">Request my free class</button>
</form>
<aside class="info">
<div><h3>Location</h3><p>Northline Studio<br>418 Foundry Lane, Unit 2<br>Riverton, OR 97000<br>(555) 014-2290 · [email protected]</p></div>
<div><h3>Opening hours</h3><p>Monday to Friday: 5:45 am to 8:00 pm<br>Saturday and Sunday: 8:30 am to 12:00 pm<br>The front desk is staffed whenever a class is running.</p></div>
<div><h3>Parking and transit</h3><p>Free parking in the shared lot behind the building; use the rear entrance. Bike racks by the front door. The number 12 bus stops at Foundry and 3rd, a two-minute walk.</p></div>
</aside>
</div>
</section>
<section class="tint">
<div class="wrap split">
<img class="studio-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/studio-floor.jpg" width="1600" height="1000" alt="Empty training floor with racks, rowers and kettlebells lined up along one wall">
<div>
<h2>Your first visit</h2>
<p>The trial class is a normal class with a little extra attention. Here is what to expect.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Arrive ten minutes early and check in at the front desk</span></div>
<div><span class="tick">✓</span><span>Fill in a short waiver on the tablet at reception</span></div>
<div><span class="tick">✓</span><span>A coach shows you the changing rooms and the training floor</span></div>
<div><span class="tick">✓</span><span>You take part in the full class, with options for every exercise</span></div>
<div><span class="tick">✓</span><span>Afterwards, ask about memberships, or simply head home</span></div>
</div>
</div>
</div>
</section>
</body>
</html>