Jquery Script Not Firing

[kmarois]

I am trying to use a bit of jquery to move the labels around on my new landing pages form, but it seems the script is not firing. I can't see it in debugger unless I add it to the template itself instead of globally under content > settings.

The page is located here: https://info.totalexpert.com/kerrigan-test

A working demo of what I am trying to achieve (floating labels) https://codepen.io/thingorilla/pen/dmOLPb

I have jQuery set to 1.7.x and jquery migrate set to ON.

I tried adding the script to the footer and head section under Content > Settings as well as to the template itself in the editor.

The script I am adding:

<script type="text/javascript" src="{{ get_public_template_url('Custom/page/Landing_Pages_2018/form-interaction.js') }}"></script>

Finally, the entire script is:

   	 //Detect browser's user agent and add to HTML attribute.
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);
  

//Since HubSpot forms are rendered after the DOM builds, you must trigger the manipulation after the window loads

window.onload = function () {
  
  //turn autocomplete off for forms on all browsers, except Chrome
  $('form').attr('autocomplete','off');
  $('input').attr('autocomplete','off');
  //turn autocomplete off for forms for Chrome 
  //based on a browser bug noted here: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
  $('html[data-useragent*="Chrome"] form').attr('autocomplete','false');
  $('html[data-useragent*="Chrome"] form input').attr('autocomplete','false');
  
  $(".form-with-slider-labels .hs-input").focus(function(){
     $(this).closest(".hs-form-field").removeClass("not-focused");
     $(this).closest(".hs-form-field").addClass("has-focus");
  }).blur(function(){
    if( !$(this).val() ) { //check to see if the input has a value
      $(this).closest(".hs-form-field").removeClass("has-focus");
      $(this).closest(".hs-form-field").addClass("not-focused");
    } else {
      $(this).closest(".hs-form-field").addClass("has-value");
    }
  })
  //on input change, if the value is empty, remove "has-value" class.
  $(".form-with-slider-labels .hs-input").on("change paste keyup", function() {
    if( !$(this).val() ) { //check to see if the input has a value
      $(this).closest(".hs-form-field").removeClass("has-value");
    }
  });
};   

Thanks for your time and effort!

[roisinkirby]

Hey @kmarois apologies for the delay here. Are you still experiencing this roadblock? Could you please share a link to the preview/live page?