contact split form map location contact split form map location address email split contact form with map contact section with location side
Contact Split
Fetch pattern JSON:
curl https://webspire.de/patterns/contact/split.json split.html
<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="overflow-hidden rounded-3xl border border-[var(--ws-contact-input-border)]">
<div class="grid lg:grid-cols-2">
<!-- Image / Map side (decorative gradient — keep hardcoded) -->
<div class="hidden bg-gradient-to-br from-indigo-500 to-purple-600 lg:block">
<div class="flex h-full flex-col items-center justify-center p-12 text-center">
<div class="rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-sm">
<svg class="mx-auto h-12 w-12 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
<p class="mt-4 text-lg font-semibold text-white">Visit us</p>
<p class="mt-1 text-sm text-indigo-100">Friedrichstraße 123</p>
<p class="text-sm text-indigo-100">10117 Berlin, Germany</p>
</div>
</div>
</div>
<!-- Form side -->
<div class="bg-[var(--ws-contact-bg)] p-8 sm:p-12">
<h2 class="text-2xl font-bold tracking-tight text-[var(--ws-contact-text)]">Send us a message</h2>
<p class="mt-2 text-sm text-[var(--ws-contact-text-soft)]">We'll get back to you within one business day.</p>
<form class="mt-8 space-y-5">
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div>
<label for="split-first" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">First name</label>
<input type="text" id="split-first" name="first-name" autocomplete="given-name" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
</div>
<div>
<label for="split-last" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Last name</label>
<input type="text" id="split-last" name="last-name" autocomplete="family-name" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
</div>
</div>
<div>
<label for="split-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
<input type="email" id="split-email" name="email" autocomplete="email" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
</div>
<div>
<label for="split-message" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
<textarea id="split-message" name="message" rows="4" required
class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]"
placeholder="How can we help?"></textarea>
</div>
<button type="submit" class="w-full rounded-lg bg-[var(--ws-contact-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-contact-action-text)] transition hover:opacity-90">Send message</button>
</form>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
contactsplitformmaplocation
Slots
| Name | Required | Description |
|---|---|---|
| location | No | Map, image, or address card on the left side. |
| form | Yes | Contact form with name, email, message fields. |
Split-layout contact in a rounded container. Left side shows location/map placeholder with address card, right side has a full contact form. Location panel hidden on mobile. Form stacks inputs responsively.