CMS Development

LeonardoDVinci
Contributor

Customizing email_subscriptions module

SOLVE

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.

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Customizing email_subscriptions module

SOLVE

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

Anton Bujanowski Signature

View solution in original post

3 Replies 3
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Customizing email_subscriptions module

SOLVE

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

Anton Bujanowski Signature
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Customizing email_subscriptions module

SOLVE

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

Anton Bujanowski Signature
0 Upvotes
LeonardoDVinci
Contributor

Customizing email_subscriptions module

SOLVE

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.

0 Upvotes