Contact Page

The contact page has its own collection (contact) and its own layout (src/pages/contact.astro). It does not use the generic [slug].astro template because it needs a form, a meta grid, and an image.

The file

src/content/contact/contact.md

Only one file lives in this folder. It contains everything the contact page needs.

Frontmatter fields

---
title: "Buy PaperHouse — $45 one-time."
subtitle: "One-time payment. Lifetime updates. Full source code."
kicker: "Buy / PaperHouse"
image: "https://picsum.photos/seed/contact/1200/1600"
imageCaption: "PaperHouse — Premium Astro Theme"
formAction: "https://formspree.io/f/YOUR_ID"
email: "hello@paperhouse.studio"
submitLabel: "Get PaperHouse — $45 →"
fields:
  - name: name
    placeholder: Your name
    type: text
    required: true
  - name: email
    placeholder: Your email
    type: email
    required: true
  - name: message
    placeholder: Tell us about your project
    type: textarea
    required: true
meta:
  - label: Email
    value: hello@paperhouse.studio
  - label: Response
    value: Within 24 hours
  - label: License
    value: One-time $45
  - label: Updates
    value: Lifetime, free
---

Form setup

The form uses Formspree by default. To set it up:

1. Sign up at formspree.io
2. Create a new form
3. Copy the form endpoint URL
4. Replace formAction in the frontmatter:

formAction: "https://formspree.io/f/abcd1234"

Formspree forwards submissions to your email. Free tier allows 50 submissions per month.

Alternatives: you can use any service that accepts POST forms — Netlify Forms, Basin, Formcarry, or your own server.

Fields

Each field has four properties:

- name: email
  placeholder: Your email
  type: email
  required: true

• name — the field identifier sent to the form service
• placeholder — the hint text inside the field
• type — text, email, textarea, or any HTML input type
• required — whether the field must be filled

Common field types:

• text — single line
• email — validates email format
• tel — phone number
• textarea — multi-line for messages

Meta grid

The right column shows a grid of labels and values:

meta:
  - label: Email
    value: hello@paperhouse.studio
  - label: Response
    value: Within 24 hours
  - label: License
    value: One-time $45
  - label: Updates
    value: Lifetime, free

The grid renders two columns on desktop, one on mobile. If a label is exactly Email, its value renders as a clickable mailto link.

Image

The image sits above the meta grid on the right column.

image: "https://picsum.photos/seed/contact/1200/1600"
imageCaption: "PaperHouse — Premium Astro Theme"

Replace with your own image:

1. Drop your image into public/contact.jpg
2. Update the frontmatter:

image: "/contact.jpg"
imageCaption: "Your studio — 2026"

Recommended aspect ratio: 3:4 (portrait).

Body content

Below the form on the left column, the markdown body renders in a prose layout:

## What you get

- Full source code — Astro 7 + Tailwind 4
- Documentation
- Lifetime updates

## How it works

1. Send the form
2. We send you a payment link
3. You ship your portfolio

Use this for pricing details, licensing, FAQs, or a short pitch.

Common changes

Change the form email

Edit email in the frontmatter. It appears twice: below the submit button, and in the meta grid.

Add a new field

Add to fields:

- name: budget
  placeholder: Budget range
  type: text
  required: false

Remove a field

Delete its entry from fields.

Change the submit button label

Edit submitLabel:

submitLabel: "Send message →"

Testing the form

Formspree shows a “Form submitted” message on success. After submitting a test form, check your Formspree dashboard to confirm receipt.

If you see a CORS error, verify the formAction URL is correct and starts with https://.