表单错误中的 HubSpot 下拉列表答案

【问题标题】：HubSpot dropdown in form bug表单错误中的 HubSpot 下拉列表
【发布时间】：2018-05-16 08:34:00
【问题描述】：

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

应该是这样的

我们的问题是我们需要添加一个“点击触发器”（参见下面的 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 -->

【问题讨论】：

标签： hubspot

【解决方案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。

【讨论】：