Hubspot form that uses checkboxes to deliver interactive content

forms

#1

Original page: link

Main concept: User clicks on checkboxes, status at the bottom updates with content that changes depending on how many boxes are checked.

I’m trying to get this same concept to work with Hubspot. Does anyone know what is keeping this from working in Hubspot?

Here is the current Hubspot landing page. If you notice, console.log(Risktotal); does not appear in the console logs on the Hubspot page - which means the script is not being executed.

http://www.electricguarddog.com/risk-assessment-new?hs_preview=GGQaqccG-5409548600

What do I need to change in my script so this will work on Hubspot?

Thanks!


#2

Hi @mcmstart,

It might be that you’re trying to target the form checkboxes before the form fully loads. You might consider putting the event handler into the onFormReady callback function:


#3

Hi Derek, thanks for the reply! I’m looking at the page now. Can you tell me exactly how to use this callback function? The documentation isn’t clear to me.

This is the original script:


$(“input[type=checkbox]”).on(‘change’,function() {
var Risktotal = 0;
var RiskPercentage = 0;

$("input[type=checkbox]:checked").each(function() {
    Risktotal += parseFloat(1);
	console.log(Risktotal);
});	

RiskPercentage = ((Risktotal / 7) * 100);		

if (RiskPercentage <= 33) {
 $( "div.progress-bar" ).removeClass( "progress-bar-warning progress-bar-danger" ).addClass( "progress-bar-success" );
 $( "#CalculationResult" ).html( "Risk Level: Moderate" );
}
else if (RiskPercentage <= 67) {
 $( "div.progress-bar" ).removeClass( "progress-bar-success progress-bar-danger" ).addClass( "progress-bar-warning" );
 $( "#CalculationResult" ).html( "Risk Level: High" );
}
else if (RiskPercentage > 67) {
 $( "div.progress-bar" ).removeClass( "progress-bar-success progress-bar-warning" ).addClass( "progress-bar-danger" );
 $( "#CalculationResult" ).html( "Risk Level: Extreme" );
}

$('.progress-bar').css('width', RiskPercentage+'%').attr('aria-valuenow', RiskPercentage);

});


#4

Hi @mcmstart,

You’d just need to put that script in the onFormReady function of your customized embed code. For example:

 hbspt.forms.create({
      portalId: '',
      formId: '',
      onFormReady: function($form) {
        // YOUR SCRIPT HERE
        } 
});