表單在外部頁面的錯誤位置

在您的外部頁面上嵌入 HubSpot 表單時，您可能會看到表單出現在與預期不同的位置。

這可能是由於表單在頁面上是動態渲染的，或者是多個表單嵌入代碼被添加到頁面HTML中的同一個<div>標籤的問題。

這些問題可以透過自訂表單嵌入代碼來解決。在 HubSpot 的 開發人員文件中了解更多關於自訂表單嵌入代碼的資訊。

單一表單

表單有時可能會在頁面上動態呈現，並載入不同的位置。有時在較舊的瀏覽器上，表單甚至可能無法顯示。

為確保表單成功載入頁面的特定部分，您可以在表單嵌入程式碼中加入target屬性，指定您希望表單呈現的特定容器。

例如，您可以強制表單顯示在頁面中 CSS 類別為sidebar 的容器中。在表單嵌入程式碼中加入 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>