> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/crimson/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/crimson/custom-pages/contact.md).

# Contact

Crimson includes a dedicated **Contact** page with a clean **two-column layout**:

* **Left column:** support email + social links
* **Right column:** contact form (optional—only shown when a form endpoint is configured)

Note that the contact form is designed to work with a third-party form service (like Formspree) so submissions can be delivered to your email.

<figure><img src="/files/iOcq2zaAydh6jLUgIy06" alt=""><figcaption><p>Contact Page in Crimson</p></figcaption></figure>

### Routes and URL

Crimson enables the Contact page using a **template route** in `routes.yaml`:

```yaml
routes:
  /contact/:
    template: contact
```

This maps the URL **`/contact/`** to the theme template file **`contact.hbs`**. Template routes are the standard Ghost way to map a custom URL to a theme template.

***

### How the Contact page layout works

#### Two-column layout (default)

When a **CONTACT\_ENDPOINT** is provided, the Contact page displays:

* Left column: social links + support email
* Right column: contact form

<figure><img src="/files/llQ7qt9MGEdCHWfkGQ22" alt=""><figcaption><p>Contact Page with Contact Form</p></figcaption></figure>

#### Single-column layout (when the form is disabled)

If **no contact endpoint** is configured:

* The **contact form is hidden**
* The page becomes **single column** (only the left column is shown)

<figure><img src="/files/qnnbR569c5c3UWmMKVDs" alt=""><figcaption><p>Contact page without Contact Form</p></figcaption></figure>

{% hint style="success" %}
Adding contact form endpoint and social profile links is explained in [Code Injection](/crimson/getting-started/code-injection.md) and [Code Injection Variables](/crimson/getting-started/code-injection-variables.md)
{% endhint %}

***

### Configure the Contact email

Crimson pulls the “Contact email” from your **Ghost Portal Support email address**.

#### Why this matters

Ghost Portal uses a **default `noreply` address** unless you change it. Ghost explicitly recommends setting a real support email so members can reach you.

In a fresh install, that default “noreply…” address can cause your Contact page email to look wrong (often showing just “noreply”). So **set a proper support email first**.

#### How to change the Support email address

1. In Ghost Admin, open **Signup** **portal**
2. Click **Customize**
3. Open the **Account page** tab
4. Update the **Support email address**
5. Save

<figure><img src="/files/v4DM4IRRSOmjwVQ1cYe6" alt=""><figcaption><p>Open Portal settings in Ghost</p></figcaption></figure>

<figure><img src="/files/C7oer6npmJSnL0fLmzhf" alt=""><figcaption><p>Add the Support email address and save</p></figcaption></figure>

Ghost confirms the **Account tab** contains the **Support email address** setting, and that it’s publicly available inside the Portal interface.

**Recommended:** Use a real inbox like `support@yourdomain.com` (or a helpdesk email), not a noreply address.

***

### Configure the Contact form

Crimson’s Contact form is powered by a **form endpoint**. Crimson recommends using a third-party service like **Formspree** and adding the endpoint so you can receive submissions.

#### What is the endpoint?

It’s the URL where the form will send data (usually a POST request), for example:

* a Formspree endpoint - E.g. `https://formspree.io/f/abc123efg456`
* your own API endpoint (*advanced*)

#### Behavior when it’s not set

If `CONTACT_ENDPOINT` is an empty string (`''`):

* the form is hidden
* the Contact page becomes single-column (social/email only)

{% hint style="success" %}
Read [Code Injection Variables](/crimson/getting-started/code-injection-variables.md) for information on adding Contact Form Endpoint.
{% endhint %}

***

### Configure Social links

Crimson uses Ghost's `social_accounts` helper for site social links.

#### Site social accounts

Add your site-wide social accounts in:\
`Ghost Admin > Settings > General settings > Social accounts`

Crimson will automatically render any supported Ghost social accounts you connect there. If an account is not set in Ghost, Crimson does not show it.

#### WhatsApp

WhatsApp is controlled separately through Code Injection:

```javascript
//Contact Page WhatsApp link
//If no link is added, the WhatsApp will be hidden
WHATSAPP_LINK: 'https://www.whatsapp.com/ghost'
```

{% hint style="info" %}
If `WHATSAPP_LINK` is empty, the WhatsApp row stays hidden.
{% endhint %}

#### Important behavior

* `CONTACT_ENDPOINT` controls whether the contact form appears.
* Ghost Social accounts control the site social rows.
* `WHATSAPP_LINK` controls only the WhatsApp row.
* The same site social accounts are also reused in Crimson's footer social links.

***

Troubleshooting

<details>

<summary>Contact page shows only one column</summary>

Cause: `CONTACT_ENDPOINT` is empty.\
Fix: Add a valid endpoint (then the form column will appear).

</details>

<details>

<summary>Email shows as ‘noreply’ or looks incorrect</summary>

Cause: Portal support email is still the default `noreply`.\
Fix: Set **Support email address** in Portal → Account tab.

</details>

<details>

<summary><code>/contact/</code> is a 404 error</summary>

Cause: `routes.yaml` wasn’t uploaded or route is missing/incorrect.\
Fix: Upload routes in **Settings → Labs → Routes** and confirm the route exists.

</details>

<details>

<summary>Form submits but I don’t receive messages</summary>

Common causes:

* endpoint is wrong (paste error)
* your form provider requires verification/activation
* messages are going to spam
* your endpoint blocks requests (CORS / rate-limits) if it’s your own API

{% hint style="warning" %}
This issue is related to your Form endpoint provider/Domain/server.
{% endhint %}

</details>