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

建立和編輯表單

上次更新時間: 2025年11月5日

可搭配下列任何訂閱使用,除非另有註明:

使用表單編輯器建立並運用表單,收集訪客資訊儲存於您的 HubSpot CRM 中。透過表單編輯器,您可建立多步驟表單,並自訂表單樣式以彰顯企業識別與品牌形象。

表單建立完成後,可透過以下方式發佈:使用 HubSpot 表單模組嵌入至 HubSpot 頁面、透過表單嵌入代碼發佈至外部網站,或以分享連結形式發佈為獨立頁面。

建立新表單


建立新表單步驟:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 於右上角點擊「建立表單」。
  3. 請注意:僅能在建立表單時將其與品牌關聯。瞭解如何將表單關聯至品牌
  1. 選擇 表單編輯器
  2. 在右上角點擊「下一步」。
  3. 選擇預製模板,或點選「從空白開始」模板自行建置。
  4. 點擊頂部的「edit編輯圖示以 修改表單名稱。

新增與編輯表單欄位

新增表單欄位以收集網站訪客與聯絡人的資訊。每個表單欄位必須與 HubSpot 屬性相關聯。新增表單欄位步驟:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單 或將游標懸停於現有表單並點擊「編輯」。
  3. 於左上角點擊「+ 新增」圖示
  4. 於左側面板點擊欄位類型,將其拖曳至右側表單預覽區即可新增。欄位可置於其他欄位上方、下方或並列。
  5. 新增電話號碼欄位時,國家代碼預設將對應訪客裝置的IP位址。無法手動設定預設國家代碼。
  6. 於右側面板點擊並輸入欄位標籤。輸入標籤時,系統將顯示相似現有屬性清單。
    • 於「將欄位連結至屬性」對話方塊中 ,點擊建議屬性選項。
    • 若需將表單欄位連結至其他屬性,請點擊「搜尋屬性」。

A gif showing the steps to add a single-line text field to a form and connect it to a contact property.


  1. 若要新增關聯屬性,請在左側面板點擊展開「關聯屬性」區段,再點擊與表單欄位連結的屬性
  2. 若要將現有屬性作為表單欄位的連結屬性使用,請透過搜尋列查找 現有屬性。新增欄位的物件類型將決定表單提交內容是否顯示於關聯記錄的活動時間軸上。

請注意:

The form editor, highlighting the option to create a new property when adding a field to your form.

  1. 若要建立新屬性並將其作為表單欄位的關聯屬性使用:
    • 點擊「建立新屬性」。
    • 於右側面板設定表單欄位
    • 檢視屬性規則後點擊建立。預設勾選「顯示於表單、彈出表單及機器人」 選項。建立新屬性後,系統將自動與表單欄位關聯。瞭解如何管理屬性
  1. 若需編輯或解除與表單欄位連結的屬性:
    1. 點擊表單欄位
    2. 於左側面板點擊「關聯屬性」以展開該區段。
    3. 若要變更屬性:
      • 點擊「變更屬性」。
      • 於對話方塊中點擊「變更屬性」。
      • 使用搜尋列查找現有屬性,或點擊建立新屬性
    4. 要斷開屬性連接:
      • 點擊「斷開屬性連結」。
      • 在對話方塊中,點擊「解除屬性連結」。
  2. 若要在表單上新增屬性為欄位,請點擊左側面板的「屬性」:
    • 使用「所有屬性」下拉式選單選擇聯絡人、公司、票證或自訂物件屬性。
    • 若使用票證屬性,請點擊對話方塊中的下拉式選單,選擇服務台或 收件匣作為 表單連結目標。表單提交時將自動建立票證。
    • 若要將屬性新增為表單欄位,請點擊並將屬性拖曳至表單預覽區。欄位可置於其他欄位上方、下方或並列位置。
  1. 新增表單欄位後,若要編輯欄位選項:
    • 於右側面板點擊表單預覽中的欄位.
    • 於左側面板點擊展開「欄位選項」區塊。此處選項將依據欄位屬性類型而異。
      • 說明文字:位於欄位標籤下方的資訊性文字,協助訪客填寫欄位。
      • 佔位符文字: 顯示於欄位輸入框內的預設文字 。訪客輸入值後文字將消失,即使欄位留空,提交時此文字也不會隨表單傳送。
      • 預設值: 除非訪客修改,否則表單提交時將自動填入此值
      • 隱藏欄位:啟用此選項時,欄位值將透過表單提交設定,但訪客無法看見該欄位。啟用後請設定預設值,該值將於表單提交時傳遞至屬性。
      • 必填欄位:啟用此選項後,表單提交時必須填寫此欄位。若欄位已設為必填,則無法同時設為隱藏欄位。
