Website kits
SaaS demo request page
Contact page with a demo request form, sales, support and phone contacts, an address and three response time boxes.
When to use it
A contact page built around the demo request, which is how most software products above a certain price are actually sold. The hero says exactly what the demo involves and how long it takes, so the form reads as a booking rather than a request to be contacted by sales. The form asks only for what is needed to prepare a useful call: name, work email, company, team size and what to cover. Beside it, separate sales and support addresses stop existing customers from landing in the sales queue, and the note for customers points them to in-app help. The response time boxes set expectations per plan; publish only times your team can keep on a bad week. Replace the email addresses, phone number and address first, then connect the form to your CRM or inbox. Adding a time zone to the hours avoids a lot of missed calls.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 7
- Container (grid, 2 columns) × 1
- 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 × 6
- Heading × 4
- Image × 1
- Form × 1
- Icon List × 1
- Icon Box × 3
Things worth knowing
- The form converts to an Elementor Pro Form with five fields (text, email, text, select and textarea) and a Request a demo button. It needs Elementor Pro, and the original action is removed, so set an email or CRM action after import.
- The three contact lines become one Icon List widget, and each row keeps its mailto: or tel: link.
- The three response time cards convert to Icon Box widgets, and the hero photo becomes an Image widget.
- The form and the contact column stack below 780px, and the form switches from two columns of fields to one.
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 a demo — Corvane</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#16152e;background:#ffffff}
h1,h2,h3{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;color:#16152e;letter-spacing:-.025em}
h1{font-size:48px;line-height:1.1;margin:0 0 18px}
h2{font-size:30px;line-height:1.2;margin:0 0 14px}
h3{font-size:19px;line-height:1.3;margin:0 0 8px}
p{font-size:16.5px;line-height:1.75;color:#5c5b78;margin:0 0 18px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#4f46e5;margin:0 0 12px}
.hero{background:#eeecfd;padding:72px 0}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero .lead{font-size:18px;margin:0}
.hero img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:16px;background:#ffffff}
.main{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:36px;border:1px solid #eeecfd;border-radius:16px;background:#ffffff}
.field{display:flex;flex-direction:column;gap:7px}
.wide{grid-column:1 / -1}
label{font-size:14px;font-weight:600;color:#16152e}
input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #5c5b78;border-radius:9px;background:#ffffff;color:#16152e;width:100%}
textarea{min-height:120px;resize:vertical}
button{grid-column:1 / -1;justify-self:start;padding:15px 28px;border:0;border-radius:10px;background:#4f46e5;color:#ffffff;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.privacy{grid-column:1 / -1;font-size:13.5px;margin:0}
.side h2{font-size:24px}
.lines{display:flex;flex-direction:column;gap:14px;margin:0 0 34px}
.lines div{display:flex;gap:12px;font-size:15.5px;line-height:1.6;color:#16152e}
.lines span:first-child{color:#4f46e5;font-weight:700}
.lines a{color:#4f46e5;text-decoration:none;font-weight:600}
.address{font-size:15px;margin:0}
.tint{background:#eeecfd}
.center{text-align:center}
.center > p{max-width:620px;margin:0 auto 36px}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.time{padding:28px;border-radius:14px;background:#ffffff}
.time .icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:#16152e;color:#2fd39a;font-size:19px;margin-bottom:16px}
.time p{margin:0;font-size:15.5px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:52px 0}
.hero .wrap,.main,.times{grid-template-columns:1fr}
.hero .wrap{gap:28px}
.main{gap:40px}
h1{font-size:34px}
h2{font-size:25px}
form{grid-template-columns:1fr;padding:22px 18px}
button{justify-self:stretch}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Book a demo</p>
<h1>See Corvane with your own projects in 30 minutes</h1>
<p class="lead">Tell us how your team works today. We will set up a sample board that looks like your work, walk you through it on a video call and answer pricing questions on the spot.</p>
</div>
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/saas/team-planning.jpg" width="1600" height="1000" alt="Small team around a table with laptops reviewing a project plan in a bright office">
</div>
</section>
<section>
<div class="wrap main">
<form action="#" method="post">
<div class="field">
<label for="demo-name">Full name</label>
<input id="demo-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="demo-email">Work email</label>
<input id="demo-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field">
<label for="demo-company">Company</label>
<input id="demo-company" name="company" type="text" autocomplete="organization">
</div>
<div class="field">
<label for="demo-size">Team size</label>
<select id="demo-size" name="team_size">
<option>1–10 people</option>
<option>11–50 people</option>
<option>51–150 people</option>
<option>More than 150 people</option>
</select>
</div>
<div class="field wide">
<label for="demo-notes">What should the demo cover?</label>
<textarea id="demo-notes" name="message" placeholder="For example: client projects with fixed deadlines, moving off spreadsheets, time tracking"></textarea>
</div>
<p class="privacy">We use these details only to arrange the demo. No newsletter unless you ask for it.</p>
<button type="submit">Request a demo</button>
</form>
<aside class="side">
<h2>Prefer to write or call?</h2>
<div class="lines">
<div><span>→</span><span>Sales: <a href="mailto:[email protected]">[email protected]</a></span></div>
<div><span>→</span><span>Support: <a href="mailto:[email protected]">[email protected]</a></span></div>
<div><span>→</span><span>Phone: <a href="tel:+15550142290">(555) 014-2290</a>, Mon–Fri, 9:00–17:00 ET</span></div>
</div>
<h2>Already a customer?</h2>
<p>Sign in and use the help button at the bottom right of any board. Your message reaches support with your workspace details attached, which saves a round of questions.</p>
<p class="address">Corvane Inc., 410 Lantern Row, Suite 5, Portland, OR 97209</p>
</aside>
</div>
</section>
<section class="tint">
<div class="wrap center">
<h2>When you will hear back</h2>
<p>Times are business hours, Monday to Friday, US Eastern time. Messages sent on a weekend are answered first thing Monday.</p>
<div class="times">
<div class="time">
<span class="icon">◎</span>
<h3>Demo requests</h3>
<p>A reply with suggested times within one business day. Most demos happen within the same week.</p>
</div>
<div class="time">
<span class="icon">↻</span>
<h3>Support on Starter and Team</h3>
<p>A first reply within 8 business hours on Team, or one business day on Starter, with follow-ups in the same thread until it is solved.</p>
</div>
<div class="time">
<span class="icon">→</span>
<h3>Support on Business</h3>
<p>A first reply within 4 business hours, plus a named contact for anything urgent or account-wide.</p>
</div>
</div>
</div>
</section>
</body>
</html>