Website kits
Real estate valuation and contact page
Valuation request form with property details, office address and hours, three next steps after a request and a short FAQ accordion.
When to use it
The page every Book a valuation button on the site points to. It leads with the form because a seller who has clicked through has already decided to ask; the form collects just enough to plan a visit — address, property type, bedrooms and timeframe — and marks the four fields you actually need. The office panel sits beside it for people who would rather phone or walk in, with opening hours as a list. The three next steps answer the question every seller has after pressing submit: who calls, when, and what they receive in writing. The FAQ handles the doubts that stop people booking, such as obligation and fees. Replace the address, hours and phone number first, then make sure the promised call-back time matches what your office really manages. Tip: route valuation requests to a shared inbox rather than one agent, so a request on someone’s day off is still answered within a working day.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 9
- 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 × 8
- Heading × 5
- Form × 1
- Icon List × 1
- Button × 1
- Icon Box × 3
- Accordion × 1
Things worth knowing
- The valuation form converts to an Elementor Pro Form with eight fields, including three select fields with their options. It needs Elementor Pro, and the submit action must be configured after import; the heading and note above the fields come across as separate widgets above the form.
- The three next-step cards become Icon Box widgets (redo arrow, bullseye and check icons) and the opening hours become an Icon List; both need the “match the Elementor icon library” icon option.
- The three questions are <details> elements, so they convert to one Accordion widget you can extend in the panel.
- Below 780px the form and office panel stack, and the form’s two-column field pairs drop to one column.
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>Fernhollow Estates valuation and contact page</title>
<style>
body{margin:0;font-family:'DM Sans',Arial,Helvetica,sans-serif;color:#23261f;background:#fbf8f2}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:#1f3d2f;margin:0}
h1{font-size:52px;line-height:1.08;margin:0 0 16px}
h2{font-size:34px;line-height:1.15;margin:0 0 14px}
h3{font-size:22px;line-height:1.25;margin:0 0 8px}
p{margin:0;font-size:16px;line-height:1.75;color:#5f6156}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1f3d2f;margin:0 0 14px}
.btn-line{display:inline-block;padding:14px 25px;border-radius:6px;border:1px solid #1f3d2f;color:#1f3d2f;text-decoration:none;font-weight:600;font-size:15px}
.intro{background:#e8dcc6;padding:64px 0 56px}
.intro .lead{max-width:700px;font-size:17.5px;color:#23261f}
.main .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start}
.valuation{background:#fbf8f2;border:1px solid #e8dcc6;border-radius:12px;padding:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 20px}
.valuation h2{grid-column:1 / -1;margin:0}
.valuation .form-note{grid-column:1 / -1;font-size:15px}
.field{display:flex;flex-direction:column;gap:6px}
.wide{grid-column:1 / -1}
.field label{font-size:14px;font-weight:600;color:#23261f}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid #5f6156;border-radius:6px;background:#fbf8f2;color:#23261f}
.field textarea{min-height:110px;resize:vertical}
.valuation button{grid-column:1 / -1;font:inherit;font-weight:700;font-size:16px;padding:16px 22px;border:0;border-radius:6px;background:#1f3d2f;color:#fbf8f2;cursor:pointer}
.office{background:#1f3d2f;border-radius:12px;padding:36px 32px}
.office h2{color:#fbf8f2}
.office p{color:#e8dcc6;margin:0 0 18px}
.office .eyebrow{color:#c49a55}
.office .label{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c49a55;margin:26px 0 12px}
.hours{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.hours > div{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.6;color:#fbf8f2}
.ring{color:#c49a55;font-size:13px;line-height:1.9}
.office .call{display:inline-block;margin-top:22px;padding:14px 22px;border-radius:6px;background:#c49a55;color:#23261f;text-decoration:none;font-weight:700;font-size:15px}
.next{background:#e8dcc6}
.next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.next-card{background:#fbf8f2;border-radius:10px;padding:28px 26px}
.icon{display:block;font-size:20px;color:#1f3d2f;margin:0 0 14px}
.faq-wrap{max-width:820px}
.faq{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.faq details{border:1px solid #e8dcc6;border-radius:10px;padding:18px 22px;background:#fbf8f2}
.faq summary{font-weight:600;font-size:17px;color:#1f3d2f;cursor:pointer}
.faq details p{margin:12px 0 0}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.intro{padding:40px 0 36px}
h1{font-size:36px}
h2{font-size:28px}
.main .wrap,.next-grid,.valuation{grid-template-columns:minmax(0,1fr)}
.main .wrap{gap:32px}
.valuation{padding:26px 20px}
.office{padding:28px 22px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Free valuation</p>
<h1>Find out what your home would sell for</h1>
<p class="lead">Tell us a little about the property and when suits you. An agent who sells homes on your side of town will call to arrange a 45-minute visit. There is no charge and no contract to sign.</p>
</div>
</section>
<section class="main">
<div class="wrap">
<form class="valuation" action="#" method="post">
<h2>Request a valuation</h2>
<p class="form-note">Fields marked required are the minimum we need to book the visit.</p>
<div class="field">
<label for="c-name">Full name (required)</label>
<input id="c-name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field">
<label for="c-phone">Phone (required)</label>
<input id="c-phone" name="phone" type="tel" autocomplete="tel" required>
</div>
<div class="field wide">
<label for="c-email">Email (required)</label>
<input id="c-email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field wide">
<label for="c-address">Property address (required)</label>
<input id="c-address" name="address" type="text" autocomplete="street-address" required>
</div>
<div class="field">
<label for="c-type">Property type</label>
<select id="c-type" name="property_type">
<option>House</option>
<option>Townhouse</option>
<option>Apartment or condo</option>
<option>Farm or land</option>
</select>
</div>
<div class="field">
<label for="c-beds">Bedrooms</label>
<select id="c-beds" name="bedrooms">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5 or more</option>
</select>
</div>
<div class="field wide">
<label for="c-when">When are you thinking of selling?</label>
<select id="c-when" name="timeframe">
<option>Within 3 months</option>
<option>In 3 to 12 months</option>
<option>Just curious for now</option>
</select>
</div>
<div class="field wide">
<label for="c-notes">Anything else? Recent work, best days for a visit</label>
<textarea id="c-notes" name="notes"></textarea>
</div>
<button type="submit">Request my valuation</button>
</form>
<aside class="office">
<p class="eyebrow">Our office</p>
<h2>Visit us on Market Square</h2>
<p>Fernhollow Estates<br>7 Market Square, Brackenford, NY 10555</p>
<p>(555) 014-2290<br>[email protected]</p>
<p class="label">Opening hours</p>
<div class="hours">
<div><span class="ring">○</span><span>Monday to Friday, 8:30 am to 6 pm</span></div>
<div><span class="ring">○</span><span>Saturday, 9 am to 4 pm</span></div>
<div><span class="ring">○</span><span>Sunday, viewings by appointment only</span></div>
</div>
<a class="call" href="tel:+15550142290">Call the office</a>
</aside>
</div>
</section>
<section class="next">
<div class="wrap">
<p class="eyebrow">After you send the form</p>
<h2>What happens next</h2>
<div class="next-grid">
<div class="next-card">
<span class="icon">↻</span>
<h3>We call within one working day</h3>
<p>An agent calls to confirm the address, ask about any recent work and agree a time that suits you.</p>
</div>
<div class="next-card">
<span class="icon">◎</span>
<h3>A 45-minute visit</h3>
<p>We walk through every room, check the yard and boundaries, and answer your questions about selling.</p>
</div>
<div class="next-card">
<span class="icon">✓</span>
<h3>Your written valuation</h3>
<p>Within two working days you get a price range by email, the recent sales behind it and our fee in writing.</p>
</div>
</div>
</div>
</section>
<section>
<div class="wrap faq-wrap">
<h2>Questions people ask before booking</h2>
<div class="faq">
<details>
<summary>Do I have to sell with you after the valuation?</summary>
<p>No. The valuation is free and you are under no obligation. Many people book one a year or two before they plan to move.</p>
</details>
<details>
<summary>Can you value my home without visiting?</summary>
<p>We can give a rough range by phone, but a visit is the only way to account for condition, layout and the yard, which is where most of the difference between two similar houses comes from.</p>
</details>
<details>
<summary>What do you charge if I do sell with you?</summary>
<p>Our fee is a percentage of the final sale price, agreed in writing before your home goes on the market. Your agent will explain it at the visit.</p>
</details>
</div>
</div>
</section>
</body>
</html>