The form editor with the left panel displaying the options to edit the form field. The option to make a form field required is toggle on and highlighted.

新增表單元素

表單新增文字與媒體或 安全性 元件。與表單欄位類似,這些元件可置於其他欄位上方、下方或旁邊。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單上並點擊「編輯」。
  3. 於左上角點擊「+ 新增」圖示
  4. 於左側面板點擊「其他」。
  5. 點擊並拖曳元素至 右側表單預覽區,即可將其加入表單。

    The form editor with the left panel displaying text and media elements that can be added to the form. These include image, heading, paragraph, reCAPTCHA, and data privacy elements.

新增並編輯表單感謝訊息或重新導向網址

當訪客提交表單時,您可顯示感謝訊息或將訪客導向特定頁面或會議連結。若您已啟用新版表單編輯器 (測試版) 中的「付款」功能,則可將訪客導向付款連結。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單並點擊「編輯」。
  3. 於左上角點擊siteTreeIcon 內容圖示
  4. 於左側面板點擊「提交時」。您亦可直接點擊編輯器中的表單步驟
  5. 於「選項」標籤頁中,選擇表單提交時顯示的內容:
    • 顯示感謝訊息:將游標懸停於預設感謝訊息上,點擊「editIcon編輯圖示以 新增或修改文字。
      • 若要在擴展的富文本編輯器中編輯感謝訊息,請於左側面板的「富文本」區塊點擊「在擴展檢視中編輯」。
    • 重新導向至頁面、網址或會議:當訪客提交表單時,將其導向 HubSpot 頁面、會議連結或特定網址。
      • 點擊「重新導向至頁面、網址或會議」下拉選單,選擇您的重新導向頁面或會議連結。您亦可輸入特定網址。
  6. 於右上角點擊檢視與更新,將變更發佈至您的即時表單。

若需設定條件邏輯,依據訪客先前回覆將其導向特定頁面,請參閱如何為表單新增條件邏輯

A gif showing the steps to edit the thank you message in the form editor.

為表單新增條件邏輯

需要訂閱具備行銷中心或 內容中心專業版 或企業版訂閱方案,方可為表單新增條件邏輯。

在新增表單欄位後,您可設定條件邏輯以隱藏或顯示相關欄位,或依據訪客先前回覆將其導向其他 HubSpot 頁面。

每個表單最多可添加 100 條規則,每條規則可包含 10 個條件。

