Contact Page

What Is the Contact Page?

The contact page (/contact/) is a static page that includes a working contact form powered by Formspree. Formspree is a free service that receives form submissions and forwards them to your email — no backend server required.

The page lives at src/pages/contact.md and uses a custom layout (src/design/contact.astro). It displays contact information (address, phone, email) alongside a contact form.

---

Where It Lives

src/pages/
└── contact.md

Unlike the docs pages in src/content/docs/, this page lives directly in src/pages/. That means its URL is /contact/.

---

The Page File

src/pages/contact.md:

---
layout: ../design/contact.astro
title: Contact Us
description: Need help with Astro Docus setup? Contact us via form, email or Fiverr. Response within 24 hours.
formspree_id: mzzvqvpl
image: /src/assets/astrojs.svg
contact_title: Astro Docs
contact_description: For project and help please contact us.
contact_address: Hollywood 25th Aseoloey
contact_city: NewYork
contact_country: USA
contact_phone: +1234578
contact_email: axcora@gmail.com
---

### Contact Information

Contact us for template support, installation help, CMS integration or custom development.

We provide documentation setup, headless CMS integration with Decap CMS, Tina CMS and CloudCannon, and custom web application development. All services available on Fiverr with fast response.

For template purchase, get it on Gumroad for $65 one-time payment, unlimited sites.

Key fields in the frontmatter

Field	Purpose
layout	Points to the contact page layout
title	Page title (browser tab + SEO)
description	Meta description
formspree_id	Your Formspree form ID — this is what you need to change
image	Social preview image
contact_title	Heading shown on the page
contact_description	Short description under the heading
contact_address, contact_city, contact_country	Address shown in the contact info section
contact_phone	Phone number shown
contact_email	Email shown

---

How Formspree Works

Formspree is a form backend service. You create a form on their website, they give you a unique form ID, and you paste that ID into your contact page. When someone submits the form, Formspree:

1. Receives the submission
2. Filters spam
3. Sends the message to your email

No server, no database, no code. Just an ID.

The free plan includes 50 submissions per month — plenty for most personal projects and small sites .

---

Getting Your Own Formspree ID

Follow these steps to create a Formspree account and get your form ID. This takes about 5 minutes.

Step 1 — Sign Up

1. Go to: https://formspree.io
2. Click Get Started or Sign Up
3. Create an account using your email address
4. Verify your email — Formspree sends a confirmation link

Step 2 — Create a New Form

1. Log in to the Formspree dashboard
2. Click the + button in the top-left corner
3. Click New Form
4. Give your form a name, for example: Contact Form
5. Set the send-to email — this is where messages will be delivered
6. Click Create Form

Step 3 — Find Your Form ID

After creating the form, you will see an endpoint URL:

https://formspree.io/f/xxxxxxxx

The last part — xxxxxxxx — is your Form ID .

You can find this in two places:

• Integration tab — shows “Your form’s endpoint is: https://formspree.io/f/xxxxxxxx”
• Overview tab — shows the endpoint at the bottom

Step 4 — Copy the ID

Copy only the ID part, not the full URL.

For example, from https://formspree.io/f/mzzvqvpl, the ID is:

mzzvqvpl

---

Replacing the Default ID

The contact page ships with a placeholder ID (mzzvqvpl). You must replace it with your own ID from Formspree.

1. Open src/pages/contact.md
2. Find this line:

formspree_id: mzzvqvpl

3. Replace mzzvqvpl with your actual Formspree ID:

formspree_id: youridhere

4. Save the file

That’s it. The form now sends submissions to your email instead of the template author’s.

---

Testing the Form

After updating the ID:

1. Run npm run dev
2. Open http://localhost:4321/contact/
3. Fill in the form and submit
4. Check your email inbox — the message should arrive within a few seconds

If it doesn’t arrive:

• Check your spam folder
• Verify the ID is correct in contact.md
• Check the Formspree dashboard to see if the submission was received

---

Editing Contact Information

The contact details (address, phone, email) are stored in the frontmatter. To update them:

1. Open src/pages/contact.md
2. Find the relevant fields:

contact_title: Astro Docs
contact_description: For project and help please contact us.
contact_address: Hollywood 25th Aseoloey
contact_city: NewYork
contact_country: USA
contact_phone: +1234578
contact_email: axcora@gmail.com

3. Replace with your own information
4. Save

The layout (src/design/contact.astro) reads these fields and displays them on the page.

---

Rules for Editing

1. Never share your Formspree ID publicly — it’s not secret, but you don’t want random submissions from strangers.
2. Keep the YAML format correct — no tabs, only spaces. Frontmatter is sensitive to indentation.
3. Test after changing the ID — submit a test message to confirm it works.
4. One form per page — the template is designed for a single contact form.

---

Quick Recap

Formspree:
1. Sign up at formspree.io
2. Create a new form
3. Copy the ID from https://formspree.io/f/YOUR_ID
4. Paste it into contact.md → formspree_id

Contact page:
src/pages/contact.md
├── layout       → design/contact.astro
├── title        → page title
├── formspree_id → YOUR Formspree ID
├── contact_*    → address, phone, email
└── body text    → shown below contact info

• Formspree handles form submissions without a backend.
• Free plan includes 50 submissions per month.
• Your Form ID goes in formspree_id.
• Contact details are editable in the same file.