Contact page

Contact information page at /contact — a simple list of email addresses with no required components.

The contact sub-page renders contact information at /contact. The default implementation is a plain list of email addresses — replace it with a form or anything else your stack supports.

Enable / disable

pages:
  contact: true   # false to suppress /contact

Starter implementation

The company-site template scaffolds src/pages/contact.astro:

---
import BaseLayout from '@publier/shell/layouts/base-layout.astro';
---

<BaseLayout title="Contact — My Company" description="Sales, support, and general inquiries.">
  <main class="max-w-xl mx-auto my-12 px-6 prose">
    <h1>Contact</h1>
    <ul>
      <li><strong>Sales:</strong> <a href="mailto:[email protected]">[email protected]</a></li>
      <li><strong>Support:</strong> <a href="mailto:[email protected]">[email protected]</a></li>
      <li><strong>Press:</strong> <a href="mailto:[email protected]">[email protected]</a></li>
      <li><strong>Security:</strong> <a href="mailto:[email protected]">[email protected]</a></li>
    </ul>
    <p>We aim to respond within 1 business day.</p>
  </main>
</BaseLayout>

Adding a contact form

Replace the email list with a Qwik component$() form that posts to your backend or a form service:

---
import ContactForm from '../components/ContactForm';
import BaseLayout from '@publier/shell/layouts/base-layout.astro';
---

<BaseLayout title="Contact — My Company">
  <main class="max-w-xl mx-auto my-12 px-6">
    <h1>Contact</h1>
    <ContactForm />
  </main>
</BaseLayout>

Create src/components/ContactForm.tsx as a Qwik component$() with useSignal state for the form fields.