在外部網站上設定並設計傳統表單

在 HubSpot 中建立表單後，您可以將其新增至 HubSpot 頁面，或您在 HubSpot 外部建立的頁面。若要在外部（非由 HubSpot 託管的）網站上分享表單，可透過以下任一方式：

• 將表單程式碼嵌入現有頁面中。
• 建立一個可建立連結的獨立表單頁面。

無論採用哪種方法，在 HubSpot 表單工具中對表單所做的變更，都會自動反映在您外部網站上的實時表單中。新增表單後，您可以在表單編輯器中，或透過外部樣式表中的 CSS，為外部頁面上的嵌入式 HubSpot 表單調整樣式。 若您使用的是 WordPress，請了解如何在 WordPress 文章或頁面中插入表單。

請注意：本文僅適用於使用舊版編輯器建立的現有表單。建議使用更新版的表單編輯器來建立和管理表單。瞭解如何在外部網站上調整表單樣式並進行嵌入。

開始之前

在外部頁面加入表單嵌入程式碼時，該頁面的網域必須先新增為網站網域，才會被視為可信賴網域。否則，提交至該表單的內容也將被過濾至您的垃圾郵件提交中。

取得表單嵌入程式碼

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將游標懸停在表單上，然後點選「動作」> 「分享」。
3. 在對話方塊中，若要將表單提交者新增至 Salesforce 行銷活動，請點選「將聯絡人新增至 Salesforce 行銷活動 」下拉式選單 ，並選擇一個行銷活動。若將Salesforce 行銷活動與表單關聯，該表單的嵌入程式碼將會變更。在此情況下，您必須將嵌入程式碼重新新增至外部網站。
4. 點擊「複製」。
5. 將嵌入程式碼貼上至外部頁面的 HTML 模組中。若要追蹤表單的分析數據，您必須在放置 HubSpot 表單的外部頁面中安裝 HubSpot追蹤程式碼。

建立獨立表單頁面

您也可以透過分享 連結分享表單。在分享連結中，表單將顯示於擁有獨立網址的獨立頁面。此分享連結無法隱藏或設為私密。任何擁有分享連結的人都能存取該表單。

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將游標懸停在表單上，然後點選「動作」> 「分享」。
3. 在對話方塊中，點選「分享連結 」索引標籤 。
4. 點擊「複製」將表單頁面的網址複製到剪貼簿。
5. 在瀏覽器中開啟新視窗或新分頁，並將表單頁面的網址貼上至網址列以載入該頁面。您也可以直接將表單頁面的網址分享給他人，讓他們能夠存取該表單。
   
   

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

使用 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 開發經驗的開發人員協助