在外部網站上設置和樣式HubSpot表單
上次更新時間: 一月 20, 2023
套用至:
所有產品和版本 |
在HubSpot中建立表單後,您可以將其新增至HubSpot頁面或您在HubSpot之外建立的頁面。 表格可以通過以下方式在您的外部非HubSpot託管網站上共享:
- 將表單代碼嵌入現有頁面。
- 建立可以連結到的獨立表單頁面。
使用任何一種方法,對HubSpot表單工具中的表單所做的更改都會自動反映在外部網站上的活躍表單上。 新增表單後,您可以在表單編輯器中的外部頁面上或在外部樣式表中的CSS中嵌入HubSpot表單。
如果你正在使用WordPress ,瞭解如何在WordPress文章或頁面上插入表單。
添加表單嵌入代碼
若要存取表單嵌入代碼:- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 將鼠標懸停在表單上,然後按一下[操作] > [分享]。
- 在「」對話方塊中,如果要新增將表單提交至Salesforce廣告活動的聯絡人,請按一下[新增聯絡人至Salesforce廣告活動下拉式選單] ,然後選擇一個活動。 如果您將Salesforce活動與表單相關聯,表單的嵌入代碼將會變更。 在這種情況下,您必須將嵌入代碼重新添加到您的外部網站。
- 按一下複製。
- 將嵌入代碼貼到外部頁面的HTML模組中。 若要追蹤表單的分析,必須在放置HubSpot表單的外部頁面上安裝HubSpot追蹤代碼。
建立一個獨立的表單頁面
您也可以透過「分享」連結分享表格。 在「分享」連結中,表單將以自己的網址顯示在獨立頁面上。 此分享連結無法隱藏或私有。 任何知道分享連結的人都可以瀏覽表格。
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 將鼠標懸停在表單上,然後按一下[操作] > [分享]。
- 在「」對話方塊中,按一下「分享連結」標籤。
- 按一下複製,將表單頁面的網址複製到剪貼簿。
- 在瀏覽器中,打開新視窗或標籤,並將表單頁面的網址貼到網址列中,以載入它。 您也可以直接與其他人分享表單頁面網址,讓他們可以瀏覽表單。

在表單編輯器中設定嵌入表單的風格
使用HubSpot表單編輯器來設定嵌入表單的風格時,您可以使用主題或套用自己的自訂風格。
請注意:表單編輯器中設置的主題和風格只適用於嵌入表單或獨立表單頁面。 HubSpot頁面上的表單只能使用內容編輯器中的表單模組風格選項來設定樣式。
使用佈景主題來設定表單的風格
如果您想在不寫入任何自訂代碼的情況下為表單設定風格,您可以將預設主題套用至嵌入式表單或獨立表單頁面。 除了任何全局表單風格設定外,這些主題還會為表單新增更多自訂選項。
要用佈景主題設定表單的風格:
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 將鼠標懸停在表單上,然後按一下編輯。
- 在表單編輯器中,按一下「 風格與預覽 」標籤。
- 如果要編輯舊版表單,請在左側窗格中清除「 保留舊主題」 核取方塊。 這將移除應用於此表單的先前預設的HubSpot風格。 您已添加到表單的任何自定義CSS或JavaScript都不再工作。 此核取方塊不適用於您帳戶中建立的任何新表單。
- 選擇主題。
- 按一下右上角的「 發佈 或 更新」。
使用自定義樣式
如果你的HubSpot帳戶有營銷中心 新手、 專 業或企業訂閱,你也可以在更細層次上設定嵌入式表單的風格。
要應用自定義樣式:
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 將鼠標懸停在表單上,然後按一下[編輯]。
- 在表單編輯器中,按一下「 風格與預覽 」標籤。
- 在左側窗格中,按一下「 風格」 部分。 在這裡,您可以設定表單欄位寬度、字體族羣、字體大小、字體色彩和表單按鈕。 這些風格會根據個別表單設定,並將覆蓋全局表單風格設定。
- 自訂表單後,在右上角按一下 發佈 或 更新。

使用外部樣式表中的CSS樣式您的嵌入式表單
如果您的HubSpot帳戶有營銷中心或CMS中心 專業版或企業版訂閱,您可以將表單嵌入為原始HTML表單,然後在外部樣式表中用CSS設定這個嵌入式表單的風格。
要使用CSS樣式您的嵌入式表單:
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 將鼠標懸停在表單上,然後按一下[編輯]。
- 在表單編輯器中,按一下「 風格與預覽 」標籤。
- 按一下以切換 設置為原始HTML表單 開啟。 表單將在外部頁面上呈現為原始HTML元素,而不是在iframe內,並且將移除應用於表單的任何預設HubSpot造型。
- 按一下右上角的「發佈或更新」。
- 將表單嵌入代碼添加 到您的外部頁面。 如果您已經嵌入表單,您必須將現有的嵌 入代碼 替換成這個新的無樣式版本。 嵌入表單後:
- 您可以使用CSS爲外部樣式表中的表單樣式。
- 您也可以 修改表單嵌入代碼 ,進行額外的表單自訂。 由於 HubSpot表單是用JavaScript建造的,而不是HTML建造的,因此 需要一位熟悉如何使用JavaScript的開發者的幫助,才能讓表單嵌入程式碼
Thank you for your feedback, it means a lot to us.