上次更新時間： 2025年9月5日
在 HubSpot 中建立表單後，您可以將其新增至 HubSpot 頁面或您在 HubSpot 以外建立的頁面。如果您的內容託管在 HubSpot 以外，您可以使用下列方法新增表單：
無論使用哪種方法，對表單所做的變更都會自動更新到您外部網站的即時表單上。您可以在表單編輯器或外部樣式表中使用 CSS 設定內嵌 HubSpot 表單的樣式。
開始之前
- 如果您想將您的表單設定為原始 HTML 表單，更新後的表單編輯器 無法使用此選項。只有使用舊版表單編輯器建立的表單才能設定為原始 HTML。
- 如果您要將 HubSpot 表單嵌入到外部頁面，您必須安裝 HubSpot 追蹤代碼 來追蹤分析。了解如何安裝 HubSpot 追蹤代碼。
表單樣式
自訂表單和表單步驟的文字、輸入欄位、按鈕和背景。在全局樣式選項卡中配置的樣式選項將應用於所有表單步驟。您無法單獨設定個別表格步驟的樣式。
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 建立新表單，或將滑鼠懸停在現有表單上，然後按一下編輯。
- 在左側功能表中，按一下 Styling 圖示。
- 您可以自訂下列表單元件的樣式：
- 欄位： 自訂欄位，包括背景和邊框。您也可以自訂標籤的字型、字型大小和顏色，以及說明文字、占位符和錯誤文字的顏色。
- 按鈕：可自訂按鈕的高度、圓角、背景、漸層，並為按鈕加入陰影。您也可以自訂按鈕文字的字型、字型大小和顏色。
- 段落 (豐富文字)：自訂正文的字型、字型大小和顏色。
- 標題： 自訂標題的字型和文字顏色。您可以選擇為標題文字加入陰影。
- 背景：自訂表單和表單步驟的背景。您可以選擇設定背景顏色或使用圖片作為背景。您可以使用AI 助手來產生圖片。您也可以選擇為表單設定邊框。
- 進度列： 自訂表單上的進度列，包括進度線的顏色和進度列的字型。
複製表單嵌入程式碼
您可以通過複製表單嵌入代碼並將其粘貼到您的外部頁面上，將您的HubSpot表單嵌入到您的外部頁面上。要追蹤內嵌表單的分析，您的 HubSpot追蹤代碼必須安裝在您嵌入 HubSpot 表單的外部頁面上。
要訪問嵌入代碼：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單，然後按一下「編輯」。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下取得嵌入程式碼。
- 在「嵌入程式碼」標籤中，按一下「複製」。
- 將嵌入代碼貼入外部頁面的 HTML 模組。
使用分享連結來分享獨立的表單頁面
您可以使用分享連結來分享您的表單，此連結會在獨立網頁上顯示表單。 此分享連結無法隱藏或設定為隱私。任何擁有分享連結的人都可以存取表單。
若要存取分享連結，請
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單，然後按一下編輯。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下複製分享連結。
- 在底部，按一下複製。這會將表格頁面的網址複製到剪貼簿。
- 在瀏覽器中，開啟新視窗或索引標籤，然後在位址列中貼上表單頁面的 URL 以載入表單。您也可以直接與他人分享表單頁面 URL，讓他們存取表單。
在外部樣式表中使用 CSS 設定嵌入表單的樣式
Marketing Hub 或Content Hub Professional 或Enterprise 帳戶的使用者可以嵌入表單，並在外部樣式表中使用 CSS 設定表單的樣式。使用此方法，您可以覆寫預設樣式、將細緻的樣式套用至特定的表單元素，以及設定全局規則，以便在嵌入式表單中使用一致的樣式。 進一步瞭解如何使用 CSS 定義嵌入式表單的自訂樣式。
要存取開發人員代碼：
- 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
- 將滑鼠移至表單上，然後按一下編輯。
- 在右上方，按一下檢閱和更新。
- 在右側面板底部，按一下更新。
- 在對話方塊中，按一下取得嵌入程式碼。
- 按一下開發程式碼 (進階)索引標籤。
- 若要接受 CSS 或 JavaScript 外部變更可能導致表單損毀的風險，請選取「我瞭解風險，請給我看代碼」核取方塊。
- 在底部，按一下複製。
- 將表單嵌入程式碼加入您的外部頁面。嵌入表單後，您就可以在外部樣式表中使用 CSS 設定表單的樣式。