設定表單條件邏輯步驟:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單上並點擊「編輯」。
  3. 於左上角點擊「workflows邏輯圖示
  4. 於左側面板點擊「新增邏輯」。
  5. 邏輯區段設定條件邏輯規則。例如:若依城市篩選並選擇「是都柏林或任何城市」,則 條件邏輯規則 僅適用於值為「都柏林」的記錄
  6. 欲刪除篩選條件,請點擊「deletee刪除圖示
  7. 若要複製篩選器,請點擊「duplicate 」複製圖示
  8. 若要為規則新增篩選條件,請點擊add 」新增篩選條件至此群組
  9. add 若要為規則新增群組,請點擊 「新增群組」。
  10. 若規則中已添加多個篩選器或群組,請點擊篩選器與群組間的「AND OR」下拉選單,以套用「與」「或」邏輯:
    • AND:規則中所有篩選條件皆須為真,規則才會觸發。
    • OR:群組中僅需任一篩選條件成立即可觸發規則。 深入了解 AND 或 OR 邏輯
  11. 「則」區段中,點擊下拉式選單選擇表單操作。可選項目如下:
    • 顯示欄位:若使用者回覆符合規則設定條件,則顯示特定欄位。
    • 隱藏欄位:若使用者回覆符合規則設定條件,則隱藏特定欄位。
    • 跳至步驟:若使用者回覆符合規則設定條件,則跳至特定步驟。使用此選項時,表單需至少包含三個步驟。瞭解如何新增表單步驟
    • 重新導向至:若訪客回覆符合規則設定條件,將其導向 HubSpot 頁面或外部網址。Sales Hub EnterpriseService Hub Enterprise帳戶使用者可將表單導向排程頁面中的會議連結。若您已啟用新版表單編輯器 (BETA) 中的付款功能,則可將訪客導向付款連結。
  1. 根據所選動作,填寫所需欄位。
  2. 欲套用條件邏輯,請點擊「 儲存並啟用」。

The form editor with the left panel displaying the options to edit form field logic.

管理條件邏輯規則

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單上並點擊「編輯」。
  3. 於左上角點擊「workflows邏輯圖示
  4. 要新增另一則規則,請點擊「新增邏輯」
  5. 要編輯規則,請點擊「動作」下拉式選單並選擇「編輯」。
  6. 刪除規則時,請點擊「動作」下拉選單並選擇「刪除」。

新增與編輯表單步驟

需要訂閱 需具備行銷中心銷售中心服務 中心入門版專業版或 企業版,或內容中心 企業版訂閱資格,方可新增與編輯表單步驟。

建立多步驟表單可引導使用者分段填寫,避免單一冗長表單。若要在多步驟表單中新增步驟:

  1. 於您的 HubSpot 帳戶中,導覽至行銷>表單
  2. 建立新表單,或將游標懸停於現有表單並點擊編輯。
  3. 在右側面板中,將游標懸停於兩個現有步驟之間,點擊「+ 新增」圖示。新步驟區段將隨即出現,接著您可在步驟面板中設定表單欄位與其他表單元素。

The form editor displaying how to add and rearrange form steps.

  1. 若要重新排列步驟順序,請將游標懸停於步驟上,接著點擊步驟左上角的「步驟 [x]」 並拖曳調整位置
  2. 複製步驟時,請將游標懸停於步驟上並點擊「duplicate複製圖示。若步驟包含電子郵件、reCAPTCHA 或資料隱私欄位,則無法複製該步驟。
  3. 刪除步驟時,請將游標懸停於步驟上,點擊「delete 」刪除圖示
請注意:
  • 表單提交僅在訪客完成所有步驟後生效。若訪客完成首個步驟但未填寫後續內容,首步驟欄位將不會提交至表單。
  • 每份表單最多可添加20步驟

新增與編輯進度條

需要訂閱 需具備行銷中心入門版專業版企業版訂閱方案,方可新增及編輯進度條。

進度條可直觀顯示用戶已完成表單的比例,從而提升表單完成率。

  1. 要啟用進度條,請將游標懸停於表單步驟上,並點擊edit 編輯圖示。
    • 於左側面板點擊「進度條」開關。此功能將自動套用至表單所有步驟。
  2. 若要編輯進度條格式,請於左側面板的「格式」下方選擇進度條文字顯示方式。可選項目包含:顯示完成百分比顯示步驟數量或 不顯示文字

The form editor with the left panel displaying options to turn on and adjust the format of the progress bar.


編輯步驟佈局與背景橫幅

使用快速佈局切換器從預設步驟佈局中選擇,並自訂表單背景橫幅。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單上並點擊「編輯」。
  3. 將游標懸停於表單步驟上,點擊右上角的「edit 編輯圖示
  4. 於左側面板點擊「樣式」標籤,選擇步驟版面配置
  5. 若要移除佈局,請點擊右上角的「移除佈局」

The form editor with the left panel displaying options to edit the form step styles.

  1. 點擊橫幅背景以展開該區段:
    • 開啟背景顏色開關即可自訂表單的橫幅背景。
    • 選擇顏色透明度
    • 點擊「漸層」下拉式選 單以添加漸層效果。
    • 使用圖片作為橫幅背景。您可從HubSpot 檔案上傳圖片、瀏覽電腦硬碟中的圖片,或使用AI 助手生成圖片。

The form editor displaying banner style options, including color, opacity, gradient, and image selection.


設定表單樣式

自訂表單及各步驟的文字、輸入欄位、按鈕與背景樣式。於「全域樣式」標籤頁設定的樣式選項將套用至所有表單步驟,無法針對個別步驟另行調整樣式。

請注意: 在新版編輯器中無法將表單設為原始 HTML 格式。僅使用舊版編輯器建立的表單可設定為原始 HTML

表單樣式設定步驟:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單或將游標懸停於現有表單上,點擊「編輯」。
  3. 在左側點擊樣式圖示

The form editor with the left panel displaying styles options, including branding, fields, buttons, paragraph, heading, background, and the progress bar.

  1. 自訂文字輸入 欄位或按鈕時,可透過「快速欄位輸入樣式」選取現成樣式。您亦可手動調整表單各元件的樣式:
    • 欄位:自訂 欄位樣式,包含背景與邊框。您亦可調整標籤字型、字型大小與顏色,以及說明文字、預留位置與錯誤訊息的配色。
    • 按鈕:自訂按鈕高度、圓角、背景、漸層效果,並可添加陰影。同時可調整按鈕文字的字型、字號與顏色。
    • 段落(富文本):自訂正文文字的字型、字型大小與顏色。
    • 標題:自訂 標題字型與文字顏色,可選擇為標題文字添加陰影效果。
    • 背景:自訂表單及步驟背景,可設定單色背景或使用圖片背景(支援AI助手生成圖片),亦可設定表單邊框。
    • 進度條:自訂表單進度條樣式,包含進度線顏色與進度條字型。

自動化表單

啟用簡易自動化功能,例如向聯絡人發送跟進郵件,或向其他 HubSpot 使用者自動發送內部郵件通知。您亦可將表單提交作為簡易工作流程的觸發條件。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單 或將游標懸停於現有表單並點擊「編輯」。
  3. 於左側面板點擊表單 自動化圖示settis automati workflows
  4. 在「 表單提交後的自動化處理 區段中:

    • 若需在每次表單提交後自動觸發跟進郵件,請於「表單提交後發送郵件區塊點擊「建立此工作流程」
    • 若要從空白範本建立自訂工作流程,請在「建立簡易自訂工作流程」區段點擊「建立新工作流程」。於右側滑入面板的「觸發條件」區段,選擇「聯絡人提交表單」選項。
  5. 若需新增其他工作流程動作,請點擊+ 符號圖示
  6. 要啟用工作流程,請在流程名稱旁點擊開關按鈕 。完成後點擊「了解」。發布簡易工作流程後,任何流程變更將自動套用至已註冊聯絡人。
  7. 若您已啟用表單自動化通知測試版功能 ,即可在自動化流程需審核時,以及註冊率變動時通知使用者:
    • 若需接收工作流程錯誤通知,請開啟「當此自動化需審核時通知我」開關。
    • 若需在註冊率波動時接收通知,請開啟「註冊率變動時通知我」開關,接著從下列選項中選擇:
      • 使用 Breeze 智能偵測:開啟此開關,系統將根據過去 30 天數據自動偵測註冊率變化。
      • 使用手動範圍:開啟此開關可手動設定固定註冊率門檻,超過該門檻時將觸發通知。

        forms-automation-notification-settings
    • 「通知接收者」區段中,點擊 使用者與團隊」下拉選單並選擇通知發送對象。僅開啟 HubSpot 通知功能且至少啟用一個通道的使用者,方能接收此類通知。

深入了解表單自動化功能

自訂表單設定

