上次更新時間： 2026年3月4日
在您的外部網站使用HubSpot 表單擷取潛在客戶，並自動同步聯絡人資料至您的 HubSpot 帳戶。您可以在 HubSpot 中設定表單的樣式，並使用表單嵌入代碼將其新增至您的網站。或使用分享連結將獨立的表單傳送給您的受眾。
嵌入表單可以確保提交的內容直接同步到您的 HubSpot 帳戶，您可以在 HubSpot 帳戶中管理聯絡人、觸發自動化和分析績效。例如，您可以在公司網站的產品頁面中加入 HubSpot 表單，以擷取演示要求，並透過自動化電子郵件進行後續追蹤。
如果您的表單是在傳統表單編輯器中建立，請瞭解如何在外部網站設定和樣式傳統表單。
開始之前
開始使用此功能之前，請檢閱在外部網站使用表單的技術需求和注意事項。
要求
需要權限 建立和編輯表單需要有表單權限。
- 在外部網站嵌入 HubSpot 表單時，您需要在追蹤設定中加入網站網域。未加入網域的表單提交將被 標記為垃圾郵件。
- 要追蹤內嵌表單的分析， 您必須在外部頁面安裝 HubSpot 追蹤代碼。
限制與注意事項
- 在更新的表單編輯器中，無法將您的表單設定為原始 HTML 表單。只有使用傳統表單編輯器建立的表單才能設定為原始 HTML。
- 自訂表單的嵌入程式碼需要懂得使用 JavaScript 的開發人員協助。更進階的客製化可以使用客製化表單和 HubSpot表單 API 來完成。
表單樣式
自訂表單和表單步驟的文字、輸入欄位、按鈕和背景。表單樣式自訂會套用到所有表單步驟。您無法單獨設定個別表單步驟的樣式。
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 建立新表單，或將滑鼠懸停在現有表單上，然後按一下編輯。
- 在左側功能表中，按一下 Styling 圖示。
- 在表單樣式面板中，您可以自訂下列元件：
- 欄位： 自訂欄位，包括背景和邊界。您也可以自訂標籤的字型、字型大小和顏色，以及說明文字、占位符和錯誤文字的顏色。
- 按鈕：可自訂按鈕的高度、圓角、背景、漸層，並為按鈕加入陰影。您也可以自訂按鈕文字的字型、字型大小和顏色。
- 段落 (豐富文字)：自訂正文的字型、字型大小和顏色。
- 標題： 自訂標題的字型和文字顏色。您可以選擇為標題文字加入陰影。
- 背景：自訂表單和表單步驟的背景。您可以選擇設定背景顏色或使用圖片作為背景。您可以使用AI 助手來產生圖片。您也可以選擇為表單設定邊框。
- 進度列： 自訂表單上的進度列，包括進度線的顏色和進度列的字型。
分享獨立的表單頁面
使用分享連結在獨立頁面上顯示表單。任何擁有分享連結的人都可以存取表單。共用連結無法隱藏或設定為隱私。
若要複製分享連結，請
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單，然後按一下編輯。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下複製分享連結。
- 在底部，按一下複製。這會將網頁的網址複製到剪貼簿。
- 在瀏覽器中，開啟新視窗或索引標籤，然後在位址列中貼上您的頁面 URL，以載入該頁面。您也可以直接與他人分享表單頁面 URL，讓他們存取表單。
複製表單嵌入代碼
複製表單嵌入程式碼並貼到外部頁面上，即可將表單嵌入到外部頁面上。要追蹤內嵌表單的分析，您的 HubSpot追蹤代碼必須安裝在您嵌入 HubSpot 表單的外部頁面上。
複製嵌入代碼：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單，然後按一下「編輯」。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下取得嵌入程式碼。
- 在「嵌入程式碼」標籤中，按一下「複製」。
- 將嵌入代碼貼入外部頁面的 HTML 模組。
存取表單開發代碼
需要訂閱 需要訂閱Marketing Hub 或 Content HubProfessional 或 Enterprise才能存取表單開發程式碼。
嵌入您的表單，並在外部樣式表中使用 CSS 自訂樣式。使用此方法，您可以覆寫預設樣式、將細緻的樣式套用至特定的表單元素，以及設定全局規則，以便在內嵌的表單中使用一致的樣式。進一步瞭解如何使用 CSS 定義內嵌表單的自訂樣式。
要存取開發人員代碼：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單上，然後按一下編輯。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下取得嵌入程式碼。
- 按一下開發程式碼 (進階)索引標籤。
- 若要接受 CSS 或 JavaScript 外部變更可能導致表單損毀的風險，請選取「我瞭解風險，請給我看代碼」核取方塊。
- 在底部，按一下複製。
- 將表單嵌入程式碼加入您的外部頁面。嵌入表單後，您就可以在外部樣式表中使用 CSS 設定表單的樣式。
- 本文列出了您可以覆寫的 CSS 變數。
- 全域樣式會覆寫所有內嵌表單的頂層樣式。您也可以針對表單的個別元素，例如表單元素行、提交按鈕或表單標題。
