contact faq form accordion self-service support contact faq form accordion questions support help contact form with FAQ section contact page with frequently asked questions
Contact with FAQ
Fetch pattern JSON:
curl https://webspire.de/patterns/contact/faq.json faq.html
<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<!-- Heading -->
<div class="mx-auto max-w-2xl 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-4 text-lg text-[var(--ws-contact-text-soft)]">Have a question? Check our FAQ or send us a message directly.</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
<!-- Contact Form -->
<div>
<h3 class="text-xl font-semibold text-[var(--ws-contact-text)]">Send us a message</h3>
<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>
<label for="faq-contact-name" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Name</label>
<input type="text" id="faq-contact-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)]">
</div>
<div>
<label for="faq-contact-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
<input type="email" id="faq-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="faq-contact-message" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
<textarea id="faq-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="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>
<!-- FAQ Accordion -->
<div>
<h3 class="text-xl font-semibold text-[var(--ws-contact-text)]">Frequently asked questions</h3>
<p class="mt-2 text-sm text-[var(--ws-contact-text-soft)]">Find quick answers to common questions below.</p>
<div class="mt-8 divide-y divide-[var(--ws-contact-input-border)] border-t border-[var(--ws-contact-input-border)]">
<details class="group py-5">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-[var(--ws-contact-text)]">
What is the typical response time?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-contact-text-soft)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="mt-3 text-sm text-[var(--ws-contact-text-soft)]">We typically respond within one business day. For urgent matters, please mention it in your message and we'll prioritize your request.</p>
</details>
<details class="group py-5">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-[var(--ws-contact-text)]">
Do you offer phone support?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-contact-text-soft)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="mt-3 text-sm text-[var(--ws-contact-text-soft)]">Phone support is available for enterprise customers on weekdays from 9 AM to 5 PM CET. All other customers can reach us via email or the contact form.</p>
</details>
<details class="group py-5">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-[var(--ws-contact-text)]">
Can I schedule a demo?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-contact-text-soft)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="mt-3 text-sm text-[var(--ws-contact-text-soft)]">Absolutely! Send us a message through the form with your preferred dates and we'll set up a personalized demo session for your team.</p>
</details>
<details class="group py-5">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-[var(--ws-contact-text)]">
Where are you located?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-contact-text-soft)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="mt-3 text-sm text-[var(--ws-contact-text-soft)]">Our main office is in Berlin, Germany. We also have team members across Europe and work with clients worldwide.</p>
</details>
<details class="group py-5">
<summary class="flex cursor-pointer items-center justify-between text-sm font-semibold text-[var(--ws-contact-text)]">
What information should I include in my message?
<svg class="h-5 w-5 shrink-0 text-[var(--ws-contact-text-soft)] transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</summary>
<p class="mt-3 text-sm text-[var(--ws-contact-text-soft)]">Please include a brief description of your project or question, your timeline, and any relevant links. The more context you provide, the faster we can help.</p>
</details>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
contactfaqformaccordionself-servicesupport
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| form | Yes | Contact form with name, email, and message fields. |
| faq | Yes | FAQ accordion with expandable question/answer items. |
Split-layout contact section with a form on the left and an FAQ accordion on the right. The FAQ uses native <details>/<summary> elements for zero-JS interactivity. Stacks vertically on mobile with the form on top. Ideal for reducing support tickets by answering common questions alongside the contact form.