Email Subscription Confirmation¶

Purpose: The page shown after someone unsubscribes, including the optional "why did you unsubscribe" survey. Template: templates/system/email-subscription-confirmation.html Settings live in: Theme settings › System page › Email subscriptions confirmation Best for: The confirmation step at the end of an unsubscribe flow.

What it does¶

Renders HubSpot's @hubspot/email_subscriptions_confirmation module: a confirmation line, the address that was changed, an optional survey with radio options and a free text box, and a link back to full preferences. Radios and the text box are HubSpot's markup, re skinned from this group's own fields — they no longer depend on Theme › Form.

Elements and the group that styles each¶

Variants worth demoing¶

1. With survey — the default flow, radios plus free text
2. Card layout — Add card on with a shadow
3. Dark — Color scheme → Dark
4. Roomy survey — larger Survey spacing values
5. Tall free text box — Other option box height raised

"I want to…" → do this¶

Complete field reference¶

Every field in Theme settings › System page › Email subscriptions confirmation (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":"#000046","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":"#1CB5E0","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":"#C084FC","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
• Large screen (required) — large_screen · [number] · default: 1240 (shown when customize_container = custom) Applies when Custom
• Medium screen (required) — medium_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
• Small screen (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
• Large screen (required) — large_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Medium screen (required) — medium_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Small screen (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
• Email address «email_address» (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
• Description «description» (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":"#3A4250","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
• Success message «success_message» (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
• Survey prompt «survey_prompt» (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
• Return content «return_content» (group)
• Disclaimer text «disclaimer» (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":"#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.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
• Manage button style (required) — manage_button_style · [choice] · choices: btn-1 / btn-2 / btn-3 / btn-4 / btn-5 / btn-6 / btn-7 / btn-8 · default: btn-1
• Manage button size (required) — manage_button_size · [choice] · choices: small / regular / large · default: regular Overrides the size set on the button style
• Make manage button full width in mobile — manage_button_full_width_in_mobile · [boolean] · default: False Mobile only
• Error text «error_text» (group)
• Font size desktop (required) — font_size_desktop · [number] · default: 13 Desktop size
• Font size tablet (required) — font_size_tablet · [number] · default: 13 Tablet size
• Font size mobile (required) — font_size_mobile · [number] · default: 13 Mobile size
• Survey spacing «between_spacing» (group)
• Spacing above survey desktop (required) — spacing_above_survey_desktop · [number] · default: 18 Desktop value
• Spacing above survey tablet (required) — spacing_above_survey_tablet · [number] · default: 18 Tablet value
• Spacing above survey mobile (required) — spacing_above_survey_mobile · [number] · default: 18 Mobile value
• Spacing above options desktop (required) — spacing_above_options_desktop · [number] · default: 14 Desktop value
• Spacing above options tablet (required) — spacing_above_options_tablet · [number] · default: 14 Tablet value
• Spacing above options mobile (required) — spacing_above_options_mobile · [number] · default: 14 Mobile value
• Spacing between options desktop (required) — spacing_between_options_desktop · [number] · default: 12 Desktop value
• Spacing between options tablet (required) — spacing_between_options_tablet · [number] · default: 12 Tablet value
• Spacing between options mobile (required) — spacing_between_options_mobile · [number] · default: 12 Mobile value
• Spacing below options desktop (required) — spacing_below_options_desktop · [number] · default: 18 Desktop value
• Spacing below options tablet (required) — spacing_below_options_tablet · [number] · default: 18 Tablet value
• Spacing below options mobile (required) — spacing_below_options_mobile · [number] · default: 18 Mobile value
• Other option box height (required) — other_option_min_height · [number] · default: 80 Minimum height of the free-text box
• Radio button «radio_button» (group)
• Size (required) — size · [number] · default: 20 Width and height
• Round corner (required) — round_corner · [number] · default: 100 100 makes it fully round
• Show border — show_border · [boolean] · default: True Border when unselected
• Border width (required) — border_width · [number] · default: 1 (shown when show_border = true) Shown when Show border is on
• 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: 131 · Template: templates/system/email-subscription-confirmation.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: 131

Radio buttons¶

Colours are fixed to the scheme and are not fields: white when unselected with a --f-border border, the Accent colour when selected, white dot. Only size, corner radius and border width are adjustable.