HubSpot form not available on $(document).ready

[tddrmllr]

I'm creating a custom landing page from scratch using HubSpot's file manager. I've linked a custom JS file to the HTML page, and I want to use JS to add some custom classes to the form elements after it loads.

However, when I try to access any of the HubSpot form elements, either on $(document).ready or $(window).load, the form elements aren't there. Wondering if there's a custom event I need to tie into?

I've checked the option for the form to render as raw HTML instead of in an iframe.

Here's a portion of the HTML that's generated for the form:

<form novalidate="" accept-charset="UTF-8" action="/_hcms/forms/submissions/v3/public/submit/formsnext/multipart/3044299/034ed903-5fd5-4c83-9454-0b99e4446508" enctype="multipart/form-data" id="hsForm_034ed903-5fd5-4c83-9454-0b99e4446508_2685" method="POST" class="hs-form stacked hs-custom-form hs-form-private hs-form-034ed903-5fd5-4c83-9454-0b99e4446508_f49469ec-e015-44eb-a19b-9ad5cbf5be11" data-form-id="034ed903-5fd5-4c83-9454-0b99e4446508" data-portal-id="3044299" target="target_iframe_034ed903-5fd5-4c83-9454-0b99e4446508_2685" data-reactid=".hbspt-forms-0" __bizdiag="656174933" __biza="WJ__">
  <div class="hs_email hs-email hs-fieldtype-text field hs-form-field mdl-textfield mdl-js-textfield mdl-textfield--floating-label" data-reactid=".hbspt-forms-0.1:$0" data-upgraded=",MaterialTextfield">
    <label id="label-email-034ed903-5fd5-4c83-9454-0b99e4446508_2685" class="" placeholder="Enter your Work Email" for="email-034ed903-5fd5-4c83-9454-0b99e4446508_2685" data-reactid=".hbspt-forms-0.1:$0.0"><span data-reactid=".hbspt-forms-0.1:$0.0.0">Work Email</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.1:$0.0.1">*</span></label>
    <legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.1:$0.1"></legend>
    <div class="input" data-reactid=".hbspt-forms-0.1:$0.$email"><input id="email-034ed903-5fd5-4c83-9454-0b99e4446508_2685" class="hs-input" type="email" name="email" required="" placeholder="" value="" autocomplete="email" data-reactid=".hbspt-forms-0.1:$0.$email.0" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
  </div>
  [more elements...]
</form>

And here's a portion of the custom JS that I'm trying to implement:

$(document).on('ready', function() {
  $('.field').addClass('mdl-textfield mdl-js-textfield mdl-textfield--floating-label');
});

But nothing happens. If I do a console.log($('.field').length, it returns 0.

Any advice?

[cbarley]

Hey @tddrmllr, you should fire your code onFormReady which is a built in callback outlined here: https://developers.hubspot.com/docs/methods/forms/advanced_form_options. This will wait for the form to load, then fire the script.