# custom preference center with different categories

**URL:** <https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [May 3, 2021, 7:03am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596 "2021-05-03T07:03:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 3, 2021, 7:03am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/1 "2021-05-03T07:03:17Z")

</div>

Hi guys,

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?

Thanks in advance

Best,

Anton

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [May 3, 2021, 7:08pm UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/2 "2021-05-03T19:08:55Z")

</div>

Is there anything simpler 🤔

@tjoyce , @piersg , @alyssamwilie , [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866) , @jpsanchez

You know this guy 😺. do you have some thoughts for him 👀

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [May 3, 2021, 7:30pm UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/3 "2021-05-03T19:30:39Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 4, 2021, 7:14am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/4 "2021-05-04T07:14:14Z")

</div>

Hey @alyssamwilie,

thank you for the input/idea. Will discuss it with the team and definitely test the “custom form” idea. If this works I’ll come back 😀

have a great day

---

<div class="post-metadata">

**Author:** ![jpsanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jpsanchez/32/106486_2.png) [@jpsanchez](https://community.hubspot.com/u/jpsanchez)\
**Post date:** [May 4, 2021, 10:45am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/5 "2021-05-04T10:45:07Z")

</div>

Ok, a will try a KISS aprouch,

1.- Use two properties. Type\_of\_subscription and Subtype\_of\_subscription.

2.- Use normal forms.

3.- Conditional form response. ( if answer this them show this)

4.- Update real subscriptions with a WF.

OPTION 2.-

1.- Upload all the types and subtypes of subscriptions in hubspot SETUP. ( as normal use)

2.- Use this construction : Type1 / Subtype 1 , Type1 / Subtype2 , Type2 / Subtype2 …etc..

3.- Use CSS to Force it. ( with “/” operator or other ./n etc..)

Hope it helps

Best

JP

😉

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [May 6, 2021, 8:33am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/6 "2021-05-06T08:33:18Z")

</div>

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.

> **[Screenshot](https://prnt.sc/12f2bth)**
>
> Captured with Lightshot

Hope this helps!  
If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [May 6, 2021, 10:08am UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/7 "2021-05-06T10:08:38Z")

</div>

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](https://www.mews.com/hs/manage-preferences/unsubscribe?d=Vnchcr8kmYBMVFq3-k49RkB9W2m40Kf3T0pbmW43T2Qq8D6dl6W17f7hv6lGYkqW8fvV-r5l4crqW5SyT5M85rz1DV28W_f5mP42YMGKd_P20N4-W11LYp61FGdqTW3nLfSm7-J2Sh51cyJg1&v=3&utm_source=hs_email&utm_medium=email&utm_content=95452966&_hsenc=p2ANqtz-9rBVBunf7hDObCrRhTelGtVH2y6mmxhoZksUlcVsLyZ0N75O-8HQ6etbQ6GxGEyzMNGpR-RLmb79pqj0yte6NKg7Zbeg&_hsmi=95452966)

Here’s my JS to re-order/categorise everything. You could take this and make each category an accordion:

```lia-code-sample
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');
 };

```

 ![42148iDB24A403C0998640.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/4/940688d2807390e6636aebbb5078d75ed7b44e51.png)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 17, 2021, 12:59pm UTC](https://community.hubspot.com/t/custom-preference-center-with-different-categories/36596/8 "2021-05-17T12:59:28Z")

</div>

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 🙂