在外部網站設定和樣式 HubSpot 表單 (傳統)

在 HubSpot 中建立表單後，您可以將其新增至 HubSpot 頁面或您在 HubSpot 以外建立的頁面。表單可以透過以下方式分享到您外部的非 HubSpot 網站：

• 將表單代碼嵌入現有頁面。
• 建立一個獨立的表單頁面，您可以連結到該頁面。

無論使用哪一種方法，在 HubSpot 表單工具中對表單所做的更改都會自動反映到您外部網站的實時表單上。添加表單後，您可以在表單編輯器中或外部樣式表中使用 CSS 設定外部頁面上的嵌入式 HubSpot 表單樣式。

如果您使用 WordPress，請學習如何在 WordPress 帖子或頁面上插入表單。

請注意：建議使用更新的表單編輯器來建立和管理表單。這篇文章只能作為使用舊版編輯器建立的現有表單的參考。進一步了解外部網站的表單樣式。

新增表單嵌入程式碼

請注意：自 2024 年 5 月 16 日起，在外部頁面上新增表單嵌入程式碼時，該頁面的網域必須新增為網站網域，才能視為可信網域。否則，表單的提交也會被過濾到您的垃圾郵件提交中。

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
2. 將滑鼠移至表單上，然後按一下[ 動作 >分享]。
3. 在對話方塊中，如果您要將提交表單的聯絡人新增至 Salesforce 活動，請按一下新增聯絡人至 Salesforce 活動 下拉式功能表，然後選擇一個活動。如果將Salesforce 活動與表單相關聯，表單的嵌入程式碼將會變更。在這種情況下，您必須重新將嵌入代碼新增至外部網站。
4. 按一下複製。
5. 將嵌入代碼貼入外部頁面的 HTML 模組。要追蹤表單的分析，您的 HubSpot追蹤代碼必須安裝在您放置 HubSpot 表單的外部頁面上。

建立獨立的表單頁面

您也可以透過分享 連結來分享您的表單。在分享連結中，表單會以自己的 URL 顯示在獨立頁面上。此分享連結無法隱藏或變為隱私。任何擁有分享連結的人都可以存取表單。

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
2. 將滑鼠移至表單上，然後按一下動作 >分享。
3. 在對話方塊中，按一下分享連結索引 標籤。
4. 按一下複製，將表單頁面的 URL 複製到剪貼簿。
5. 在瀏覽器中，開啟新視窗或索引標籤，然後在位址列貼上表單頁面的 URL 以載入表單。您也可以直接與他人分享表單頁的 URL，讓他們可以存取表單。
   
   

在表單編輯器中設定內嵌表單的樣式

使用 HubSpot 表單編輯器設定內嵌表單的樣式時，您可以使用主題或套用自己的自訂樣式。

請注意：在表單編輯器中設定的主題和樣式只適用於內嵌表單或獨立表單頁面。 HubSpot頁面上的表單只能使用內容編輯器中的表單模塊樣式選項來設置 樣式。

使用主題設定表單樣式

如果您想在不寫自訂程式碼的情況下為傳統表單設計風格，您可以將預設主題套用到內嵌表單或獨立表單頁面。除了任何全域表單樣式設定之外，這些主題還可為您的表單增加更多自訂選項。

若要使用主題來設定表單樣式，請

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
2. 將滑鼠移至表單上，然後按一下編輯。
3. 在表單編輯器中，按一下樣式與預覽 索引標籤。
4. 如果您正在編輯舊表單，請在左側窗格中，清除保留舊主題 核取方塊。這將移除套用至此表單的舊 HubSpot 預設樣式。您添加到表單的任何自訂 CSS 或 JavaScript 將不再有效。此核取方塊不適用於在您帳戶中建立的任何新表單。
5. 選擇主題。
6. 在右上方，按一下「 發佈」或「更新」。

使用自訂樣式

您也可以更細緻地設定表單樣式。

若要套用自訂樣式，請

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
2. 將滑鼠移至表單上，然後按一下編輯。
3. 按一下表單編輯器中的樣式與預覽 索引標籤。
   • 在左側窗格中，按一下樣式部分。在此，您可以設定表單欄位寬度、字型族、字型大小、字型顏色和表單按鈕。這些樣式是以個別表單為基礎設定的，並會凌駕全域表單樣式設定。
   • 自訂表單後，在右上方按一下「 發佈」或「更新」。

使用外部樣式表中的 CSS 設定內嵌表單的樣式 (傳統)

如果您使用的是傳統表單，您可以將您的表單嵌入為原始 HTML 表單。然後，您可以在外部樣式表中使用 CSS 設定這個內嵌表單的樣式。

請注意：您只能將傳統表單設定為原始 HTML表單。進一步了解如何在更新的表單編輯器中使用CSS 設定內嵌表單的樣式。

使用 CSS 設定內嵌表單的樣式：

1. 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
2. 將滑鼠移至表單上方，然後按一下編輯。
3. 在表單編輯器中，按一下樣式與預覽 索引標籤。
4. 按一下以開啟「設定為原始 HTML 表單 」開關。表單將以原始 HTML 元素的形式呈現在您的外部頁面上，而非 iframe 內。應用於表單的任何預設 HubSpot 定義都將被移除。
5. 在右上方，按一下「 發佈」或「更新」。
6. 添加表單嵌入代碼到您的外部頁面。如果您已經內嵌了表單，您必須用這個新的、未設定樣式的版本取代現有的內嵌代碼。嵌入表單後：
   
   • 您可以在外部樣式表中使用 CSS 設定表單的樣式。
   • 您也可以修改表單嵌入程式碼，進行其他表單自訂。由於 HubSpot 表單是使用 JavaScript 而非 HTML 建立，因此自訂表單嵌入程式碼需要懂得使用 JavaScript 的開發人員協助。