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

在 HubSpot 中建立表單後，您可以將其新增至 HubSpot 頁面或您在 HubSpot 以外建立的頁面。表單可以透過以下方式分享到您外部的非 HubSpot 網站：

• 將表單代碼嵌入現有頁面。
• 建立一個獨立的表單頁面，您可以連結到該頁面。

無論使用哪一種方法，在 HubSpot 表單工具中對表單所做的更改都會自動反映到您外部網站的實時表單上。添加表單後，您可以在表單編輯器或外部樣式表中使用 CSS 設定外部頁面上的嵌入式 HubSpot 表單樣式。

請注意： 在更新的編輯器中，無法將您的表單設定為原始 HTML。只有使用舊版編輯器建立的表單才能設定為原始 HTML。

表單樣式

自訂表單和表單步驟的文字、輸入欄位、按鈕和背景。在「全局樣式」標籤中設定的樣式選項將套用至所有表單步驟。您無法單獨設定個別表格步驟的樣式。

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 建立新表單，或將滑鼠懸停在現有表單上，然後按一下編輯。
• 在左側按一下樣式圖示。

• 自訂文字、輸入欄位或按鈕時，您可以使用快速欄位輸入樣式從現有樣式中選擇。另外，您也可以手動自訂表單中每個元件的樣式：
  • 欄位： 自訂欄位，包括背景和邊框。您也可以自訂標籤的字型、字型大小和顏色，以及說明文字、占位符和錯誤文字的顏色。
  • 按鈕：可自訂按鈕的高度、圓角、背景、漸層，並為按鈕加入陰影。您也可以自訂按鈕文字的字型、字型大小和顏色。
  • 段落 (豐富文字)：自訂正文的字型、字型大小和顏色。
  • 標題： 自訂標題的字型和文字顏色。您可以選擇為標題文字加入陰影。
  • 背景：自訂表單和表單步驟的背景。您可以選擇設定背景顏色或使用圖片作為背景。您可以使用AI 助手來產生圖片。您也可以選擇為表單設定邊框。
  • 進度列： 自訂表單上的進度列，包括進度線的顏色和進度列的字型。

新增表單嵌入程式碼

要存取表單嵌入程式碼：

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 將滑鼠移至表單上，然後按一下 [動作 > 分享]。
• 按一下嵌入程式碼索引標籤。
• 在對話方塊中，如果您要將提交表單的聯絡人加入 Salesforce 活動，請按一下將聯絡人加入 Salesforce 活動 下拉式功能表，然後選擇一個活動。如果將Salesforce 活動與表單相關聯，表單的嵌入程式碼將會變更。在這種情況下，您必須重新將嵌入代碼新增至外部網站。
• 按一下複製。
• 將嵌入代碼貼入外部頁面的 HTML 模組。要追蹤表單的分析，您的 HubSpot追蹤代碼必須安裝在您放置 HubSpot 表單的外部頁面上。

建立獨立的表單頁面

您也可以透過分享連結來分享您的表單。在分享連結中，表單會以自己的 URL 顯示在獨立頁面上。此分享連結無法隱藏或變為隱私。任何擁有分享連結的人都能存取表單。

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 將滑鼠移至表單上，然後按一下動作 > 分享。
• 在對話方塊中，按一下分享連結索引 標籤。
• 按一下複製，將表單頁面的 URL 複製到剪貼簿。
• 在瀏覽器中，開啟新視窗或索引標籤，然後在位址列貼上表單頁面的 URL 以載入表單。您也可以直接與他人分享表單頁的 URL，讓他們可以存取表單。