排除外部嵌入式 HubSpot 表單的故障

如果您嵌入外部頁面的 HubSpot 表單無法正常運作或顯示不正確，請了解最常見的表單嵌入問題以及如何進行疑難排解。

在執行以下步驟之前，請先在表單的獨立頁面中測試該表單，以確認問題出在表單本身，還是嵌入設定上。

確認 HubSpot 追蹤程式碼

若要在外部網站上使用 HubSpot 表單，您必須在放置表單的外部頁面中安裝HubSpot 追蹤程式碼。

若要確認 HubSpot 追蹤程式碼已安裝且能在該頁面正確觸發，請參閱如何排除 HubSpot 追蹤程式碼的故障。

確認表單嵌入程式碼

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將游標懸停在表單上，然後點擊「編輯」。
3. 若您使用的是更新後的表單編輯器：
   • 在右上角，點擊「檢視與更新」。
   • 在右側面板的底部，點擊「更新」。

1. • 在對話方塊中，點擊「取得嵌入程式碼」。
   • 點擊「複製」。

4. 若您使用的是舊版表單編輯器：
   • 在表單編輯器的右上角，按一下「嵌入」。
   • 在對話方塊中，點選「複製」。
     

5. 在瀏覽器中，前往「Diff Checker」——這是一款文字比對工具。
6. 在「原始文字」區段中 ，貼上表單的嵌入程式碼。
7. 前往嵌入該表單的網頁。接著，在頁面任意位置按右鍵，並選擇「檢視頁面原始碼」。
8. 在頁面原始碼中找到表單嵌入程式碼，並將其複製。
9. 返回 Diff Checker。
10. 在「變更後的文字」 區段中，貼上外部嵌入的程式碼。
11. 點擊「尋找差異」 以檢查是否存在缺失或損壞的程式碼。若嵌入程式碼完全相同， 系統將顯示「兩個檔案完全相同」的 訊息 。否則，任何差異都會以紅色和綠色標示出來。

若外部嵌入的程式碼與 HubSpot 程式碼不符，請在 您的外部頁面重新嵌入正確的程式碼 。

若外部嵌入的程式碼與 HubSpot 程式碼相符，則您的外部頁面中的 HTML 或 JavaScript 內容可能干擾了表單的嵌入程式碼。您應與開發人員合作進行進一步的故障排除。建議檢查以下項目：

• JavaScript 錯誤或腳本衝突。

• CSS 或樣式設定問題。

• SSL、CSP 或混合內容問題。

• 頁面上的表單 ID 重複。

• 隱藏欄位在提交前未填入資料。

• 網站建置工具會動態渲染或重新渲染表單容器。

新增網站網域

請將表單所嵌入的外部頁面網域，作為額外的網站網域新增至 HubSpot。來自未新增之頁面的表單提交將被標記為垃圾訊息。

特定主機的嵌入問題

如果您使用的是 WordPress、Squarespace 或 Wix，請針對以下各網站主機，繼續針對下列問題進行疑難排解。

WordPress

若您的表單嵌入在 WordPress 頁面中，可能會遇到以下問題：

• WordPress 可能會將嵌入表單程式碼中的 '&' 轉換為 '&'，這將導致程式碼功能失效。
• 採用 XHTML 格式的 WordPress 佈景主題會在 JavaScript 周圍添加 <![CDATA[ ]]> 標籤，這雖然不應影響表單的渲染效果，但在檢查表單嵌入程式碼時仍需留意。

若 WordPress 會變更嵌入程式碼，建議使用第三方外掛（例如Insert HTML Snippet），將表單以短代碼形式加入頁面或文章中，以保留 script 標籤。

Squarespace

某些 Squarespace 模板僅在頁面首次載入時渲染腳本，其他頁面則不會。這可能會導致 HubSpot 表單在某些頁面無法正常運作，因為當訪客瀏覽您的網站時，表單腳本並未被載入。

為避免此情況發生，請嘗試在 Squarespace 中停用 Ajax 載入功能。若此方法無效，您亦可嘗試使用其他 Squarespace 範本。

瀏覽器相關問題

若您安裝了 Ghostery 等會阻擋資源的瀏覽器擴充功能，您的 HubSpot 表單可能會被阻擋而無法載入和顯示。進一步了解 當您的 HubSpot 表單被阻擋時會發生什麼情況。