嵌入脚本未在正确位置加载 HTML答案

【问题标题】：Embed script not loading HTML at the right position嵌入脚本未在正确位置加载 HTML
【发布时间】：2016-11-20 23:01:43
【问题描述】：

我们在网站上嵌入了第 3 方表单（HubSpot 表单），有时表单的 HTML 位置不正确。它应该在脚本之后。

<script>hbspt.forms.create({ 
css: '',
portalId: '1552633',
formId: '6c551c1f-f5a6-453d-93d3-4169c8f563c0'});
</script>

并且表单的 HTML 应该在脚本之后

<div class="hbspt-form" id="hbspt-form-1479681169480">

但有时，表单的 HTML 会出现在页面的页脚下方。脚本在正确的位置。只是它生成的html不是。

任何想法可能导致这种情况？

【问题讨论】：

显示你所有的页面代码，html和css，
hbspt-form 上应用的样式是什么，可能是导致问题的原因

标签： javascript html forms hubspot

【解决方案1】：

我找到了针对这个问题的更具体的解决方案。

对于任何 HubSpot 用户，我为解决问题所做的就是在 div 中添加了一个类，我在其中包装了代码，然后在嵌入代码中添加了

target: '.class'

这确保表单在该类中加载，而不是在其他地方加载这样就解决了问题。

【讨论】：

我遇到了同样的问题，添加target: '.class' 解决了它。谢谢。

【解决方案2】：

我有同样的问题。最后我通过添加目标类和Instance Id得到了解决方案。

例如：

<div class="hubspot-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>
    hbspt.forms.create({
        css: '',
        portalId: '1552633',
        formId: '6c551c1f-f5a6-453d-93d3-4169c8f563c0',
        taget: '.hubspot-form',
        formInstanceId: '1'
    });
</script>

【讨论】：

【解决方案3】：

像这样将整个东西包装在一个容器中：

<div class='external-form-loader' style='margin-left: auto: margin-right: auto; width:500px'>
    <script>
        hbspt.forms.create({
        css: '',
        portalId: '1552633',
        formId: '6c551c1f-f5a6-453d-93d3-4169c8f563c0'
    });
    </script>
    <div class="hbspt-form" id="hbspt-form-1479681169480"></div>
</div>

根据需要设置 div 的样式。

如果问题仍然存在，您可以使用 css 轻松处理。干杯..

【讨论】：