Update Contact Page — Astro Template Guide

documentation

Publih On: 2023-12-02

Learn how to update the contact page on the Blacks Astro JS template.

Full documentation: Contact page guide →

---

Where to Find the Contact Page

Open the file:

src/pages/contact/index.md

This file controls the content of your contact page.

---

Frontmatter Format

---
layout: ../../design/contact.astro
title: title for contact page here...
description: Your description in here
image: insert url image here..
---

write your contact content here...

---

What Each Field Does

Field	Purpose
layout	Contact page layout template. Don’t change this.
title	Page title — appears in the browser tab and SEO
description	Meta description — used by Google and social previews
image	Cover image for the contact page

---

Editing Contact Information

The contact details (address, phone, email) are stored in src/data/config.json under the contact section. Update them there — not in the contact page file.

Example — src/data/config.json:

"contact": {
  "address": "123 Creative Street",
  "city": "Los Angeles, CA 90001",
  "country": "United States",
  "phone": "+1 234 567 890",
  "email": "hello@yourdomain.com"
}

---

Save and Preview

After updating:

1. Save the file
2. The development server refreshes automatically
3. Visit localhost:4321/contact to see the result

---

Need Help?

If you need custom work or a headless CMS integrated, our team can help.

Headless CMS Integration →