在外部網站上自訂樣式並嵌入 HubSpot 表單

在您的外部網站上使用HubSpot 表單來收集潛在客戶，並將聯絡人資料自動同步至您的 HubSpot 帳戶。您可以在 HubSpot 中自訂表單樣式，並使用表單嵌入程式碼將其加入您的網站；或者使用分享連結，將獨立表單發送給您的受眾。

嵌入表單可確保提交資料直接同步至您的 HubSpot 帳戶，您可在該處管理聯絡人、觸發自動化流程，並分析表單表現。例如，您可以在公司網站的產品頁面中加入 HubSpot 表單，以收集產品演示請求，並透過自動化電子郵件進行後續跟進。

若您的表單是在舊版表單編輯器中建立的，請參閱如何在外部網站上設定及自訂舊版表單的外觀。

開始之前

在開始使用此功能之前，請先檢視在外部網站上使用表單的技術需求與注意事項。

需求

• 若要追蹤嵌入表單的分析數據， 請 在您的外部網頁上安裝 HubSpot 追蹤程式碼。
  
• 將 HubSpot 表單嵌入外部網站時，您需要將該網站的網域新增至追蹤設定中。來自未新增網域的表單提交將被 標記為垃圾訊息。

限制與注意事項

• 在更新後的表單編輯器中，無法將表單設定為原始 HTML 表單。僅有使用舊版表單編輯器建立的表單，才能設定為原始 HTML。
• 若要自訂表單的嵌入程式碼，需尋求熟悉 JavaScript 的開發人員協助。若要進行更進階的自訂，可透過自建表單及 HubSpot表單 API 來實現。

設定表單樣式

自訂表單及其各步驟的文字、輸入欄位、按鈕和背景。表單樣式自訂設定將套用至所有表單步驟，無法分別為個別表單步驟設定樣式。

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 建立新表單，或將游標懸停於現有表單上並點擊「編輯」。
3. 在左側邊欄選單中，點擊「styles 樣式」圖示。
4. 在「表單樣式」面板中，您可以自訂以下元件：
   • 欄位：自訂 欄位，包括背景與邊框。您亦可自訂標籤的字型、字型大小及顏色，以及說明文字、佔位符和錯誤訊息的顏色。
   • 按鈕：自訂按鈕的高度、圓角、背景、漸層，並為按鈕新增陰影效果。您亦可自訂按鈕文字的字型、字型大小及顏色。
   • 段落（富文本）：自訂正文文字的字型、字型大小及顏色。
   • 標題：自訂 標題的字型與文字顏色。您可以選擇為標題文字添加投影。
   • 背景：自訂表單及表單步驟的背景。您可以選擇設定背景顏色或使用圖片作為背景。您可使用AI 助理來生成圖片。您也可以選擇為表單設定邊框。
   • 進度條：自訂表單上的進度條，包括進度線的顏色及進度條的字型。

分享獨立表單頁面

使用分享連結，將您的表單顯示在獨立頁面中。任何擁有分享連結的人士皆可存取該表單。分享連結的網址會自動產生，無法進行編輯或自訂。

要複製分享連結：

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將滑鼠懸停在表單上，然後點擊「編輯」。
3. 在右上角，點擊「檢視與更新」。
4. 在右側面板的底部，點擊「更新」。
5. 在對話方塊中，點擊「複製分享連結」。
6. 在頁面底部，點擊「複製」。這會將該頁面的網址複製到您的剪貼簿中。
7. 在瀏覽器中開啟新視窗或新分頁，並將頁面的網址貼上至網址列以載入該頁面。您也可以直接將表單頁面的網址分享給他人，讓他們能夠存取該表單。

複製表單嵌入程式碼

透過複製表單嵌入程式碼並將其貼至外部頁面，即可將表單嵌入您的外部頁面。若要追蹤嵌入表單的分析數據，您必須在嵌入 HubSpot 表單的外部頁面中安裝 HubSpot追蹤程式碼。

要複製嵌入程式碼：

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將游標懸停在表單上，然後點擊「編輯」。
3. 在右上角，點擊「檢視與更新」。
4. 在右側面板的底部，點擊「更新」。
5. 在對話方塊中，點擊「取得嵌入程式碼」。
6. 在「嵌入程式碼」分頁中，點擊「複製」。
7. 將嵌入程式碼貼上至外部頁面的 HTML 模組中。

存取表單開發人員程式碼

將表單嵌入並透過外部樣式表中的 CSS 自訂樣式。透過此方法，您可以覆寫預設樣式、針對特定表單元素套用細部樣式，並設定全域規則以確保所有嵌入式表單的樣式一致。進一步了解如何使用 CSS 為嵌入式表單定義自訂樣式。

若要存取開發人員程式碼：

1. 在你的 HubSpot 帳戶中，點擊「更多」，然後前往「行銷」 > 「表單」。如果你的帳戶中沒有顯示「更多」，請直接前往「行銷」 > 「表單」。
2. 將游標懸停在表單上，然後點擊「編輯」。
3. 在右上角，點擊「檢視與更新」。
4. 在右側面板的底部，點擊「更新」。
5. 在對話方塊中，點擊「取得嵌入程式碼」。
6. 點選「開發者程式碼（進階）」分頁。
7. 若您願意承擔因外部對 CSS 或 JavaScript 所做的變更可能導致表單無法正常運作的風險，請勾選「我了解相關風險，請顯示程式碼」核取方塊。
8. 在底部，點擊「複製」。
9. 將表單嵌入程式碼新增至您的外部頁面。嵌入表單後，您將能夠透過 CSS 在外部樣式表中為表單設定樣式。
   • 本文列出了您可以覆寫的 CSS 變數。
   • 全域樣式將覆寫所有嵌入表單中的頂層樣式。您也可以針對表單中的個別元素進行設定，例如表單元素行、提交按鈕或表單標題。