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

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

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

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

開始之前

• 如果您想將您的表單設定為原始 HTML 表單，更新後的表單編輯器 無法使用此選項。只有使用舊版表單編輯器建立的表單才能設定為原始 HTML。
• 如果您要將 HubSpot 表單嵌入到外部頁面，您必須安裝 HubSpot 追蹤代碼 來追蹤分析。了解如何安裝 HubSpot 追蹤代碼。

表單樣式

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

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

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

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

若要存取分享連結，請

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

複製表單嵌入代碼

您可以複製表單嵌入代碼並將其粘貼到您的外部頁面上，將您的 HubSpot 表單嵌入到您的外部頁面上。要追蹤內嵌表單的分析，您的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 變數。
   • 全域樣式會覆寫所有內嵌表單的頂層樣式。您也可以針對表單的個別元素，例如表單元素行、提交按鈕或表單標題。