窗体错误中的HubSpot下拉列表

Question

在我们的网站上，我们使用一个带有自定义样式的HubSpot注册表，它加载在一个fancybox弹出窗口中。

​

​

这是它应该看起来的样子

我们的问题是，我们需要添加一个“点击触发器”(参见下面的HTML和JS )来加载具有正确样式的下拉列表，我们希望表单在没有触发器的情况下能够正常工作。如果没有点击触发器，它看起来如下所示：

​

此外，当此表单出现时，下拉菜单也不起作用。

我们的代码看起来像这样：

<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 -->

Answer 1

我的猜测是您正在使用某种jQuery插件来样式化dropdown。问题是，在单击触发器之前，您的代码试图对DOM中不存在的内容进行样式设置。您应该做的是将jQuery插件代码放入forms onReady函数中。

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

如果你只是想在不使用jQuery插件的情况下设计表单选择的样式，你可以使用this tool来获得所需的css。