> 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/subscribe-page.md).

# Subscribe Page

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

This guide explains how the Subscribe page works, what it depends on, and how to configure it.

### Route and Template

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

Create a Ghost page with slug `subscribe` so page title/excerpt/content render correctly.

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

***

### What the Subscribe Page Does

Travio’s Subscribe page is a newsletter-focused member subscription flow with:

1. Newsletter selection panel (multi-select)
2. Email input + subscribe submit
3. Live selected count (`selected/total`)
4. “Select all” and “Clear selection” actions
5. Loading/success/error state messages
6. Bottom CTA section

This is more advanced than a simple one-field subscribe form.

***

### Data Source for Newsletter Options

Newsletter options are pulled dynamically from Ghost:

* Source: `get "newsletters" limit="100"`

If newsletters exist:

* They are rendered as checkbox options.
* First newsletter is pre-selected by default.

If no newsletters exist:

* Page shows fallback text: no newsletters currently available.

<div data-with-frame="true"><figure><img src="/files/kXdSsiPa699eX9xxdxX9" alt=""><figcaption><p>Subscribe form shows newsletters configured in Membership -> Newsletters setting</p></figcaption></figure></div>

***

### Form Behavior

Template uses members form mode:

* `form_type="subscribe"`
* Email input is required
* Selected newsletter checkboxes are submitted with the form

UI interactions handled by theme JS:

* Updates selected/total count
* Enables/disables “Select all” and “Clear selection” buttons
* Supports quick bulk selection actions

***

### Content Mapping from page.subscribe

* `title` → main subscribe heading
* `custom_excerpt` (if set) → supporting text
* `excerpt` fallback if custom excerpt is empty

This content appears in the right-side form panel layout.

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

***

### Required Ghost Configuration

For full subscribe page functionality:

1. Members enabled in Ghost
2. At least one newsletter configured (recommended)
3. Email delivery configured (magic-link confirmation flow)

Without configured newsletters:

* Form still renders, but user won’t have meaningful newsletter choices.

***

### Template and Component Structure

* Route template: `subscribe.hbs`
* Shared component: `partials/common/members-form-subscribe-newsletters.hbs`

This component contains:

* Newsletter checkbox list
* Selection controls
* Form submit area
* State messages
* Alternate sign-in link

***

### User Experience Details

* Selected count label is updated dynamically
* Newsletter list supports multiple selections
* Submit state messaging includes loading/success/error feedback
* Alternate prompt links returning users to `/signin`

***

### Relationship to Other Member Pages

Subscribe page complements:

* `/signup/` for account creation
* `/signin/` for account access
* `/membership/` for plans and benefits

It is ideal for users who primarily want newsletters first, then deeper membership later.

***

### Common Issues

* No newsletter options shown: newsletters not configured in Ghost.
* Subscribe emails not received: mail delivery setup issue.
* Page title/content missing: subscribe slug page not created.
* Selection count not changing: JS blocked or theme script not loading.
* Confusion with signup page: clarify copy to explain newsletter-first intent.

***

### Quick Setup Checklist

* Page slug exists: `subscribe`
* Members enabled
* Newsletters configured
* Email delivery tested
* Selection controls and status messages verified