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.

Contact page content source

---

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

Contact form endpoint in settings

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)

Contact page content source

---

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