> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/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/travio/custom-pages/contact-page.md).

# Contact Page

Live preview: <https://travio.themeupstudio.com/contact/>

This guide explains how the Contact page works, what controls its behavior, and how to configure it.

### Route and Template

* URL: `/contact/`
* Route source: `routes.yaml`
* Template file: `contact.hbs`
* Page data source: `data: page.contact`

Create a Ghost page with slug `contact` so title/excerpt/content can render in this layout.

<div data-with-frame="true"><figure><img src="/files/mY9BB4qXhZu6C9Af3RfS" alt=""><figcaption><p>Contact page content source</p></figcaption></figure></div>

***

### How Contact Page Works

Contact page has two operating modes:

1. Form Mode (when endpoint is configured)
2. Content Mode (when endpoint is not configured)

This behavior is controlled by theme setting `@custom.contact_form_endpoint`.

***

### Core Setting

#### contact\_form\_endpoint (Theme → Site Wide)

* Type: text (URL)
* Purpose: submission endpoint for contact form
* Example providers: Formspree, custom API endpoint, serverless form handlers

<div data-with-frame="true"><figure><img src="/files/uXpdrkio3zpQnRVkuQKN" alt=""><figcaption><p>Contact form endpoint in settings</p></figcaption></figure></div>

1. **If contact\_form\_endpoint is set**
   1. Travio renders a full contact form with:

      1. Name
      2. Email
      3. Message
      4. Submit button

      Form submits via POST directly to the configured endpoint.
2. **If contact\_form\_endpoint is empty**

   1. Travio hides the form and renders the page content (`{{content}}`) instead.

   This is useful if you want a static “How to contact us” page without a form.

***

### Content Mapping from page.contact

The Contact page template uses the `contact` page fields:

* `title` → main heading
* `custom_excerpt` (if present) → subtitle/description
* `excerpt` fallback when custom\_excerpt is empty
* `content` → shown only in Content Mode (no endpoint)

<div data-with-frame="true"><figure><img src="/files/mY9BB4qXhZu6C9Af3RfS" alt=""><figcaption><p>Contact page content source</p></figcaption></figure></div>

***

### Visual Media on Contact Page

Template supports decorative media around the form area:

* Uses site cover image (`@site.cover_image`) on one side (if available)
* Uses contact page feature image on the other side (if available)

These are decorative layout elements and do not affect form submission behavior.

***

### Form Fields and Validation

Rendered form fields:

* `name` (required)
* `email` (required, email type)
* `message` (required textarea)

Client-side validation is native HTML validation (required/type checks).

Endpoint-side validation/spam handling must be implemented by your form service.

***

### Security and Delivery Notes

Since form posts directly to your endpoint:

* Configure CORS/allowed origins if required by your backend
* Enable anti-spam controls on endpoint side (captcha/honeypot/provider tools)
* Verify success/failure UX based on provider behavior (redirects, JSON responses, etc.)
* Never expose sensitive secrets in frontend code injection for forms

***

### Recommended Setup Steps

1. Create page slug `contact`
2. Add title + short custom excerpt
3. (Optional) Add feature image for decorative side media
4. Set `contact_form_endpoint` in Theme settings
5. Test form submission end-to-end (including spam/error cases)

***

### Common Issues

* Form not showing: `contact_form_endpoint` is empty.
* Submissions not received: endpoint URL incorrect or endpoint misconfigured.
* Validation errors before submit: missing required fields or invalid email format.
* Design looks empty: no site cover image and no contact feature image configured.
* Unexpected response behavior: endpoint returns redirect/JSON not designed for current flow.

***

### Quick Checklist

* Page slug exists: `contact`
* Theme setting set: `contact_form_endpoint`
* Endpoint accepts POST with name, email, message
* Form submissions verified in production domain
* Optional decorative images configured