跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。

在外部網站設定和樣式 HubSpot 表單

上次更新時間: 2025年10月6日

可搭配下列任何訂閱使用,除非另有註明:

在 HubSpot 中建立表單後,您可以將其新增至 HubSpot 頁面或您在 HubSpot 以外建立的頁面。如果您的內容託管在 HubSpot 以外,您可以使用下列方法新增表單:

  • 複製嵌入代碼,將表單嵌入到您的外部頁面上。
  • 使用表單分享連結,為您的表單提供一個獨立的網頁,您可以連結到該網頁。

無論使用哪種方法,對表單所做的變更都會自動更新到您外部網站的即時表單上。您可以在表單編輯器或外部樣式表中使用 CSS 設定內嵌 HubSpot 表單的樣式。

開始之前

表單樣式

自訂表單和表單步驟的文字、輸入欄位、按鈕和背景。在全局樣式選項卡中配置的樣式選項將應用於所有表單步驟。您無法單獨設定個別表格步驟的樣式。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將滑鼠懸停在現有表單上,然後按一下編輯。
  3. 在左側功能表中,按一下styles Styling 圖示
  4. 您可以自訂下列表單元件的樣式:
    • 欄位: 自訂欄位,包括背景和邊框。您也可以自訂標籤的字型、字型大小和顏色,以及說明文字、占位符和錯誤文字的顏色。
    • 按鈕:可自訂按鈕的高度、圓角、背景、漸層,並為按鈕加入陰影。您也可以自訂按鈕文字的字型、字型大小和顏色。
    • 段落 (豐富文字):自訂正文的字型、字型大小和顏色。
    • 標題: 自訂標題的字型和文字顏色。您可以選擇為標題文字加入陰影。
    • 背景:自訂表單和表單步驟的背景。您可以選擇設定背景顏色或使用圖片作為背景。您可以使用AI 助手來產生圖片。您也可以選擇為表單設定邊框。
    • 進度列: 自訂表單上的進度列,包括進度線的顏色和進度列的字型。

The form editor with the left panel displaying styles options, including branding, fields, buttons, paragraph, heading, background, and the progress bar.

複製分享連結來分享獨立的表單頁面

您可以使用分享連結來分享您的表單,此連結會在獨立網頁上顯示表單。 此分享連結無法隱藏或設定為隱私。任何擁有分享連結的人都可以存取表單。

若要存取分享連結,請

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 將滑鼠移至表單然後按一下編輯。
  3. 在右上方,按一下檢閱和更新
  4. 在右側面板底部,按一下更新
  5. 在對話方塊中,按一下複製分享連結
  6. 在底部,按一下複製。這會將表格頁面的網址複製到剪貼簿。
  7. 在瀏覽器中,開啟新視窗或索引標籤,然後在位址列中貼上表單頁面的 URL 以載入表單。您也可以直接與他人分享表單頁面 URL,讓他們存取表單。
The form editor share options, highlighting the option to copy the form share link.

複製表單嵌入代碼

您可以複製表單嵌入代碼並將其粘貼到您的外部頁面上,將您的 HubSpot 表單嵌入到您的外部頁面上。要追蹤內嵌表單的分析,您的HubSpot追蹤必須安裝在您嵌入HubSpot表單的外部頁面上。

要訪問嵌入代碼:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 將滑鼠移至表單,然後按一下「編輯」。
  3. 在右上方,按一下檢閱和更新
  4. 在右側面板底部,按一下更新
  5. 在對話方塊中,按一下取得嵌入程式碼
  6. 在「嵌入程式碼」標籤中,按一下「複製」。
  7. 將嵌入代碼貼入外部頁面的 HTML 模組。
The form editor share options, highlighting the option to copy the form embed code.

複製表單開發代碼

您可以嵌入表單,並在外部樣式表中使用 CSS 設定其樣式。使用此方法,您可以覆寫預設樣式、將細緻的樣式套用至特定的表單元素,以及設定全局規則,以便在嵌入式表單中使用一致的樣式。 進一步瞭解如何使用 CSS 定義嵌入式表單的自訂樣式

要存取開發人員代碼:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 將滑鼠移至表單上,然後按一下編輯
  3. 在右上方,按一下檢閱和更新
  4. 在右側面板底部,按一下更新
  5. 在對話方塊中,按一下取得嵌入程式碼
  6. 按一下開發程式碼 (進階)索引標籤。
  7. 若要接受 CSS 或 JavaScript 外部變更可能導致表單損毀的風險,請選取「我瞭解風險,請給我看代碼」核取方塊。
  8. 在底部,按一下複製
  9. 將表單嵌入程式碼加入您的外部頁面。嵌入表單後,您就可以在外部樣式表中使用 CSS 設定表單的樣式。
    • 本文列出了您可以覆寫的 CSS 變數。
    • 全域樣式會覆寫所有內嵌表單的頂層樣式。您也可以針對表單的個別元素,例如表單元素行、提交按鈕或表單標題。
The form editor share options, highlighting the option to copy the form developer code.

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助