設定表單參數,包含表單提交後對應聯絡人的後續處理、使用者通知設定及表單預設語言。您可設定聯絡人的行銷狀態、生命週期階段等項目。部分選項可能因您的 HubSpot 訂閱方案而未顯示。

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單 或將游標懸停於現有表單並點擊「編輯」。
  3. settings 於左側面板點擊表單設定圖示
  4. 於「一般」標籤頁中,設定下列表單基本參數:
    • 自動從未知電子郵件地址建立新聯絡人選取此選項可針對每個提交且擁有唯一電子郵件地址的表單提交建立新聯絡人記錄。若提交的電子郵件地址與資料庫中現有聯絡人記錄匹配,則會更新現有記錄的詳細資訊。
      • 關閉此選項,HubSpot 將優先嘗試透過提交的電子郵件地址將表單提交關聯至現有聯絡人。若該郵件地址不存在對應聯絡人,HubSpot 將依據瀏覽器中的 Cookie 識別並更新聯絡人資料。若同一裝置多次提交相同表單,可能導致聯絡人資料被覆寫。
      • 若此選項開啟,當聯絡人使用已存在 Cookie 的瀏覽器以不同電子郵件提交表單時,系統將不再追蹤此聯絡人的瀏覽紀錄。同時,「預先填入已知值的聯絡人欄位」與「新增重設表單連結」選項亦會自動停用。
    • 將新聯絡人設為行銷聯絡人:若 您的 HubSpot 帳戶具備行銷聯絡人存取權限,可自動將提交此表單的聯絡人(含新舊聯絡人)設為行銷對象。
    • 為回訪者預填欄位若聯絡人曾造訪您的網站並提交表單,且 HubSpot 能儲存並追蹤其 Cookie,則表單中所有已知欄位值皆可預先填入。此選項預設為開啟狀態。瞭解更多關於預填表單欄位的資訊
    • 表單簡化功能:若您持有 HubSpot 點數,可透過自動隱藏「資料豐富化」功能可填寫的欄位來精簡表單。深入了解表單簡化功能
    • 新增表單重設連結:若已啟用「為回訪者預填欄位」功能,您亦可於表單添加重設連結。啟用此選項後,訪客可點擊表單上的「非本人?點此重設」以清除所有預填欄位。當表單重設時:
      • 該次表單提交的 Cookie 追蹤功能將被關閉。現有追蹤 Cookie 不會被覆寫。
      • 表單提交將為未與現有聯絡人記錄匹配的電子郵件地址建立新聯絡人記錄。
    • 加入行銷活動:若您擁有行銷中心專業版 企業版訂閱方案,可將表單與行銷活動關聯:
      • 若要將表單關聯至現有活動,請點擊「活動」下拉式選單並選擇活動
      • 若要將表單關聯至新活動,請點擊「活動」下拉式選單並點擊「建立活動」,接著繼續設定您的活動。
    • 提交表單時更新聯絡人與公司生命週期階段 點擊「設定生命週期階段為」下拉選單並選擇階段。當訪客提交表單時,所有新增或現有記錄將設定為所選生命週期階段。
      • 您無法將記錄的生命週期階段回溯調整。若生命週期階段較後期的現有聯絡人或公司提交表單,其生命週期階段將不會更新。
      • 表單設定的生命週期階段將覆寫您在 HubSpot 設定中配置的預設生命週期階段
  1. 若要自訂提交設定,請於左側面板點擊「提交設定」 標籤頁。可自訂下列表單提交設定:
    • 發送給聯絡人擁有者:自動向 聯絡人擁有者發送通知。若聯絡人無擁有者,則不發送通知。瞭解更多關於HubSpot 物件擁有權的資訊
    • 發送給其他使用者:選擇 預設接收表單提交通知的團隊或個人,此設定不受聯絡人擁有權影響。此處設定的收件者將被 HubSpot 頁面表單選項中的設定覆寫。
    • 額外封鎖郵件網域:輸入需封鎖表單提交的特定郵件網域。例如欲封鎖email@domain.com 的提交,可新增 domain.com。若需封鎖所有免費郵件服務提供者,請點擊開啟「封鎖免費郵件提供者」開關。

