Website kits
Construction quote request page
Builder quote page: request form with project type, budget, timeline and address, a service area panel, four next steps and an 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 Request a quote button leads to. The form asks for the four things a builder needs to qualify a lead before calling back — project type, budget range, timeline and the property address with ZIP code — plus a free-text description, so the first call can be about the project rather than basic facts. The budget and timeline fields are dropdowns on purpose: picking a range is easier than typing a number, and it tells you straight away whether the job fits your calendar. Beside the form, a dark panel lists the towns you cover and a phone number for people who would rather talk. Four steps explain what happens after submitting, which reduces the follow-up “did you get my form?” calls, and the FAQ answers permits, living at home during the work and the payment schedule. Edit the budget bands to match the jobs you want, and connect the form to the inbox of whoever returns calls. Answer every enquiry within the time the page promises.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 11
- Container (grid) × 1
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 6
- Heading × 5
- Form × 1
- Icon List × 1
- Button × 1
- Icon Box × 4
- Accordion × 1
Things worth knowing
- The quote form converts to an Elementor Pro Form with nine fields (text, email and tel, three selects with their options, two text fields for the address and ZIP code, and a textarea) and keeps the labels. It needs Elementor Pro, and the original action is removed, so set Actions After Submit, such as Email, after import.
- The four next-step cards each hold one glyph, one heading and one paragraph and convert to Icon Box widgets with an arrow icon; the step number is part of the heading text.
- The service-area towns become an Icon List widget when the Icons option matches the Elementor icon library, and the bordered Call link becomes a Button widget with its tel: link kept.
- The six questions are details/summary pairs and convert to one Accordion widget. Below 780px the form and the service-area panel stack, with the form first.
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>Request a quote — Corbel Design-Build</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#1c1d1f;background:#f3f1ec}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Archivo',Arial,sans-serif;color:#1c1d1f;font-weight:700;letter-spacing:-.015em}
h1{font-size:56px;line-height:1.06;margin:0 0 20px}
h2{font-size:36px;line-height:1.12;margin:0 0 16px}
h3{font-size:19px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#575b60;margin:0 0 16px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#1c1d1f;margin:0 0 20px;padding-left:12px;border-left:3px solid #c4932f}
.intro{padding:72px 0 32px}
.intro .lead{max-width:700px;font-size:18px}
.form-sec{padding-top:24px}
.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
form{background:#ffffff;border-top:3px solid #c4932f;padding:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1 / -1}
label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1c1d1f}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #575b60;border-radius:0;background:#f3f1ec;color:#1c1d1f}
textarea{min-height:130px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:16px 30px;border:0;border-radius:3px;background:#c4932f;color:#1c1d1f;font:inherit;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.panel{background:#1c1d1f;padding:36px 32px}
.panel h2{color:#f3f1ec;font-size:26px}
.panel h3{color:#f3f1ec;font-size:17px;margin:28px 0 8px}
.panel p{color:#d9d5cd;font-size:16px;margin:0}
.towns{display:flex;flex-direction:column;gap:8px;margin:16px 0 0}
.towns > div{display:flex;gap:12px;align-items:center;font-size:16px;color:#f3f1ec}
.dot{color:#c4932f;font-size:10px}
.call{display:inline-block;margin:20px 0 0;padding:13px 22px;border:1px solid #d9d5cd;color:#f3f1ec;border-radius:3px;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em}
.white{background:#ffffff}
.head{max-width:660px;margin:0 0 40px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.step{padding:28px 24px;background:#f3f1ec;border-top:1px solid #1c1d1f}
.step-icon{display:inline-block;color:#c4932f;font-size:22px;line-height:1;margin:0 0 16px}
.step p{font-size:16px;margin:0}
.faq{display:flex;flex-direction:column;gap:0;max-width:860px;border-top:1px solid #1c1d1f}
details{border-bottom:1px solid #d9d5cd;padding:20px 0}
summary{font-family:'Archivo',Arial,sans-serif;font-size:19px;font-weight:700;color:#1c1d1f;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 16px}
.form-sec{padding-top:16px}
h1{font-size:38px}
h2{font-size:28px}
.layout,.steps{grid-template-columns:minmax(0,1fr);gap:24px}
form{grid-template-columns:minmax(0,1fr);padding:24px 18px}
.panel{padding:28px 20px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Request a quote</p>
<h1>Tell us about your project</h1>
<p class="lead">A few details help us tell you quickly whether we are the right builder for it and what a realistic budget looks like. We reply within two working days.</p>
</div>
</section>
<section class="form-sec" id="quote">
<div class="wrap layout">
<form action="#" method="post">
<div class="field"><label for="q-name">Name</label><input id="q-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="q-email">Email</label><input id="q-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="q-phone">Phone</label><input id="q-phone" name="phone" type="tel" autocomplete="tel"></div>
<div class="field"><label for="q-type">Project type</label><select id="q-type" name="project_type"><option>Kitchen renovation</option><option>Addition</option><option>Whole-home renovation</option><option>Custom home</option><option>Not sure yet</option></select></div>
<div class="field"><label for="q-budget">Budget range</label><select id="q-budget" name="budget"><option>Under $75,000</option><option>$75,000–$150,000</option><option>$150,000–$300,000</option><option>$300,000–$600,000</option><option>Over $600,000</option><option>Not sure yet</option></select></div>
<div class="field"><label for="q-timeline">When would you like to start?</label><select id="q-timeline" name="timeline"><option>Within 3 months</option><option>In 3–6 months</option><option>In 6–12 months</option><option>More than a year from now</option><option>Just exploring</option></select></div>
<div class="field"><label for="q-address">Property address</label><input id="q-address" name="address" type="text" autocomplete="street-address"></div>
<div class="field"><label for="q-zip">ZIP code</label><input id="q-zip" name="zip" type="text" autocomplete="postal-code" inputmode="numeric" required></div>
<div class="field full"><label for="q-details">What would you like to build or change?</label><textarea id="q-details" name="details"></textarea></div>
<button class="submit" type="submit">Send my request</button>
</form>
<aside class="panel">
<h2>Service area</h2>
<p>We take on projects within about 40 minutes of our Ashgrove workshop.</p>
<div class="towns">
<div><span class="dot">●</span><span>Ashgrove and Ashgrove Hills</span></div>
<div><span class="dot">●</span><span>Fennick</span></div>
<div><span class="dot">●</span><span>Lower Brayton</span></div>
<div><span class="dot">●</span><span>Wren Hollow</span></div>
<div><span class="dot">●</span><span>Marlow Heights</span></div>
</div>
<h3>Prefer to talk?</h3>
<p>Monday to Friday, 8 am to 5 pm. Our studio at 88 Millrace Lane, Ashgrove, is open by appointment.</p>
<a class="call" href="tel:+15550184471">Call (555) 018-4471</a>
</aside>
</div>
</section>
<section class="white">
<div class="wrap">
<div class="head">
<p class="eyebrow">After you submit</p>
<h2>What happens next</h2>
</div>
<div class="steps">
<div class="step"><span class="step-icon">→</span><h3>1. A call within two days</h3><p>Your project lead calls to talk through the brief, budget and timing, and tells you plainly if the job is not a fit for us.</p></div>
<div class="step"><span class="step-icon">→</span><h3>2. A site visit</h3><p>About an hour at the house or lot: measurements, photos and a first look at what may be hiding behind walls or under the ground.</p></div>
<div class="step"><span class="step-icon">→</span><h3>3. A range in writing</h3><p>Within a week of the visit you get a written budget range and a design-phase proposal with a fixed fee.</p></div>
<div class="step"><span class="step-icon">→</span><h3>4. Design, then a price</h3><p>If you go ahead, design and pricing run together and finish with one fixed-price contract for the build.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Questions</p>
<h2>Before you get in touch</h2>
</div>
<div class="faq">
<details><summary>Who handles the permits?</summary><p>We do. Permits are filed under our contractor license, and we book and attend every inspection. Permit fees appear in your contract as a separate line at cost.</p></details>
<details><summary>Can we live at home during the work?</summary><p>For kitchens and most additions, usually yes, with dust walls, a temporary kitchen and a clean-up at the end of each day. For whole-home renovations we phase the work so you move out for only part of it, typically four to eight weeks, and agree the plan before the contract.</p></details>
<details><summary>What is the payment schedule?</summary><p>A deposit at signing, kept within what your state allows, then payments tied to finished stages such as foundation, framing, inspections, drywall and finishes. The final 5% is due after the punch list is closed, and every payment comes with lien waivers.</p></details>
<details><summary>How far ahead should we contact you?</summary><p>For a kitchen, three to four months before you want work to start. For additions, whole-home renovations and new houses, six months to a year, because design and permits take time.</p></details>
<details><summary>Will you build from our own architect’s drawings?</summary><p>Yes. We price and build from outside drawings, and we can join while the design is still changing to give cost feedback before it is final.</p></details>
<details><summary>What does the warranty cover?</summary><p>Two years on workmanship and ten years on structural work, in writing, plus the manufacturers’ warranties on products, which we register in your name at handover.</p></details>
</div>
</div>
</section>
</body>
</html>
