跳到內容
請注意::這篇文章的翻譯只是為了方便而提供。譯文透過翻譯軟體自動建立,可能沒有經過校對。因此,這篇文章的英文版本應該是包含最新資訊的管理版本。你可以在這裡存取這些內容。
Forms

在外部頁面上設定嵌入式表單的風格

上次更新時間: 一月 20, 2023

套用至:

所有產品和版本

在表單編輯器中以兩種方式或在外部樣式表中使用CSS來設定您在外部頁面上的嵌入式HubSpot表單的風格。


在窗體編輯器中

佈景主題

如果您想在不寫入任何自訂代碼的情況下為表單設定風格,您可以將預設主題套用至嵌入式表單獨立表單頁面。 除了任何全 局表單風格設定外,主題還會在表單中新增更多自訂選項。

  • 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
  • 按一下表單的名稱
  • 在表單編輯器中,按一下「風格與預覽」標籤。
  • 在左側窗格「主題」部分,清除「 保留舊主題」 核取方塊。

請注意:清除「保留舊主題」核取方塊將移除應用於此表單的先前預設的HubSpot風格。 您已添加到表單的任何自定義CSS或JavaScript都不再工作。 此核取方塊僅適用於傳統表單,不適用於您帳戶中建立的任何新表單。 

  • 選擇四個主題之一。

 

樣式(僅限營銷中心入門 業、企業傳統營銷中心基本

除了主題外,您還可以在更細緻的層級上設定嵌入式表單的風格。

  • 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
  • 按一下表單 的名稱
  • 在表單編輯器中,按一下「 風格與預覽 」標籤。
  • 在左側窗格中,按一下>風格 部分以展開它。 在這裡,您可以設定表單欄位寬度、字體族羣、字體大小、字體顏色和表單按鈕的風格。

這些風格會根據個別表單設定,並將覆蓋全局表單風格設定

請注意:表單編輯器中設置的主題和風格只適用於嵌入表單或獨立表單頁面HubSpot頁面上的表單只能使用內容編輯器 中的表單模組風格選項定樣式。

外部樣式表中包含CSS (僅限Marketing Hub Professional 、EnterpriseLegacy Marketing Hub Basic

 

  • 在 HubSpot 帳戶中,進入「行銷」>「商機擷取 」>「表單」。
  • 按一下表單的名稱
  • 在表單編輯器中,按一下「風格與預覽」標籤。
  • 按一下以切換設置為原始HTML表單開啟。 表單將在外部頁面上呈現為原始HTML元素,而不是在iframe內,並且將移除應用於表單的任何預設HubSpot造型。

options-unstyled-form

  • 按一下右上角的「分享」。
  • 在「」對話方塊中,按一下複製以複製表單嵌入代碼。
  • 將表單嵌入代碼添加到您的外部頁面。 如果您已經嵌入表單,您必須將現有的嵌入代碼替換成這個新的無樣式版本。
  • 嵌入表單後,您可以使用CSS在外部樣式表中樣式表。 
  • 或者,您可以修改表單嵌入代碼以進行額外的表單自訂。 由於HubSpot表單是用JavaScript建造的,而不是HTML建造的,因此 需要一位熟悉如何使用JavaScript的開發人員幫忙來解決表單嵌入代碼。
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.