Website kits
Law firm consultation page
Consultation request form with a confidentiality notice, office address and hours, a what-to-bring checklist and three next steps.
When to use it
The intake page, and the one that carries the most legal weight on a law firm site. The notice above the form asks people not to send confidential details yet, and the checkbox at the end asks them to confirm that submitting does not make them a client. Both are there because what a stranger sends a firm can create a conflict of interest or an expectation of confidentiality. The form also asks for the names of anyone else involved, so staff can run a conflict check before calling back. Office hours, address and phone sit beside the form for people who would rather call, and the what-to-bring list makes the first meeting productive. The three closing steps explain what happens after the form is sent. Configure the form’s email action and replace the address first. Send submissions to a shared intake inbox rather than to one attorney, so nothing waits while someone is in court.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 14
- 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 × 11
- Heading × 7
- Alert × 1
- Form × 1
- Image × 1
- Icon List × 1
Things worth knowing
- The form becomes an Elementor Pro Form widget with seven fields: name, phone, email, matter type, other parties, description and an acknowledgment checkbox. It needs Elementor Pro, and its original action is removed, so set the Email action, recipient and success message after import before it can send anything.
- The acknowledgment checkbox arrives with its column width set to 20% because the converter measures the checkbox itself, not its label. Set that field’s Column Width to 100% in the form settings so the sentence does not wrap into a narrow strip.
- The confidentiality notice is recognized as a notice and becomes an Alert widget (core Elementor) with the source colors and no dismiss button.
- The what-to-bring checklist becomes an Icon List; the address, hours and phone stay as Text Editor text. Below 780px the sidebar moves under the form and the name and phone fields stack.
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>Law firm consultation page</title>
<style>
body{margin:0;font-family:'Source Sans 3',Arial,sans-serif;color:#566273;background:#f8f4ec}
.wrap{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}
section{padding-top:72px;padding-bottom:72px}
h1,h2,h3{font-family:'Libre Baskerville',Georgia,serif;color:#1d2b3e;font-weight:700}
h1{font-size:42px;line-height:1.2;margin:0 0 18px}
h2{font-size:26px;line-height:1.3;margin:0 0 14px}
h3{font-size:19px;line-height:1.35;margin:0 0 12px}
p{font-size:17px;line-height:1.75;margin:0 0 16px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#8c6d3a;margin:0 0 12px}
.hero{padding-top:64px;padding-bottom:36px}
.hero .wrap > div{max-width:760px}
.main{padding-top:20px}
.main .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:start}
.form-card{background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:36px}
.notice{background:#f8f4ec;border-left:3px solid #8c6d3a;padding:16px 20px;margin:0 0 26px;font-size:15px;line-height:1.65;color:#1d2b3e}
form{display:flex;flex-direction:column;gap:18px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:15px;font-weight:700;color:#1d2b3e}
input,select,textarea{width:100%;box-sizing:border-box;min-width:0;font-family:'Source Sans 3',Arial,sans-serif;font-size:16px;color:#1d2b3e;background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:12px 14px}
textarea{min-height:140px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:400;color:#566273;line-height:1.55}
.check input{width:auto;margin:4px 0 0;padding:0}
button{align-self:flex-start;padding:15px 28px;background:#8c6d3a;color:#ffffff;border:0;border-radius:4px;font-family:'Source Sans 3',Arial,sans-serif;font-weight:700;font-size:16px}
aside{display:flex;flex-direction:column;gap:22px}
.office-img{display:block;width:100%;height:220px;object-fit:cover;border-radius:4px;background:#ddd5c4}
.side-card{background:#ffffff;border:1px solid #ddd5c4;border-radius:4px;padding:28px}
.side-card p{font-size:16px;margin:0 0 12px}
.side-card p:last-child{margin-bottom:0}
.side-card strong{color:#1d2b3e}
.list{display:flex;flex-direction:column;gap:10px}
.list div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#1d2b3e}
.list span{color:#8c6d3a;font-size:15px;line-height:1.7}
.next{background:#1d2b3e}
.next h2,.next h3{color:#ffffff}
.next p{color:#ddd5c4;margin:0;font-size:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.next-step{border-top:3px solid #8c6d3a;padding-top:20px}
.next-step .num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#ddd5c4;margin:0 0 8px}
@media(max-width:780px){
section{padding-top:52px;padding-bottom:52px}
.main .wrap,.row,.grid-3{grid-template-columns:minmax(0,1fr);gap:20px}
.form-card{padding:24px}
h1{font-size:31px}h2{font-size:23px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Free consultation</p>
<h1>Request a free 30-minute consultation</h1>
<p>Tell us briefly what is happening and how to reach you. An attorney or paralegal will reply within one business day to check for conflicts of interest and arrange a time to talk, by phone, video or in our office.</p>
</div>
</div>
</section>
<section class="main">
<div class="wrap">
<div class="form-card">
<p class="notice">Please keep this first message short and general. Contacting us does not create an attorney-client relationship, and we cannot treat what you send as confidential until we have checked for conflicts and agreed to represent you.</p>
<form action="#" method="post">
<div class="row">
<div class="field"><label for="c-name">Full name</label><input id="c-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="c-phone">Phone</label><input id="c-phone" name="phone" type="tel" autocomplete="tel"></div>
</div>
<div class="field"><label for="c-email">Email</label><input id="c-email" name="email" type="email" autocomplete="email" required></div>
<div class="field">
<label for="c-area">What is it about?</label>
<select id="c-area" name="area">
<option>Business formation or a contract</option>
<option>Will, trust or estate plan</option>
<option>Probate or an estate after a death</option>
<option>Buying or selling a home</option>
<option>Employment agreement or workplace issue</option>
<option>Something else</option>
</select>
</div>
<div class="field"><label for="c-parties">Names of any other people or companies involved</label><input id="c-parties" name="parties" type="text"></div>
<div class="field"><label for="c-message">A short description, without confidential details</label><textarea id="c-message" name="message"></textarea></div>
<label class="check" for="c-ack"><input id="c-ack" name="acknowledge" type="checkbox" value="yes" required>I understand that sending this form does not make me a client of the firm.</label>
<button type="submit">Send consultation request</button>
</form>
</div>
<aside>
<img class="office-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/law/office-reception.jpg" width="1600" height="900" alt="Quiet law office reception with two armchairs, a low table and bookshelves">
<div class="side-card">
<h3>Office and hours</h3>
<p><strong>Wrenfield & Osei</strong><br>418 Larkspur Row, Suite 300<br>Columbus, OH 43215</p>
<p>Monday to Friday, 8:30 am to 5:30 pm<br>Tuesday evenings until 7:30 pm by appointment</p>
<p>(614) 555-0142<br>[email protected]</p>
</div>
<div class="side-card">
<h3>What to bring</h3>
<div class="list">
<div><span>✓</span>Any letters, contracts or court papers you have received</div>
<div><span>✓</span>A short timeline of what has happened so far</div>
<div><span>✓</span>Names of everyone involved, for the conflict check</div>
<div><span>✓</span>Any deadline you have been given, with the date</div>
<div><span>✓</span>Your questions, written down so none get missed</div>
</div>
</div>
</aside>
</div>
</section>
<section class="next">
<div class="wrap">
<h2>What happens after you send the form</h2>
<div class="grid-3">
<div class="next-step"><p class="num">Within one business day</p><h3>We check for conflicts</h3><p>We confirm we do not already represent anyone else involved, then contact you to book a time.</p></div>
<div class="next-step"><p class="num">At the consultation</p><h3>We listen and explain</h3><p>Up to 30 minutes, free, to understand the situation and outline your realistic options.</p></div>
<div class="next-step"><p class="num">If you want to go ahead</p><h3>You get it in writing</h3><p>An engagement letter with the scope and fee. Nothing is billed until you sign it.</p></div>
</div>
</div>
</section>
</body>
</html>