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

Question

我们在网站上嵌入了第三方表单（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中添加了一个类，我将代码包装在其中，然后在嵌入代码中，我添加了

target: '.class'

这可确保表单在该类中而不是在其他位置加载  这解决了这个问题。

Answer 2

我有同样的问题。最后，我通过添加目标类和实例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

Answer 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轻松处理。 干杯..