CODEWITHSUNDEEP
hubspot
Robin van der Burght
Robin van der Burght

Reputation: 25

HubSpot dropdown in form bug

On our website we use a HubSpot registration form with custom styling that loads in a fancybox popup.

enter image description here

This is how it should look

Our problem is that we need to add an 'on click trigger' (see HTML and JS below) to load the dropdown with the right styling We want to form to work properly without the trigger. Without the click trigger it looks like below: enter image description here

Also the dropdown isn't working when this form appears.

Our code looks like:

<div class="popup-mask">
      <div class="popup sm" id="popup-gartner-get-in-touch">
        <h4 class="section-title blue">Get in touch</h4>
        <div class="download-form">
          <div class="hubpop">
            <div class="download-form">
              <!--[if lte IE 8]>
              <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
            <![endif]-->
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
            <script>
              $('a[href="#popup-gartner-get-in-touch"]').click(function() {
                hbspt.forms.create({ 
                  portalId: "538005",
                  formId: "190bdb23-c363-4d93-8189-9c7d28782017",
                  target:'.hubpop',
                });
              });
            </script>
          </div>
        </div> 
      </div> 
    </div><!-- end popup -->
    </div><!-- end popup-mask -->

Upvotes: 0

Views: 150

Answers (1)

Tim Joyce
Tim Joyce

Reputation: 4517

My guess is that you are using some kind of jQuery plugin to style the dropdown. The problem is, your code for that is trying to style something that doesn't exist in the DOM until that trigger is clicked. What you should do is put that jQuery plugin code into the forms onReady function.

    hbspt.forms.create({
      portalId: '',
      formId: '',
      onFormReady: function($form) {
        // YOUR CODE TO MODIFY THE SELECT DROPDOWN SHOULD GO HERE
          console.log($form.find('select'));
        }
    });

If you're just looking to style the form selects without using a jQuery plugin, you can use this tool to get the css needed to do that.

Upvotes: 0

Related Questions