HubSpot CMS

GDPR Material Switches (Boolean checkboxes)

Convert your boolean checkboxes in any HubSpot form to switches. Best used for the GDPR checkboxes

Created by: Timothy Joyce

Tags: Forms


After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

2 Recommendations

View on:


{{ require_css("") }}
{{ require_js("", "head") }}
{{ require_js("", "head") }}
{% require_css %}
.hs-form .mdl-switch__thumb,
.hs-form .mdl-switch__track,
.hs-form .mdl-switch__ripple-container .mdl-ripple {
  background: {{ module.primary_color.color }};
.hs-form .mdl-switch__track {
  opacity: .5;
{% end_require_css %}

            var belchmswitch_ = (function(){
  return {
    init: function(){
    createListeners: function(){
      this.on("message", this.formLoaded.bind(this));
    on: function(action, callback){
      window.addEventListener(action, callback);
    formLoaded: function(event){
      if( === 'hsFormCallback' && === 'onFormReady') {
        this.form = window.$('form[data-form-id="' + + '"]');
        this.form.find('.hs-form-booleancheckbox').each(function(i, elem){
          this.classMe(window.$(elem).find('label'), "mdl-switch mdl-js-switch mdl-js-ripple-effect");
          this.classMe(window.$(elem).find('label').find('span'), "mdl-switch__label");
          this.classMe(window.$(elem).find('input'), "mdl-switch__input");
        }.bind(this)) ;
    classMe: function(elem, cssClass){

Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here

GDPR Material Switches (Custom HubSpot Module)

View the Live Demo


Convert those native browser boolean checkboxes to Material Switches/Toggles

How to use?

Just include this module in any template/page that contains a HubSpot form, and let the module do the rest.

What other features are there?

  • Change the accent color of the switch


gdpr switches preview gif

2 Recommendations

Timothy Joyce

Co-founder / Programmer

View Timothy Joyce’s Gallery (8 Entries)

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Made with  by community members: