表格放在外部页面的错误位置

在外部页面嵌入 HubSpot 表单时，您可能会发现表单显示的位置与希望的位置不同。

这可能是由于表单是在页面上动态呈现的，或者是由于多个表单嵌入代码被添加到了页面 HTML 中的同一个 <div> 标签中。

这些问题可以通过自定义表单嵌入代码来解决。有关自定义表单嵌入代码的更多信息，请参阅 HubSpot 开发人员文档。

单一表单

表单有时会在页面上动态呈现，并在不同位置加载。在旧版浏览器上，有时甚至无法显示表单。

为确保表单成功加载到页面的特定部分，你可以在表单嵌入代码中添加一个target属性，指定你希望表单呈现的特定容器。

例如，可以强制表单显示在页面上 CSS 类为边栏的容器中。为表单嵌入代码添加 target 属性：

1. 在表单嵌入代码中，在formId 后添加逗号（,）。
2. 然后，新建一行并输入target：'[容器名称]' 。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "1234567",
 formId: "f0123bdf-4cfa-47cd-8b61-15ce95286047",
 target: ".sidebar"
 });
</script>

多个表单

当你在外部页面上多次嵌入同一个 HubSpot 表单时，表单可能会并排出现或出现在错误的位置。如果表单嵌入代码被添加到页面 HTML 中的同一个 <div> 标签，就会出现这种情况。

为确保正确加载和显示表单，请添加formInstanceId属性，并为每个表单嵌入代码指定一个唯一值：

1. 在表单嵌入代码中，在formId 属性值后面添加逗号（,）、
2. 另起一行，输入formInstanceId：[编号]'。
3. 按照表单在页面上出现的顺序添加并编号。例如，"1 "代表第一个表单，"2 "代表第二个表单，以此类推。

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "na1",
 portalId: "1234567",
 formId: "f0123bdf-4cfa-47cd-8b61-15ce95286047",
 formInstanceId: '1'
 });
</script>