Skip to content

Email Backup Unsubscribe

Purpose: The fallback unsubscribe page, reached when an email's unsubscribe link has no valid token. Template: templates/system/email-backup-unsubscribe.html Settings live in: Theme settings › System page › Email backup unsubscribe Best for: Recipients who click unsubscribe from a forwarded or expired email.

What it does

Renders HubSpot's {% email_simple_subscription %} tag, which asks the visitor to type their email address so it can be unsubscribed. The form only appears when the page is reached from a real email link. In the theme editor preview HubSpot shows its error message instead, so the input and submit button are not visible there — that is the preview, not a fault in the page.

Elements and the group that styles each

On the page Field group
Heading (<h1>) Title
Sub heading (<h4>) Subheader
Post submit status line (<h3>) Status message
Email field and submit Form style
Gap between form rows Spacing between form fields — per device
Card behind the content Add card → Card

Variants worth demoing

  1. Card layout — Add card on, subtle shadow
  2. Dark — Color scheme → Dark over a dark gradient
  3. Left aligned — Content alignment → Left
  4. Glow backdrop — two radial glows behind the card
  5. Compact — tight spacing, no card

"I want to…" → do this

Goal Setting
Restyle the confirmation line the Status message group
Change the form look Form style › Style — Style 1 / 2 / 3
Make the submit full width Form style › Make button full width
Space the form rows Spacing between form fields
Put it on a card Add card on, then Card

Complete field reference

