# Customizing email\_subscriptions module **URL:** \ **Category:** CMS Development\ **Created:** [August 17, 2022, 5:52am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106 "2022-08-17T05:52:40Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![LeonardoDVinci](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/leonardodvinci/32/31639_2.png) [@LeonardoDVinci](https://community.hubspot.com/u/LeonardoDVinci)\ **Post date:** [August 17, 2022, 5:52am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/1 "2022-08-17T05:52:40Z")
Hi, I’m new in HubL and I’m trying to redesign the default email\_subscription (Subscription Preferences) module by swapping the check boxes with toggle switches instead however upon attempting to code it, I found the module’s code nowhere near identifiable and helpful in separataing both structure and elements of the module. The code is far from what the output is, that is on my own perspective, maybe I just cant understand how this works. ---
**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:** [August 17, 2022, 6:27am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/2 "2022-08-17T06:27:13Z")
Hi @LeonardoDVinci, the email\_subscription module is one of - I call them - “non really modifiable” ones. I’ve styled checkboxes like toggles in the past. There are many approaches but the easiest would be to style it via CSS with pseudo-elements. Here’s an [example](https://codepen.io/AllThingsSmitty/pen/MmxxOz) of a toggle styling with pseudo-elements. You have to modify it to get it to work in HubSpot, but it will work. Another approach would be to rewrite the form layout via JS - but this can (and will) affect your page performance. Since the preference are “a regular form” you can modify it with [this documentation](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options). **I don’t recommend this approach.** best, Anton ---
**Author:** ![LeonardoDVinci](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/leonardodvinci/32/31639_2.png) [@LeonardoDVinci](https://community.hubspot.com/u/LeonardoDVinci)\ **Post date:** [August 19, 2022, 7:17am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/3 "2022-08-19T07:17:19Z")
Thanks for this @Anton, however, as you mentioned, the email preferences module is somehow unmodifiable, is there a way to add that html structure into that module? I can’t replicate the sample since I can’t add the additional html elements that your code needs to hte module since the structure is actully pulled from somewhere else. ---
**Author:** ![jkupczak](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jkupczak](https://community.hubspot.com/u/jkupczak)\ **Post date:** [February 6, 2024, 11:13pm UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/4 "2024-02-06T23:13:48Z")
Can we get a response to this? HubSpot doesn’t allow you to edit anything about the Preferences page. You have to clone it first. But the cloned file doesn’t work, it just gives you an error message so it is unusable. ---
**Author:** ![UsmanHubBase](https://avatars.discourse-cdn.com/v4/letter/u/5daacb/32.png) [@UsmanHubBase](https://community.hubspot.com/u/UsmanHubBase)\ **Post date:** [November 25, 2025, 9:13am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/5 "2025-11-25T09:13:06Z")
Your only option is to insert javascript on the template level and made this javascript modify the html structure ---
**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:** [August 19, 2022, 7:53am UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/6 "2022-08-19T07:53:48Z")
Hi @LeonardoDVinci, yes - the HTML “structure” is getting pulled from HubSpot when the page is getting build/visited. Also you don’t need the structure since you can modify it completly via CSS. The only thing you’ll need to do is apply the HubSpot logic and classes to the code. Here’s the CSS for checkboxes as toggle buttons ```lia-code-sample .hs-form-booleancheckbox{ list-style:none; } input[type="checkbox"]{ -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; display:inline-block; width: 4rem !important; height: 2rem; background: #ccc; margin-right: 0.5em; position: relative; top: 0; border-radius:1rem; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"]:after{ position:absolute; content:''; width:1.75rem; height:1.75rem; top:0.125rem; left:0.125rem; background:#fff; border-radius:1.75rem; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"]:checked:after{ left:calc(4rem - 1.75rem - .25rem); } ``` Put this at the very bottom of your main CSS file and apply your colors best, Anton ---
**Author:** ![jkupczak](https://avatars.discourse-cdn.com/v4/letter/j/c2a13f/32.png) [@jkupczak](https://community.hubspot.com/u/jkupczak)\ **Post date:** [February 6, 2024, 11:14pm UTC](https://community.hubspot.com/t/customizing-email-subscriptions-module/63106/7 "2024-02-06T23:14:24Z")
How do you add CSS to the page? It’s uneditable. And cloning it just gives you an error message.