A screenshot of the form editor, displaying form submission settings.
  1. 若要自訂表單語言設定,請點擊「語言與地區」標籤頁。點擊「主要語言」下拉式選單,為表單選擇預設語言。錯誤訊息、預設屬性標籤、說明文字、占位符文字及預設值將翻譯為該語言。
  2. 若要為表單建立 AI 翻譯(僅限行銷中心或 內容中心 專業版與 企業版):
    • 開啟「啟用所有表單內容的 AI 翻譯」開關。
    • 於「主要語言」下拉式 選單中,選擇 表單欲翻譯的目標語言。錯誤訊息、預設屬性標籤、說明文字、佔位符文字、預設值、自訂標籤、富文本及同意條款將自動翻譯為該語言。
    • 若表單內容自上次翻譯後有更新,請點擊「立即重新翻譯」以更新翻譯內容。
A screenshot of the form editor, displaying form language and region settings.

管理表單欄位的即時驗證

若您已 為屬性設定驗證規則,這些規則將套用至表單欄位,訪客必須滿足要求才能提交表單。表單欄位的即時驗證功能可讓訪客立即獲得輸入反饋,更容易修正錯誤並精準完成表單。

舉例而言,若您設定驗證規則要求 訂單編號屬性僅容許數字值,訪客輸入非數字內容時將收到修正提示。

A screenshot of form validation rules displaying warning messages on the live form.
表單的即時驗證功能預設為開啟狀態。若要管理表單欄位的即時驗證:
  1. 在你的 HubSpot 帳戶中,點擊頂端導覽列中的settings「設定圖示」。
  2. 於左側邊欄選單中,導覽至行銷>表單

  3. 點擊「提交設定」標籤頁。
  4. 開啟或關閉「啟用表單欄位即時驗證」開關。
  5. 於左下角點擊儲存。

發佈並分享您的表單

建立新表單或完成表單更新後,您需更新表單以使變更生效。接著即可將表單嵌入 HubSpot 頁面或行動呼籲按鈕。若內容託管於 HubSpot 外部,可複製表單嵌入代碼使用分享連結建立獨立表單頁面。

發佈與分享表單步驟:

  1. 在你的 HubSpot 帳戶中,瀏覽「行銷」>「表單」。
  2. 建立新表單,或將游標懸停於現有表單上並點擊「編輯」。
  3. 於右上角點擊「檢視與更新 發佈表單更新內容。
  4. 於右側面板底部點擊「更新」。
  5. 若要嵌入或分享表單,請選擇以下任一選項:
    • 透過 HubSpot 嵌入:將 表單嵌入 HubSpot CMS 網站頁面、著陸頁或搭配 HubSpot 行動呼籲按鈕。
      • 於「選擇將表單嵌入HubSpot網站/著陸頁或搭配HubSpot行動呼籲按鈕」區段中 ,選取內容選項
      • 點擊下拉式選單,選擇表單需嵌入的目標頁面或行動呼籲按鈕。
    • 取得嵌入代碼:透過嵌入功能將表單添加至外部託管頁面。若需追蹤外部頁面表單的分析數據,該頁面必須安裝您的 HubSpot追蹤代碼。瞭解如何將 HubSpot 表單添加至外部網站
      • 在底部點擊「複製」。
      • 嵌入代碼貼至頁面的 HTML 模組中。
    • 複製分享連結:使用網址將表單作為獨立頁面分享。
      • 點擊「複製」將表單頁面的網址複製至剪貼簿。
      • 在瀏覽器中開啟新視窗或分頁, 將表單頁面網址貼至網址列即可載入。您亦可直接分享表單頁面網址,讓他人存取表單。

The form editor share options, highlighting the option to embed the form on a HubSpot page or CTA.

這篇文章有幫助嗎?
此表單僅供記載意見回饋。了解如何取得 HubSpot 的協助