I have to develop a completly customized preference center for a client.
The client wants something like - let’s call it - accordions in the preference center depending on subscription types.
For example
There are a few categories like “marketing”, “opperational”, “sales”…
Each of this category should contain it’s own subscription type and if the visitor checks for example “marketing” he’ll see and be able to subscribe to all subscriptiontypes which belongs to “marketing”. Otherwise all subscriptions of this category are unchecked.
I mean I could think of something really overengineered with APIs, JavaScript, whatever but there should be something much simpler, right?
@Anton Last I checked Hubspot doesn’t let you add email preference properties to forms nor can you look them up with HubL variables (sure wish they diiid though) so without getting into the API you’d have to create psuedo properties and use those to check and update the preferences through a workflow.
Our setup for custom prefence pages usually follows along the lines of -- create a custom form in page > use javascript to submit the selections to a Hubspot form (if it’s a pretty simple form we skip the javascript and just use a Hubspot form on the page) > use a workflow to change the user’s preferences based on the form submission.
Hi @Anton ,
The functionality you are looking for is not available in the current version. You have to use a boiler plate theme set up. Check the screenshot below.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.
Hey @Anton, you mean an email preference center? I customised the default email_subscriptions module with JS, it was just to order each subscription type under the category. Example
Here’s my JS to re-order/categorise everything. You could take this and make each category an accordion:
window.onload = (event) => {
var ref = document.querySelector('.email-prefs#content .header');
if (ref != null) {
var child = document.createElement("div");
child.innerHTML = '<div id="marketing"><h4>Marketing</h4></div><div id="service"><h4>Service</h4></div><div id="event"><h4>Events</h4></div><div id="sales"><h4>Sales</h4></div>';
ref.parentNode.insertBefore(child, ref.nextSibling);
var items = document.getElementsByClassName('item');
for (i = 0; len = items.length, i < len; i++){
let item = items[i];
let type = item.querySelector('.fakelabel').children[1].textContent.toLowerCase();
var wrap = document.querySelector('#'+type);
wrap.appendChild(item);
let textWrap = item.querySelector('p');
let text = document.createTextNode(textWrap.textContent);
let newText = document.createElement("span");
newText.appendChild(text);
let pos = item.querySelector('.fakelabel');
pos.appendChild(newText);
textWrap.remove();
let bold = item.querySelector('.fakelabel span:nth-last-child(2)');
bold.textContent += ":";
}
}
var button = document.getElementById('submitbutton');
button.classList.add('button');
button.classList.add('button--primary');
};
Quick update: The customer decided to drop this feature and go with the default pref center…
Nevertheless thanks @alyssamwilie, @jpsanchez and @piersg for the ideas
. do you have some thoughts for him 
