表单错误

Question

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

它的外观应该是

我们的问题是我们需要在点击触发器上添加一个＆＃39; （请参阅下面的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插件来设置下拉列表的样式。问题是，你的代码试图设置DOM中不存在的东西，直到点击该触发器。你应该做的是将jQuery插件代码放入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。