I use waypoints to lazy load the JavaScript and Form Code, seems to work for me.
<div id="colophon" class="site-footer">
<script src="/js/jquery.waypoints.js"></script>
<div id="hssubscribecode"></div>
<script>
var waypoint = new Waypoint({
element: document.getElementById('colophon'),
handler: function(direction) {
const script = document.createElement('script');
script.src='//js.hsforms.net/forms/v2.js';
script.setAttribute("charset", "utf-8");
script.setAttribute("type", "text/javascript");
document.getElementById("hssubscribecode").appendChild(script);
script.addEventListener('load', function() {
// When script is loaded completely build Hubspot form
hbspt.forms.create({
portalId: "PORT_ID",
formId: "YOUR_FORM_ID"
});
});
this.destroy()
},
offset: '70%'
})
</script>
</div>