在外部頁面上設定嵌入式表單的風格
上次更新時間: 一月 20, 2023
在表單編輯器中以兩種方式或在外部樣式表中使用CSS來設定您在外部頁面上的嵌入式HubSpot表單的風格。
在窗體編輯器中
佈景主題
如果您想在不寫入任何自訂代碼的情況下為表單設定風格,您可以將預設主題套用至嵌入式表單或獨立表單頁面。 除了任何全 局表單風格設定外,主題還會在表單中新增更多自訂選項。
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 按一下表單的名稱 。
- 在表單編輯器中,按一下「風格與預覽」標籤。
- 在左側窗格「主題」部分,清除「 保留舊主題」 核取方塊。
請注意:清除「保留舊主題」核取方塊將移除應用於此表單的先前預設的HubSpot風格。 您已添加到表單的任何自定義CSS或JavaScript都不再工作。 此核取方塊僅適用於傳統表單,不適用於您帳戶中建立的任何新表單。
- 選擇四個主題之一。
樣式(僅限營銷中心入門、專 業、企業或傳統營銷中心基本)
除了主題外,您還可以在更細緻的層級上設定嵌入式表單的風格。
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 按一下表單 的名稱。
- 在表單編輯器中,按一下「 風格與預覽 」標籤。
- 在左側窗格中,按一下>風格 部分以展開它。 在這裡,您可以設定表單欄位寬度、字體族羣、字體大小、字體顏色和表單按鈕的風格。
這些風格會根據個別表單設定,並將覆蓋全局表單風格設定。
請注意:表單編輯器中設置的主題和風格只適用於嵌入表單或獨立表單頁面。 HubSpot頁面上的表單只能使用內容編輯器 中的表單模組風格選項來設定樣式。
外部樣式表中包含CSS (僅限Marketing Hub Professional 、Enterprise或Legacy Marketing Hub Basic )
- 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
- 按一下表單的名稱。
- 在表單編輯器中,按一下「風格與預覽」標籤。
- 按一下以切換設置為原始HTML表單開啟。 表單將在外部頁面上呈現為原始HTML元素,而不是在iframe內,並且將移除應用於表單的任何預設HubSpot造型。
- 按一下右上角的「分享」。
- 在「」對話方塊中,按一下複製以複製表單嵌入代碼。
- 將表單嵌入代碼添加到您的外部頁面。 如果您已經嵌入表單,您必須將現有的嵌入代碼替換成這個新的無樣式版本。
- 嵌入表單後,您可以使用CSS在外部樣式表中樣式表。
- 或者,您可以修改表單嵌入代碼以進行額外的表單自訂。 由於HubSpot表單是用JavaScript建造的,而不是HTML建造的,因此 需要一位熟悉如何使用JavaScript的開發人員幫忙來解決表單嵌入代碼。
相關內容
-
匯出內容和資料
了解如何從帳戶匯出HubSpot內容和資料,例如頁面、聯絡人和檔案。 請注意:沒有辦法合併HubSpot帳戶之間的所有數據。 在帳戶之間移動資產的最佳方法是從HubSpot帳戶匯出數據,然後匯入物件和...
知識庫 -
將影片新增至您的HubSpot內容
透過HubSpot影片,您可以上傳影片至檔案工具,然後將影片新增至頁面、行銷電子郵件、部落格文章和知識庫文章。 您可以將HubSpot影片插入影片模組中的拖放行銷電子郵件,並在頁面上拖放區域...
知識庫 -
在HubSpot頁面上設置和樣式表單
在HubSpot中建立表單後,您可以將其新增至HubSpot頁面上的任何表單模組。 在每個頁面上,您還可以設定表單提交後的操作,並自訂表單元素的樣式,例如提交按鈕和表單欄位。 ...
知識庫