Contact Form

Fetch pattern JSON: curl https://webspire.de/patterns/contact/base.json
base.html
<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid grid-cols-1 gap-16 lg:grid-cols-2">
      <!-- Info -->
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-contact-text)] sm:text-4xl">Get in touch</h2>
        <p class="mt-4 text-lg text-[var(--ws-contact-text-soft)]">Have a question or want to work together? Send us a message and we'll get back to you within 24 hours.</p>

        <div class="mt-10 space-y-6">
          <div class="flex items-start gap-4">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-action-bg)]/10 text-[var(--ws-contact-action-bg)]">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
            </div>
            <div>
              <p class="font-semibold text-[var(--ws-contact-text)]">Email</p>
              <p class="mt-1 text-[var(--ws-contact-text-soft)]">hello@webspire.de</p>
            </div>
          </div>

          <div class="flex items-start gap-4">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-action-bg)]/10 text-[var(--ws-contact-action-bg)]">
              <svg class="h-5 w-5" 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>
            </div>
            <div>
              <p class="font-semibold text-[var(--ws-contact-text)]">Office</p>
              <p class="mt-1 text-[var(--ws-contact-text-soft)]">Berlin, Germany</p>
            </div>
          </div>

          <div class="flex items-start gap-4">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-contact-action-bg)]/10 text-[var(--ws-contact-action-bg)]">
              <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
              <p class="font-semibold text-[var(--ws-contact-text)]">Response time</p>
              <p class="mt-1 text-[var(--ws-contact-text-soft)]">Within 24 hours on business days</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Form -->
      <form class="space-y-6">
        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
          <div>
            <label for="contact-first" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">First name</label>
            <input type="text" id="contact-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="contact-last" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Last name</label>
            <input type="text" id="contact-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="contact-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
          <input type="email" id="contact-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="contact-subject" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Subject</label>
          <select id="contact-subject" name="subject"
            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)] focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
            <option>General inquiry</option>
            <option>Bug report</option>
            <option>Feature request</option>
            <option>Partnership</option>
          </select>
        </div>
        <div>
          <label for="contact-message" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
          <textarea id="contact-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="Tell us how we can 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 sm:w-auto">Send message</button>
      </form>
    </div>
  </div>
</section>
Details

Family
contact
Tier
base
Kind
section
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
contactformemailsupportinquiry
Slots

Name	Required	Description
info	Yes	Contact details (email, location, hours).
form	Yes	Multi-field contact form.
Two-column layout: contact info on the left, form on the right. The info column stacks above the form on mobile. Includes email, location, and response time with icon badges. Form has name, email, subject dropdown, and textarea.