Customizing email_subscriptions module

[LeonardoDVinci]

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.

[Anton · Accepted solution]

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

.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

[jkupczak]

How do you add CSS to the page? It's uneditable. And cloning it just gives you an error message.

[Anton]

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 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. I don't recommend this approach. 

best, 

Anton

[LeonardoDVinci]

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.

[jkupczak]

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.