Convert your form checkboxes in any HubSpot form to material 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.
View on:
{{ require_css("https://code.getmdl.io/1.3.0/material.indigo-pink.min.css") }}
{{ require_js("https://cdn.jsdelivr.net/npm/enhanced-bind-polyfill@0.0.2/index.min.js", "head") }}
{{ require_js("https://code.getmdl.io/1.3.0/material.min.js", "head") }}
{% require_css %}
<style>
.hs-form .mdl-switch.is-checked .mdl-switch__thumb,
.hs-form .mdl-switch.is-checked .mdl-switch__track,
.hs-form .mdl-checkbox__ripple-container .mdl-ripple {
background: {{ module.primary_color.color }};
}
.hs-form .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
border-color: {{ module.primary_color.color }};
}
.hs-form .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
background: rgb({{ module.primary_color.color|convert_rgb }})url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K")
}
</style>
{% end_require_css %}
var belchmcheckboxes_ = (function(){
return {
init: function(){
this.createListeners();
},
createListeners: function(){
this.on("message", this.formLoaded.bind(this));
},
on: function(action, callback){
window.addEventListener(action, callback);
},
formLoaded: function(event){
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
this.form = window.$('form[data-form-id="' + event.data.id + '"]');
this.form.find('.hs-form-booleancheckbox, .hs-form-checkbox').each(function(i, elem){
this.classMe(window.$(elem).find('label'), "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
this.classMe(window.$(elem).find('label').find('span'), "mdl-checkbox__label");
this.classMe(window.$(elem).find('input'), "mdl-checkbox__input mdl-checkbox--accent");
}.bind(this)) ;
}
},
classMe: function(elem, cssClass){
elem.addClass(cssClass);
}
}
})();
belchmcheckboxes_.init();
Convert those native browser checkboxes to Material Checkboxes
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?
Screenshot
A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.
Lead developers: Jon McLaren
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
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
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield