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

Question

我们在我们的网站上嵌入了第 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 不是。

知道是什么原因造成的吗？

Answer 1

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

对于所有 HubSpot 用户，我为解决该问题所做的工作是在 div 中添加了一个 class，然后在嵌入代码中添加了 [=11] =]

target: '.class'

这确保表单加载到 class 而不是其他地方这解决了问题。

Answer 2

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

<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 轻松解决。干杯..

Answer 3

我遇到了同样的问题。最后我通过添加目标 class 和 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>

更多详情请看这里https://knowledge.hubspot.com/articles/kcs_article/forms/why-has-my-embedded-form-moved-on-my-page

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

Embed script not loading HTML at the right position

html

javascript

forms

hubspot