Contact Page - Complete Customization Guide

The Contact page is located at src/pages/contact.js, but all content is controlled by data/Contact.json. You can change SEO, header text, and contact info without touching React code. This page also includes a working contact form powered by Formspree.

Where to Edit

Open your project in VS Code
Go to the data/ or src/data/ folder
Open Contact.json
Edit and save, then check at http://localhost:3000/contact

1. SEO and Form Config

At the top of Contact.json, you will find the SEO and email configuration.

  "title": "Hire Docusaurus Web Developer",
  "description": "Contact Website developer docusaurus - modern documentation site themes template",
  "url": "/contact",
  "email_id": "Your endpoint email id",
  "image": "img/contact.svg",

What to change:

title: SEO title and browser tab title. Example: Contact Us - Docusar or Hire Docusaurus Developer
description: Meta description for Google (150-160 chars). Example: Have a Docusaurus project? Contact our team for custom development, CMS setup, and documentation help.
url: Route for this page. Leave it as /contact unless you rename the file in pages/
image: Social sharing image. When someone shares your contact page on Twitter or Discord, this image shows. Put the image in static/img/ and set the path like img/contact.svg
email_id: This is the most important field for the form to work. This is your Formspree endpoint ID.

How to get email_id (Formspree Setup):

Go to https://formspree.io and create a free account
Click New Form
Enter the email address where you want to receive messages
Formspree will give you an endpoint like https://formspree.io/f/xqkrbqpl - the ID is xqkrbqpl
Copy that ID and paste it into the email_id field in your JSON:

  "email_id": "xqkrbqpl"

Without this ID, the contact form will not send emails. If you use the Gumroad docs from Docusar, check the Gumroad documentation PDF for your included Formspree setup guide.

2. Header Area

This is the top section of the contact page with the title and description.

  "header": {
    "title": "Contact Docusa",
    "description": "If you need help and information, or you have docusaurus project , you can contact our team dev"
  }

How to edit:

title: Main H1. Example: Let's Talk or Contact Our Team
description: Short paragraph under the title. Explain how people can reach you and the response time. Example: Have a project in mind? Fill the form or use the contact info below. We reply within 24 hours.

3. Contact Info Cards

This section shows your contact details as cards (Showroom, Phone, WhatsApp, Email, etc). You can add unlimited items.

Basic Structure:

  "contact_info": [
    {
      "title": "Your contact info 1",
      "content": "Your contact info text 1"
    }
  ]

How to add new info:

To add new contact info, copy-paste an existing object inside the array and edit it:

  "contact_info": [
    {
      "title": "Showroom",
      "content": "Hollywood , San Angola - Delajabu - USS"
    },
    {
      "title": "Phone",
      "content": "+6287819355589"
    },
    {
      "title": "Whatsapp",
      "content": "+62895339403223"
    },
    {
      "title": "Email",
      "content": "axcora@gmail.com"
    },
    {
      "title": "Office Hours",
      "content": "Monday - Friday, 9AM - 5PM GMT+7"
    }
  ]

Real implementation with your own data:

  "contact_info": [
    {
      "title": "Email",
      "content": "hello@yourdomain.com"
    },
    {
      "title": "WhatsApp",
      "content": "+62 878-1935-5589"
    },
    {
      "title": "Location",
      "content": "Jakarta, Indonesia - Available worldwide remotely"
    },
    {
      "title": "Response Time",
      "content": "Within 24 hours"
    }
  ]

Tips:

title is the label (e.g., Phone, Email, Address)
content is the value. You can put phone numbers, emails, addresses, or hours
Each object automatically becomes a card in the UI via the src/components/Contact/List/ component
To remove info, delete the whole object { "title": "...", "content": "..." },
Do not forget the comma between objects, but no comma after the last object

4. Contact Form - How It Works

The contact page has a form that uses your email_id. The form code is in src/pages/contact.js. You do not need to edit it, but if you want to customize the fields, open contact.js and find the form:

<form action={`https://formspree.io/f/${email_id}`} method="POST">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send Message</button>
</form>

You can add or remove inputs, but keep the name attributes for Formspree to receive the data.

After Editing

Save Contact.json
Run npm run start if it is not running
Open http://localhost:3000/contact
Test the form by sending a message to yourself

Common Errors:

Form not sending: Check that email_id is correct and the Formspree form is verified (check your email for the verification link from Formspree)
Contact info not showing: Check the JSON syntax - missing comma or extra comma. Use https://jsonlint.com to validate the JSON
Image not showing: Make sure the image file exists in static/img/ and the path is correct without a leading slash

Where to Edit​

1. SEO and Form Config​

2. Header Area​

3. Contact Info Cards​

4. Contact Form - How It Works​

After Editing​