contact minimal form simple narrow contact minimal simple form email message simple contact form minimal contact section
Contact Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/contact/minimal.json minimal.html
<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
<div class="mx-auto max-w-xl px-6">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-contact-text)] sm:text-4xl">Get in touch</h2>
<p class="mt-3 text-base text-[var(--ws-contact-text-soft)]">We'd love to hear from you. Fill out the form below and we'll respond within 24 hours.</p>
</div>
<form class="mt-10 space-y-5">
<div>
<label for="min-name" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Name</label>
<input type="text" id="min-name" name="name" autocomplete="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)]"
placeholder="Your name">
</div>
<div>
<label for="min-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
<input type="email" id="min-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)]"
placeholder="you@company.com">
</div>
<div>
<label for="min-message" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
<textarea id="min-message" name="message" rows="5" 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>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
contactminimalformsimplenarrow
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Title and description. |
| form | Yes | Simple form with name, email, and message. |
Simple centered contact form in a narrow column (max-w-xl). Just name, email, message, and a submit button. No side panels, no icons — pure simplicity. Ideal for portfolios and personal sites.