Contact & FAQ
Split contact section with form
Two-column contact block: email, phone, address and hours on the left, a labelled enquiry form on the right.
When to use it
The contact section for a service business that wants enquiries in writing but still lists every other way to get in touch. The left column answers what people want to know before they write: how fast you reply, which email and phone number to use, where you are and when someone is there, so the form is never the only option. The right column asks only for what you need to reply well: name, email, an optional phone number, a topic and the message. Keep the topic dropdown; it lets you sort or forward messages without asking a follow-up question. Replace the reply-time promise in the intro with one you can actually keep, then the four details in the list. The form becomes an Elementor Pro Form widget and sends nothing until you add an action after import. For trades and local services, move the phone row to the top of the list, because many people would rather call than type.
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 form becomes an Elementor Form widget, which is part of Elementor Pro, with five fields: name and email side by side at 50% width, then phone, a select for the topic and the message textarea. The original form action is removed during conversion; add Email, a webhook or another action under Actions After Submit before publishing.
- Field labels come from the real <label> elements, and the required flags on name, email and message carry over. On phones, set the name and email fields’ Column Width to 100% in the widget, because the conversion writes only the desktop width.
- The four contact rows become one Icon List widget with arrow icons (→ maps to fa-arrow-right), and the email and phone rows keep their mailto: and tel: links. If you convert the HTML yourself, leave the Icons option on matching the Elementor icon library, or the rows arrive as plain text.
- The heading arrives as an H1 because the library’s semantic heading option promotes the first heading in a block. Change it to H2 in the Heading widget when the section sits below the page’s own H1.
- Below 780px the two-column grid drops to one column, so the contact details sit above the form card.
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>Split contact section with form</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
.contact{max-width:1160px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.eyebrow{margin:0 0 12px;color:#ff5b35;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h2{margin:0 0 16px;font-size:38px;line-height:1.12;letter-spacing:-.03em;color:#14233a}
.lead{margin:0 0 30px;font-size:16px;line-height:1.8;color:#5b6b82}
.info{display:flex;flex-direction:column;gap:16px}
.info > div{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.6;color:#243a56}
.info a{color:#14233a;font-weight:600;text-decoration:none}
.ic{color:#ff5b35;font-size:16px;line-height:1.6}
.card{padding:34px;border:1px solid #e3e9f1;border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(18,35,57,.06)}
.form{display:flex;flex-direction:column;gap:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
label{font-size:14px;font-weight:600;color:#243a56}
input,select,textarea{font:inherit;font-size:15px;color:#14233a;padding:12px 14px;border:1px solid #cfd8e5;border-radius:9px;background:#fff;box-sizing:border-box;width:100%}
textarea{resize:vertical;min-height:132px}
button{align-self:flex-start;padding:14px 26px;border:0;border-radius:9px;background:#ff5b35;color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.privacy{margin:16px 0 0;font-size:13px;line-height:1.7;color:#7a889c}
@media(max-width:780px){
.contact{grid-template-columns:1fr;padding:56px 20px;gap:36px}
h2{font-size:30px}
.card{padding:24px 20px}
.pair{grid-template-columns:1fr}
}
</style>
</head>
<body>
<section class="contact" id="contact">
<div>
<p class="eyebrow">Contact</p>
<h2>Tell us what you need and when</h2>
<p class="lead">A few lines about the project and your timing is enough. You will get a reply within one working day, either with questions or with a time for a short call.</p>
<div class="info">
<div><span class="ic">→</span><span><strong>Email</strong> <a href="mailto:[email protected]">[email protected]</a></span></div>
<div><span class="ic">→</span><span><strong>Phone</strong> <a href="tel:+15550142290">(555) 014-2290</a></span></div>
<div><span class="ic">→</span><span><strong>Office</strong> 1420 Alder Row, Suite 3, Portland, OR 97205</span></div>
<div><span class="ic">→</span><span><strong>Hours</strong> Monday to Friday, 9:00 am to 5:30 pm</span></div>
</div>
</div>
<div class="card">
<form class="form" name="contact-enquiry">
<div class="pair">
<div class="field"><label for="cf-name">Your name</label><input id="cf-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="cf-email">Email address</label><input id="cf-email" name="email" type="email" autocomplete="email" required></div>
</div>
<div class="field"><label for="cf-phone">Phone (optional)</label><input id="cf-phone" name="phone" type="tel" autocomplete="tel"></div>
<div class="field">
<label for="cf-topic">What is it about?</label>
<select id="cf-topic" name="topic">
<option>A new project</option>
<option>Changes to an existing site</option>
<option>Ongoing support</option>
<option>Something else</option>
</select>
</div>
<div class="field"><label for="cf-message">Message</label><textarea id="cf-message" name="message" rows="5" required></textarea></div>
<button type="submit">Send message</button>
</form>
<p class="privacy">We use these details only to answer your message. Nothing is added to a mailing list.</p>
</div>
</section>
</body>
</html>