Adding more content to Email Subscription Preferences page

[HannaEs]

I need to add more content to a subscription preferences page; I learnt the other day it’s only possible by making changes in the email page’s code (Settings → Tools → Marketing → Email).

I introduced the changes, but now I can’t see what it’s going to look like on the page as the “Preview” shows nothing at all:

I reached out to HubSpot support and was told there’s “break” in my code, and that’s the reason for this blank view. The lady, however, couldn’t be more precise about it and just referred me to this forum.
I’m really not sure if this is the code’s fault because I realised all the other, already published, correct codes, display blank pages too after clicking “Preview.”
Is there any other way of checking what it’s going to be like on a live page than just “publishing changes”?

I’d appreciate any help and tips. Thanks in advance!

[Anton]

Hi @HannaEs,

from what I see, I’d say your “font_config” is the breaking point.
I’d try to write it like this:

{% set body_font = {
 "font_family" : "Source Serif Pro",
 "font_weight" : "600"
} 
%}
{% set head_font = {
 "font_family" : "Montserrat",
 "font_weight_thin" : "400",
 "font_weight_medium" : "500", 
 "font_weight_bold" : "700"
} 
%}

when calling it in the template just type

<style>
body{
 font-family: {{ body_font.font_family }};
 font-weight: {{ body_font.font_weight}};
}
h1,h2,h3,h4,h5,h6{
 font-family: {{ head_font.font_family }};
}

.fw-thin{
 font-weight: {{ head_font.font_weight_thin }};
}

.fw-medium{
 font-weight: {{ head_font.font_weight_medium }};
}

.fw-bold{
 font-weight: {{ head_font.font_weight_bold }};
}

You can add the font-weight classes with some simple JavaScript to the desired element(s)

Also - just a tip: If you’re planning to use those settings throughout your whole theme, think about creating a seperate “variables”(doesn’t matter if css or html; both works here) file, put just the variables from above into it and load this file in every file you’re using those variables.

Since Source Serif Pro and Montserrat are Google fonts, you can simply add the font field to your theme.

{
			"name": "font_field",
			"label": "font_field",
			"required": false,
			"locked": false,
			"inline_help_text": "",
			"help_text": "",
			"load_external_fonts": true,
			"type": "font",
			"default": {
			 "size": 12,
			 "font":"Merriweather",
			 "font_set":"GOOGLE",
			 "size_unit": "px",
			 "color": "#000",
			 "styles": { }
			}
			}

best,

Anton

[HannaEs]

Hi @Anton,

Thank you for your quick reply, much appreciated! I’ll definitely try it out. I was just wondering if there is something else in the further part of the code that you can’t see on my screenshot (?). Would you be able to check it all “in bulk”? Sorry for not pasting it all at once maybe.
Thank you for your help

<!--
 templateType: email_subscription_preferences_page
 isAvailableForNewContent: true
-->
{% set template_css = "../css/templates/system.css" %}
{% set template_js = "../js/subscription-preferences.js" %}
{% set pageTitle = "Update Your Subscription Preferences" %}
{% set font_config = {
 "Source Serif Pro": ["600"],
 "Montserrat": ["400", "500", "700"]
} %}
{% extends "../system-base.html" %}

