jQuery not applying to Hubspot form

forms

#1

Hi folks!

I’m having an issue with jQuery not apply to a Hubspot form on an independently hosted site. The same block of code is working on other forms, but not the Hubspot ones.

The goal is to essentially re-create the form’s dropdown select with a

    so that it can be styled with CSS.

    Javascript

    $(function() {
    // Iterate over each select element
    $(‘select’).each(function () {
    // Cache the number of options
    var $this = $(this),
    numberOfOptions = $(this).children(‘option’).length;
    // Hides the select element
    $this.addClass(‘s-hidden’);
    // Wrap the select element in a div
    $this.wrap(’

    ’);
    // Insert a styled div to sit over the top of the hidden select element
    $this.after(’
    ’);
    // Cache the styled div
    var $styledSelect = $this.next(‘div.styledSelect’);
    // Show the first select option in the styled div
    $styledSelect.text($this.children(‘option’).eq(0).text());
    // Insert an unordered list after the styled div and also cache the list
    var $list = $(’
      ’, {
      ‘class’: ‘options’
      }).insertAfter($styledSelect);
      // Insert a list item into the unordered list for each select option
      for (var i = 0; i < numberOfOptions; i++) {
      $(’
    • ’, {
      text: $this.children(‘option’).eq(i).text(),
      rel: $this.children(‘option’).eq(i).val()
      }).appendTo($list);
      }
      // Cache the list items
      var $listItems = $list.children(‘li’);
      // Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
      $styledSelect.click(function (e) {
      e.stopPropagation();
      $(‘div.styledSelect.active’).each(function () {
      $(this).removeClass(‘active’).next(‘ul.options’).hide();
      });
      $(this).toggleClass(‘active’).next(‘ul.options’).toggle();
      });
      // Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
      // Updates the select element to have the value of the equivalent option
      $listItems.click(function (e) {
      e.stopPropagation();
      $styledSelect.text($(this).text()).removeClass(‘active’);
      $this.val($(this).attr(‘rel’));
      $list.hide();
      /* alert($this.val()); Uncomment this for demonstration! */
      });
      // Hides the unordered list when clicking outside of it
      $(document).click(function () {
      $styledSelect.removeClass(‘active’);
      $list.hide();
      });
      });
      });

#2

My guess is that your form hasn’t loaded by the time that’s fired. (can test for this. Just do something like console.log($(’.hs-form’).length))

If you’re using the embedded code, the forms won’t have loaded by the time the javascript fires since they’re loaded through ajax.

you can try the onFormReady callback on the embedded form code:

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

If this doesn’t work, you can try $(window).load instead since that should wait for all elements to finish loading before deploying.

You can also try and create the forms yourself by using the hubspot API to get form fields and form action etc. (A few hubspot libraries out there now for different platforms)