pricing enterprise contact form sales custom pricing enterprise contact form sales custom inquiry demo enterprise pricing with contact form custom plan inquiry section
Pricing Enterprise Form
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/enterprise-form.json enterprise-form.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-6xl px-6">
<div class="grid gap-12 lg:grid-cols-2 lg:items-center">
<!-- Left: Content -->
<div>
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Enterprise</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Need more?</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Get a custom solution tailored to your organization's needs.</p>
<ul class="mt-8 space-y-4">
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<div>
<p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Unlimited team seats</p>
<p class="text-sm text-[var(--ws-pricing-text-soft)]">Scale without per-seat pricing. Add your entire organization.</p>
</div>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<div>
<p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Custom integrations</p>
<p class="text-sm text-[var(--ws-pricing-text-soft)]">Connect with your existing tools through a dedicated API.</p>
</div>
</li>
<li class="flex items-start gap-3">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
<div>
<p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Dedicated account manager</p>
<p class="text-sm text-[var(--ws-pricing-text-soft)]">A single point of contact for onboarding and ongoing support.</p>
</div>
</li>
</ul>
</div>
<!-- Right: Contact form -->
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Contact Sales</h3>
<p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">We'll get back to you within one business day.</p>
<form class="mt-6 space-y-4">
<div>
<label for="ef-name" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Name</label>
<input type="text" id="ef-name" placeholder="Jane Smith" class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
</div>
<div>
<label for="ef-email" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Email</label>
<input type="email" id="ef-email" placeholder="jane@company.com" class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
</div>
<div>
<label for="ef-company" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Company</label>
<input type="text" id="ef-company" placeholder="Acme Inc." class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
</div>
<div>
<label for="ef-message" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Message</label>
<textarea id="ef-message" rows="3" placeholder="Tell us about your needs..." class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20"></textarea>
</div>
<button type="submit" class="w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Get in touch</button>
</form>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingenterprisecontactformsalescustom
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Enterprise heading and subtitle. |
| features | Yes | Three enterprise feature bullet points with descriptions. |
| form | Yes | Contact sales form with name, email, company, message fields. |
Two-column enterprise pricing section. Left side has heading, description, and three feature bullet points with checkmarks and secondary descriptions. Right side has a “Contact Sales” form card with name, email, company, and message fields plus submit button. Stacks vertically on mobile.