{% block body %}
 <section class="section-wrapper">
 {% module "email_subscription_heading"
 path="@hubspot/rich_text",
 extra_classes="subscription-preferences-heading",
 html={{ "<h1>Update Your Subscription Preferences</h1><p>We value your engagement and want to ensure you're getting the most out of our communications. Manage your preferences for email@email.com below.</p>" }}
 %}

 {% module_block module "email_subscription_preferences"
 path="@hubspot/email_subscriptions",
 extra_classes="form-wrapper form-wrapper--subscription-preferences",
 email_heading_level="p",
 language_dropdown_label="",
 resubscribe_button_text="Update preferences",
 subheader_text="Choose which emails you would like to receive from Callstack:",
 unsubscribe_all_unsubbed_text="",
 button_text="Update preferences",
 header="",
 unsubscribe_all_option="Unsubscribe from all emails",
 unsubscribe_all_text=""
 %}
 {% module_attribute "unsubscribe_single_text" %}
 {% if business_unit().name %}
 "Marketing Information"
 {% else %}
 "One to One"
 {% endif %}
 {% end_module_attribute %}
 {% end_module_block %}

 <section class="section-wrapper">
 <h2>Help Us Improve</h2>
 <p>Your feedback is important to us. Please tell us why you're updating your preferences:</p>
 <label for="reason">Why are you changing your email preferences? (Select all that apply)</label>
 <form>
 <input type="checkbox" id="too_many_emails" name="reason" value="too_many_emails">
 <label for="too_many_emails">I receive too many emails</label><br>
 <input type="checkbox" id="not_relevant" name="reason" value="not_relevant">
 <label for="not_relevant">The content is not relevant to me</label><br>
 <input type="checkbox" id="less_frequent" name="reason" value="less_frequent">
 <label for="less_frequent">I prefer to receive emails less frequently</label><br>
 <input type="checkbox" id="different_topics" name="reason" value="different_topics">
 <label for="different_topics">I'm interested in different topics</label><br>
 <input type="checkbox" id="other_reason" name="reason" value="other_reason">
 <label for="other_reason">Other: </label><input type="text" id="other_reason_text" name="other_reason_text"><br>

 <label for="satisfaction">How satisfied are you with our emails?</label><br>
 <input type="radio" id="very_satisfied" name="satisfaction" value="very_satisfied">
 <label for="very_satisfied">Very satisfied</label><br>
 <input type="radio" id="satisfied" name="satisfaction" value="satisfied">
 <label for="satisfied">Satisfied</label><br>
 <input type="radio" id="neutral" name="satisfaction" value="neutral">
 <label for="neutral">Neutral</label><br>
 <input type="radio" id="unsatisfied" name="satisfaction" value="unsatisfied">
 <label for="unsatisfied">Unsatisfied</label><br>
 <input type="radio" id="very_unsatisfied" name="satisfaction" value="very_unsatisfied">
 <label for="very_unsatisfied">Very unsatisfied</label><br>

 <label for="content_type">What type of content would you like to see more of? (Select all that apply)</label><br>
 <input type="checkbox" id="product_updates" name="content_type" value="product_updates">
 <label for="product_updates">Product updates</label><br>
 <input type="checkbox" id="industry_news" name="content_type" value="industry_news">
 <label for="industry_news">Industry news</label><br>
 <input type="checkbox" id="educational_content" name="content_type" value="educational_content">
 <label for="educational_content">Educational content</label><br>
 <input type="checkbox" id="special_offers" name="content_type" value="special_offers">
 <label for="special_offers">Special offers and discounts</label><br>
 <input type="checkbox" id="customer_stories" name="content_type" value="customer_stories">
 <label for="customer_stories">Customer stories and case studies</label><br>
 <input type="checkbox" id="other_content" name="content_type" value="other_content">
 <label for="other_content">Other: </label><input type="text" id="other_content_text" name="other_content_text"><br>
 </form>
 </section>

 {% module "email_subscription_footer"
 path="@hubspot/rich_text",
 extra_classes="subscription-preferences-footer",
 html={{ "<p>Thank you for helping us improve our communication with you!</p>" }}
 %}
 </section>
{% endblock body %}

Thanks!

[Anton]

Hi @HannaEs,

thank you for providing the whole code.

One thing I see is that you’re trying to extend the system-base.html file.

unless it’s in the same folder as the subscription template you should optimize the path to something like this:

{% extends "../layouts/systems-base.html" %}

The path depends on the folder structure of your theme. If your folder structur looks similar to this

the path is like the one above

Also: Since you’re trying to implement a “Help us improve” form into it.. I’d create a seperate HubSpot form for that and create some JS that will hide the submit button of this form and submit both forms once the user clicks on “update preferences”

best,

Anton