Website kits
Home services quote page
Quote request page for a trade business: a form with job type and preferred time, an emergency notice with the phone number and what happens next.
When to use it
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 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>Home services quote page</title>
<style>
body{margin:0;font-family:'Open Sans',Arial,sans-serif;color:#1a2633;background:#ffffff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:64px 0}
h1,h2,h3{font-family:'Poppins',Arial,sans-serif;color:#1a2633;margin:0}
h1{font-size:42px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
h2{font-size:24px;line-height:1.3;margin:0 0 12px}
p{margin:0;line-height:1.75;color:#5b6b7c;font-size:16px}
.intro{background:#eef2f6;padding:56px 0}
.intro p{max-width:700px;font-size:18px}
.layout{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:start}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:32px;border:2px solid #eef2f6;border-radius:14px;background:#ffffff}
.field{display:flex;flex-direction:column;gap:7px}
.full{grid-column:1 / -1}
label{font-weight:600;font-size:14px;color:#1a2633}
input,select,textarea{font-family:'Open Sans',Arial,sans-serif;font-size:15px;color:#1a2633;padding:12px 14px;border:2px solid #eef2f6;border-radius:8px;background:#ffffff}
textarea{min-height:130px;resize:vertical}
button{grid-column:1 / -1;justify-self:start;padding:15px 30px;border:0;border-radius:8px;background:#f2711c;color:#1a2633;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:16px;cursor:pointer}
.side{display:flex;flex-direction:column;gap:22px}
.urgent{padding:28px;border-radius:14px;background:#14365d}
.urgent h2{color:#ffffff}
.urgent p{color:#eef2f6;margin:0 0 20px}
.call{display:inline-block;padding:14px 22px;border-radius:8px;background:#f2711c;color:#1a2633;text-decoration:none;font-family:'Poppins',Arial,sans-serif;font-weight:700;font-size:17px}
.next{padding:28px;border-radius:14px;background:#eef2f6}
.steps{display:flex;flex-direction:column;gap:14px;margin:6px 0 0}
.steps > div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.65;color:#1a2633}
.arrow{color:#f2711c;font-weight:700;font-size:16px;line-height:1.6}
.privacy{font-size:13px}
@media(max-width:780px){section{padding:44px 0}.intro{padding:44px 0}.wrap{padding:0 16px}.layout,form{grid-template-columns:1fr}form{padding:20px}h1{font-size:31px}button{justify-self:stretch}.call{text-align:center}.side-img{height:240px}}
</style>
</head>
<body>
<section class="intro" id="quote">
<div class="wrap">
<h1>Request a quote</h1>
<p>Tell us what needs fixing and when suits you. We reply within one working day with a price range or a time to visit and give a fixed price.</p>
</div>
</section>
<section>
<div class="wrap layout">
<form action="#" method="post">
<div class="field"><label for="q-name">Your name</label><input id="q-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="q-phone">Phone</label><input id="q-phone" name="phone" type="tel" autocomplete="tel" placeholder="(555) 000-0000" required></div>
<div class="field"><label for="q-email">Email</label><input id="q-email" name="email" type="email" autocomplete="email" placeholder="[email protected]"></div>
<div class="field"><label for="q-town">Town</label><select id="q-town" name="town"><option>Larkfield</option><option>Westmere</option><option>Oakhurst</option><option>Brindle Creek</option><option>North Hallam</option><option>Fenwick Mills</option><option>Somewhere else</option></select></div>
<div class="field"><label for="q-job">Type of job</label><select id="q-job" name="job_type"><option>Leak or pipe repair</option><option>Blocked drain</option><option>Water heater</option><option>Electrical fault</option><option>Lighting or outlets</option><option>Panel upgrade</option><option>Something else</option></select></div>
<div class="field"><label for="q-time">Preferred time</label><select id="q-time" name="preferred_time"><option>Weekday morning (7am–12pm)</option><option>Weekday afternoon (12pm–6pm)</option><option>Saturday</option><option>Any time</option></select></div>
<div class="field full"><label for="q-date">Earliest date that works</label><input id="q-date" name="preferred_date" type="date"></div>
<div class="field full"><label for="q-details">What is happening?</label><textarea id="q-details" name="details" placeholder="Where the problem is, when it started, and anything you have already tried" required></textarea></div>
<button type="submit">Send quote request</button>
</form>
<div class="side">
<div class="urgent">
<h2>Emergency? Don’t use this form</h2>
<p>For an active leak, no water, sparking or a burning smell, call us now. Forms are read during office hours only.</p>
<a class="call" href="tel:+15550142290">Call (555) 014-2290</a>
</div>
<div class="next">
<h2>What happens next</h2>
<div class="steps">
<div><span class="arrow">➜</span><span><strong>We read your request</strong> within one working day.</span></div>
<div><span class="arrow">➜</span><span><strong>We call or text you</strong> with a price range or questions.</span></div>
<div><span class="arrow">➜</span><span><strong>You choose a visit time</strong> inside a two-hour window.</span></div>
<div><span class="arrow">➜</span><span><strong>We give a fixed price</strong> on site before any work starts.</span></div>
</div>
</div>
<p class="privacy">We use your details only to answer this request. See our privacy policy for how long we keep them.</p>
</div>
</div>
</section>
</body>
</html>