將 HubSpot 表單的樣式嵌入外部網站

在您的外部網站使用HubSpot 表單擷取潛在客戶，並自動同步聯絡人資料至您的 HubSpot 帳戶。您可以在 HubSpot 中設定表單的樣式，並使用表單嵌入代碼將其新增至您的網站。或使用分享連結將獨立的表單傳送給您的受眾。

嵌入表單可以確保提交的內容直接同步到您的 HubSpot 帳戶，您可以在 HubSpot 帳戶中管理聯絡人、觸發自動化和分析績效。例如，您可以在公司網站的產品頁面中加入 HubSpot 表單，以擷取演示要求，並透過自動化電子郵件進行後續追蹤。

如果您的表單是在傳統表單編輯器中建立，請瞭解如何在外部網站設定和樣式傳統表單。

開始之前

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

要求

• 在外部網站嵌入 HubSpot 表單時，您需要在追蹤設定中加入網站網域。未加入網域的表單提交將被 標記為垃圾郵件。
• 要追蹤內嵌表單的分析， 您必須在外部頁面安裝 HubSpot 追蹤代碼。
  

限制與注意事項

• 在更新的表單編輯器中，無法將您的表單設定為原始 HTML 表單。只有使用傳統表單編輯器建立的表單才能設定為原始 HTML。
• 自訂表單的嵌入程式碼需要懂得使用 JavaScript 的開發人員協助。更進階的客製化可以使用客製化表單和 HubSpot表單 API 來完成。

表單樣式

自訂表單和表單步驟的文字、輸入欄位、按鈕和背景。表單樣式自訂會套用到所有表單步驟。您無法單獨設定個別表單步驟的樣式。

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

分享獨立的表單頁面

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

若要複製分享連結，請

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

複製表單嵌入代碼

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