Every field in Theme settings › System page › Email backup unsubscribe (exhaustive). Generated from the theme fields.json, do not hand edit. (required) marks required fields. Conditional fields note what reveals them.

  • Color scheme (required) — color_scheme · [choice] · choices: light / dark · default: light Light or Dark for this page
  • Background «background» (group)
  • Background type (required) — type · [choice] · choices: none / color / gradient · default: none
  • Color (required) — color · [color] · default: {"color":"#1830A9","opacity":100} (shown when type = color)
  • Gradient (required) — gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when type = gradient)
  • Add radial glow — add_radial_glow · [boolean] · default: False Enable a radial gradient glow overlay on top of the section background.
  • Glow color (required) — glow_color · [color] · default: {"color":"#029CF5","opacity":100} (shown when add_radial_glow = true)
  • Glow position (required) — glow_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: top center (shown when add_radial_glow = true)
  • Glow size (required) — glow_size · [number] · default: 800 (shown when add_radial_glow = true)
  • Glow opacity (required) — glow_opacity · [number] · default: 20 (shown when add_radial_glow = true)
  • Add second glow — add_second_glow · [boolean] · default: False (shown when add_radial_glow = true) Enable a second radial glow for a layered depth effect.
  • Second glow color (required) — glow_2_color · [color] · default: {"color":"#029CF5","opacity":100} (shown when add_second_glow = true)
  • Second glow position (required) — glow_2_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: bottom right (shown when add_second_glow = true)
  • Second glow size (required) — glow_2_size · [number] · default: 600 (shown when add_second_glow = true)
  • Second glow opacity (required) — glow_2_opacity · [number] · default: 18 (shown when add_second_glow = true)
  • Page container «page_container» (group)
  • Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: default Theme default, full width, or your own
  • Desktop (required) — large_screen · [number] · default: 1240 (shown when customize_container = custom) Applies when Custom
  • Tablet (required) — medium_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
  • Mobile (required) — small_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
  • Container alignment (required) — container_alignment · [choice] · choices: center / left / right · default: center (shown when customize_container = custom) Applies when Custom
  • Inner page container «inner_container» (group)
  • Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: custom Theme default, full width, or your own
  • Desktop (required) — large_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
  • Tablet (required) — medium_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
  • Mobile (required) — small_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
  • Content alignment (required) — content_alignment · [choice] · choices: center / left / right · default: center
  • Spacing «spacing» (group)
  • Desktop (required) — desktop · [spacing] · default: {"padding":{"top":{"value":120,"units":"px"},"bottom":{"value":120,… · hides: margin
  • Tablet (required) — tablet · [spacing] · default: {"padding":{"top":{"value":80,"units":"px"},"bottom":{"value":80,"u… · hides: margin
  • Mobile (required) — mobile · [spacing] · default: {"padding":{"top":{"value":60,"units":"px"},"bottom":{"value":60,"u… · hides: margin
  • Title «title» (group)
  • Font — font · [font] · default: {"variant":"700"} · hides: bold, color, italic, size, underline Family and weight only
  • Font size [desktop] — font_size_desktop · [number] · default: 36
  • Font size [tablet] — font_size_tablet · [number] · default: 28
  • Font size [mobile] — font_size_mobile · [number] · default: 24
  • Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Color — color · [color] · default: {"color":"#12151B","opacity":100} (shown when color_type = color) Shown when Color type is Color
  • Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
  • Font style (required) — font_style · [choice] · choices: none / uppercase / lowercase / capitalize · default: none
  • Letter spacing — letter_spacing · [number] · default: -0.5
  • Line height — line_height · [number] · default: 1.2
  • Spacing below element [desktop] — spacing_below_desktop · [number] · default: 18
  • Spacing below element [tablet] — spacing_below_tablet · [number] · default: 16
  • Spacing below element [mobile] — spacing_below_mobile · [number] · default: 14
  • Subheader «subheader» (group)
  • Font — font · [font] · default: {"variant":"700"} · hides: bold, color, italic, size, underline Family and weight only
  • Font size [desktop] — font_size_desktop · [number] · default: 20
  • Font size [tablet] — font_size_tablet · [number] · default: 18
  • Font size [mobile] — font_size_mobile · [number] · default: 16
  • Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Color — color · [color] · default: {"color":"#12151B","opacity":100} (shown when color_type = color) Shown when Color type is Color
  • Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
  • Font style (required) — font_style · [choice] · choices: none / uppercase / lowercase / capitalize · default: none
  • Letter spacing — letter_spacing · [number] · default: -0.2
  • Line height — line_height · [number] · default: 1.35
  • Spacing below element [desktop] — spacing_below_desktop · [number] · default: 18
  • Spacing below element [tablet] — spacing_below_tablet · [number] · default: 16
  • Spacing below element [mobile] — spacing_below_mobile · [number] · default: 14
  • Status message «status_message» (group)
  • Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline Family and weight only
  • Font size [desktop] — font_size_desktop · [number] · default: 18
  • Font size [tablet] — font_size_tablet · [number] · default: 17
  • Font size [mobile] — font_size_mobile · [number] · default: 16
  • Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Color — color · [color] · default: {"color":"#5A6472","opacity":100} (shown when color_type = color) Shown when Color type is Color
  • Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
  • Font style (required) — font_style · [choice] · choices: none / uppercase / lowercase / capitalize · default: none
  • Letter spacing — letter_spacing · [number] · default: -0.2
  • Line height — line_height · [number] · default: 1.5
  • Spacing below element [desktop] — spacing_below_desktop · [number] · default: 18
  • Spacing below element [tablet] — spacing_below_tablet · [number] · default: 16
  • Spacing below element [mobile] — spacing_below_mobile · [number] · default: 14
  • Spacing between form fields «between_spacing» (group)
  • Spacing between form fields [desktop] (required) — spacing_between_form_fields_desktop · [number] · default: 14 Desktop value
  • Spacing between form fields [tablet] (required) — spacing_between_form_fields_tablet · [number] · default: 14 Tablet value
  • Spacing between form fields [mobile] (required) — spacing_between_form_fields_mobile · [number] · default: 14 Mobile value
  • Form style «input_field» (group)
  • Style (required) — style · [choice] · choices: form-1 / form-2 / form-3 · default: form-1
  • Make button full width — make_button_full_width · [boolean] · default: False
  • Add card — add_card · [boolean] · default: False
  • Card «card» (group — inline) (shown when add_card = true)
  • Background type (required) — background_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Background color — background_color · [color] · default: {"color":"#FBFCFE","opacity":100} (shown when background_type = color) Shown when Background type is Color
  • Background gradient (required) — background_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when background_type = gradient)
  • Round corner (required) — round_corner · [choice] · choices: round-0 / round-s / round-m / round-l / round-xl / round-xxl / custom · default: round-xl Theme scale, or Custom for your own value
  • Custom round corner (required) — custom_round_corner · [number] · default: 16 (shown when round_corner = custom) Shown when Round corner is Custom
  • Show border — show_border · [boolean] · default: False
  • Border width — border_width · [number] · default: 1 (shown when show_border = true)
  • Border color (required) — border_color · [choice] · choices: default / custom · default: default (shown when show_border = true) Default follows the color scheme
  • Custom border color — custom_border_color · [color] · default: {"color":"#E3E7EE","opacity":100} (shown when show_border = true AND border_color = custom) Shown when Border color is Custom
  • Shadow (required) — shadow · [choice] · choices: none / light-shadow / regular-shadow / dark-shadow · default: none Presets from Theme Settings, Elements, Shadows
  • Card spacing [desktop] (required) — spacing_in_card_desktop · [spacing] · default: {"padding":{"top":{"value":44,"units":"px"},"bottom":{"value":44,"u… · hides: margin
  • Card spacing [tablet] (required) — spacing_in_card_tablet · [spacing] · default: {"padding":{"top":{"value":36,"units":"px"},"bottom":{"value":36,"u… · hides: margin
  • Card spacing [mobile] (required) — spacing_in_card_mobile · [spacing] · default: {"padding":{"top":{"value":28,"units":"px"},"bottom":{"value":28,"u… · hides: margin

Total fields: 85 · Template: templates/system/email-backup-unsubscribe.html

Notes

Where the content comes from

System pages have no page editor. HubSpot renders the body from its own stock module, and the theme only styles what that module emits. That is why this group holds typography, colour, spacing and layout but no text fields: there is nowhere in the UI to type page copy, so the wording comes from HubSpot (or, for the error pages, from the theme's translation files).

Colour scheme

Color scheme is the first field and drives scheme-light / scheme-dark on the section. Every element whose Color type is left on Default follows it, so the page flips between palettes with one control. Set the palettes themselves in Theme settings › Light / Dark color scheme.

Containers

Page container sets the outer width, Inner page container the content column. Both offer Theme's default (inherit Theme settings › Container spacing), Full width, or Custom with per breakpoint widths.

Total fields: 85

Why the form is invisible in preview

{% email_simple_subscription %} needs a valid token from an email link. Without one it renders "There was a problem loading the page…". The theme still styles the full form (#email-prefs-form, input.email-edit, #submitbutton) for the real case.