contact sales support options form split enterprise contact sales support options channels form enterprise help contact page with support options sales form with channel cards contact us with multiple support channels enterprise contact layout
Contact With Options
Fetch pattern JSON:
curl https://webspire.de/patterns/contact/with-options.json with-options.html
<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid gap-12 lg:grid-cols-[1fr_1.4fr]">
<!-- Left: support option cards -->
<div>
<h2 class="text-2xl font-bold text-[var(--ws-contact-text)]">Looking for help?</h2>
<p class="mt-2 text-sm text-[var(--ws-contact-text-soft)]">Find the right channel for your question below.</p>
<div class="mt-8 space-y-3">
<!-- Support -->
<a href="#" class="group flex items-start gap-4 rounded-xl border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] p-5 transition hover:border-[var(--ws-contact-accent)] hover:bg-[var(--ws-contact-input-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-input-bg)] group-hover:bg-[var(--ws-contact-accent)]/10">
<svg class="h-4 w-4 text-[var(--ws-contact-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-contact-text)]">Support</p>
<p class="mt-0.5 text-xs text-[var(--ws-contact-text-soft)]">Help center, in-console chat support, and Discord community for technical questions.</p>
</div>
</a>
<!-- Press & Events -->
<a href="mailto:press@example.com" class="group flex items-start gap-4 rounded-xl border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] p-5 transition hover:border-[var(--ws-contact-accent)] hover:bg-[var(--ws-contact-input-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-input-bg)] group-hover:bg-[var(--ws-contact-accent)]/10">
<svg class="h-4 w-4 text-[var(--ws-contact-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-contact-text)]">Press & Events</p>
<p class="mt-0.5 text-xs text-[var(--ws-contact-text-soft)]">Media inquiries, press releases, and event partnerships — reach our communications team.</p>
</div>
</a>
<!-- Privacy -->
<a href="#" class="group flex items-start gap-4 rounded-xl border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] p-5 transition hover:border-[var(--ws-contact-accent)] hover:bg-[var(--ws-contact-input-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-input-bg)] group-hover:bg-[var(--ws-contact-accent)]/10">
<svg class="h-4 w-4 text-[var(--ws-contact-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-contact-text)]">Privacy Requests</p>
<p class="mt-0.5 text-xs text-[var(--ws-contact-text-soft)]">Data subject access, deletion, or portability requests under GDPR and applicable law.</p>
</div>
</a>
<!-- Security -->
<a href="#" class="group flex items-start gap-4 rounded-xl border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] p-5 transition hover:border-[var(--ws-contact-accent)] hover:bg-[var(--ws-contact-input-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-input-bg)] group-hover:bg-[var(--ws-contact-accent)]/10">
<svg class="h-4 w-4 text-[var(--ws-contact-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286Zm0 13.036h.008v.008H12v-.008Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-contact-text)]">Vulnerability Disclosure</p>
<p class="mt-0.5 text-xs text-[var(--ws-contact-text-soft)]">Responsible disclosure for security vulnerabilities — report via our bug bounty program.</p>
</div>
</a>
</div>
</div>
<!-- Right: sales / main contact form -->
<div class="rounded-2xl border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] p-8">
<h2 class="text-xl font-bold text-[var(--ws-contact-text)]">Contact sales</h2>
<p class="mt-1 text-sm text-[var(--ws-contact-text-soft)]">Tell us about your project — we'll be in touch within one business day.</p>
<form class="mt-7 space-y-5" novalidate>
<div class="grid gap-5 sm:grid-cols-2">
<div>
<label for="cf-first" class="block text-xs font-medium text-[var(--ws-contact-label)]">First name <span class="text-red-500" aria-hidden="true">*</span></label>
<input id="cf-first" type="text" autocomplete="given-name" required
class="mt-1.5 w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:text-[var(--ws-contact-text-muted)] focus:border-[var(--ws-contact-accent)] focus:ring-1 focus:ring-[var(--ws-contact-accent)] focus:outline-none" placeholder="Jane">
</div>
<div>
<label for="cf-last" class="block text-xs font-medium text-[var(--ws-contact-label)]">Last name <span class="text-red-500" aria-hidden="true">*</span></label>
<input id="cf-last" type="text" autocomplete="family-name" required
class="mt-1.5 w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:text-[var(--ws-contact-text-muted)] focus:border-[var(--ws-contact-accent)] focus:ring-1 focus:ring-[var(--ws-contact-accent)] focus:outline-none" placeholder="Doe">
</div>
</div>
<div>
<label for="cf-email" class="block text-xs font-medium text-[var(--ws-contact-label)]">Work email <span class="text-red-500" aria-hidden="true">*</span></label>
<input id="cf-email" type="email" autocomplete="email" required
class="mt-1.5 w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:text-[var(--ws-contact-text-muted)] focus:border-[var(--ws-contact-accent)] focus:ring-1 focus:ring-[var(--ws-contact-accent)] focus:outline-none" placeholder="jane@company.com">
</div>
<div>
<label for="cf-role" class="block text-xs font-medium text-[var(--ws-contact-label)]">Role <span class="text-red-500" aria-hidden="true">*</span></label>
<div class="relative mt-1.5">
<select id="cf-role" required
class="w-full appearance-none rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] focus:border-[var(--ws-contact-accent)] focus:ring-1 focus:ring-[var(--ws-contact-accent)] focus:outline-none">
<option value="" disabled selected>Select your role</option>
<option>Engineer / Developer</option>
<option>Product Manager</option>
<option>Data Scientist</option>
<option>Executive / C-Suite</option>
<option>Other</option>
</select>
<svg class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
<div>
<div class="flex items-baseline justify-between">
<label for="cf-project" class="block text-xs font-medium text-[var(--ws-contact-label)]">Project description</label>
<span class="text-xs text-[var(--ws-contact-text-muted)]" id="cf-counter" aria-live="polite">0 / 500</span>
</div>
<textarea id="cf-project" rows="4" maxlength="500" aria-describedby="cf-counter"
oninput="document.getElementById('cf-counter').textContent = this.value.length + ' / 500'"
class="mt-1.5 w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:text-[var(--ws-contact-text-muted)] focus:border-[var(--ws-contact-accent)] focus:ring-1 focus:ring-[var(--ws-contact-accent)] focus:outline-none resize-none"
placeholder="Describe your use case, team size, and timeline..."></textarea>
</div>
<div class="flex items-start gap-3">
<input id="cf-marketing" type="checkbox" class="mt-0.5 h-4 w-4 rounded border-[var(--ws-contact-input-border)] accent-[var(--ws-contact-accent)]">
<label for="cf-marketing" class="text-xs text-[var(--ws-contact-text-soft)]">I agree to receive marketing communications about products and events.</label>
</div>
<p class="text-xs text-[var(--ws-contact-text-muted)]">By submitting, you agree to our <a href="#" class="underline hover:text-[var(--ws-contact-text)]">Terms of Service</a> and <a href="#" class="underline hover:text-[var(--ws-contact-text)]">Privacy Policy</a>.</p>
<button type="submit" class="w-full rounded-lg bg-[var(--ws-contact-submit-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-contact-submit-text)] transition hover:bg-[var(--ws-contact-submit-bg-hover)]">Send message</button>
</form>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only Copy & Paste Requires JS
Stable Published
contactsalessupportoptionsformsplitenterprise
Slots
| Name | Required | Description |
|---|---|---|
| options | Yes | Left column — support channel cards with icon, title, and description. |
| form | Yes | Right column — main contact or sales form. |
Two-column contact section: left side shows 3–4 support channel cards (each links to a different contact path — help, press, privacy, security), right side has the main sales/contact form. Form includes first/last name, email, role dropdown, project description textarea with live character counter (0/500), marketing opt-in checkbox, and legal notice. Minimal inline JS for the counter only.