Editing the Contact Page

This page teaches you how to edit the Contact page in Finance App. You do not need to know how to code. You only need to edit one file and one external service.

By the end of this page, you will know:

• Where the file is located
• What each line does
• How to change the title, description, image, date, and message
• How the contact form works and how to connect it to your own email

Where the File Is

Open your project folder. Then open this path:

src/pages/contact/index.md

This file is the Contact page of your website. It becomes the route /contact/.

What the Contact Page Is For

The Contact page is where visitors send you a message. It has two parts:

• The page content — the text and image you see above the form
• The form itself — handled by Formspree, an external service

The Full File

Here is the complete src/pages/contact/index.md file that comes with the theme:

---
layout: ../../design/page/Contact.astro
title: "Contact — Finance App Astro JS Theme"
description: "Get in touch about the Finance App Astro JS theme, custom website builds, headless CMS integration, or documentation websites."
image: "https://images.unsplash.com/photo-1516163173352-d1c4d006f9ac"
formspree_id: https://formspree.io/f/yourformspree_id
pubDate: "2023-12-04"
---

Have a question about the Finance App Astro JS theme, or need help with a website project? Send a message and the team will get back to you within 1–2 business days.

What Each Line Does

Frontmatter

The block between the two --- lines at the top is called frontmatter. It tells Astro how to build this page.

Field	What It Does
layout	Which layout file to use. Do not change this.
title	The page title. Shown in the browser tab and search results.
description	A short summary of the page. Shown in search results and social previews.
image	The image shown at the top of the Contact page.
formspree_id	The URL that receives form submissions. You must replace this with your own.
pubDate	The publish date. Used for metadata.

Article Content

Everything below the second --- is the article content. It appears on the Contact page above the form.

How to Edit — Step by Step

Change the Page Title

1. Open src/pages/contact/index.md
2. Find the line starting with title:
3. Replace the text inside the quotes
4. Save the file

Example:

title: "Contact Us"

Important: Keep the double quotes " on both sides.

Change the Page Description

1. Find the line starting with description:
2. Replace the text inside the quotes
3. Save

Example:

description: "Send us a message and we will reply within two business days."

Change the Header Image

1. Put your image in public/img/
2. Find the line starting with image:
3. Replace the URL with your image path
4. Save

Using a local image:

image: "/img/your-image.avif"

Using an external image:

image: "https://example.com/your-image.jpg"

Change the Publish Date

1. Find the line starting with pubDate:
2. Replace the date with today’s date, in the format "YYYY-MM-DD"
3. Keep the double quotes

Example:

pubDate: "2026-01-15"

Change the Article Content

1. Find the text below the second --- line
2. Replace it with your own text
3. Save the file

Example:

Have a question about our product, or need help with a project?

Send a message and we will get back to you within two business days.

How the Contact Form Works

The contact form on this page does not send email directly from your website. Instead, it sends the form data to Formspree, a free service that forwards messages to your email.

Why Formspree

Static sites like Astro do not have a backend server. A service like Formspree is needed to receive and forward form submissions.

Setting Up Your Own Formspree Account

1. Go to:

https://formspree.io/

2. Create a free account
3. Create a new form
4. Formspree will give you a form URL that looks like:

https://formspree.io/f/xxxxxxxx

5. Copy that URL
6. Open src/pages/contact/index.md
7. Find the line starting with formspree_id:
8. Replace the URL with your own
9. Save the file

Example:

formspree_id: https://formspree.io/f/yourformid

After this change, every message sent through the Contact page will arrive at the email you registered with Formspree.

Testing the Form

1. Start the dev server with npm run dev
2. Open http://localhost:4321/contact/
3. Fill in the form and submit
4. Check the email you registered with Formspree

If you do not receive the message, check your spam folder, or log in to Formspree to see the submission log.

Rules for Frontmatter

• Keep the two --- lines. They mark the start and end of the frontmatter.
• Do not delete the layout line. It tells Astro which layout to use.
• Keep the spacing after the colon. Write title: "Contact", not title:"Contact".
• Use double quotes for title, description, and image.
• Do not use quotes for formspree_id — the URL goes without quotes.

Save and Preview

1. Save the file
2. If the dev server is running, the browser will reload automatically
3. If not, run:

npm run dev

4. Open http://localhost:4321/contact/ in your browser

Common Mistakes

Mistake	What Happens	Fix
Removed one of the --- lines	Build error	Add the missing --- line
Changed the layout path	Build error, page cannot find layout	Restore ../../design/page/Contact.astro
Did not replace formspree_id	Messages go to the theme author, not you	Replace with your own Formspree URL
Missing space after the colon	Field is not read correctly	Write title: "Contact", not title:"Contact"
Wrong image path	Broken image	Check the file exists in public/img/
Formspree URL has quotes	Form may not work	Do not put quotes around formspree_id

Relationship with Other Files

The Contact page uses its own file, its own layout, and an external form service.

File	What It Controls
src/pages/contact/index.md	The Contact page content
src/design/page/Contact.astro	The Contact page layout and form
src/data/config.json	The navbar and footer shown on this page
Formspree account	Where the form messages are sent

Next Step

After editing the Contact page, you can continue to edit the SEO settings or deployment steps.