指南/編輯網站/編輯器/表單/建立聯絡表單

建立聯絡表單

在網站上建立表單,以收集訊息、預訂、註冊、意見回饋等資訊。閱讀這份指引,你將學習如何建立可新增至網站的表單。

影片教學

建立表單

請依照以下步驟新建表單:

  1. 前往網站的儀表板
  2. 前往「Jetpack」→「表單」
  3. 按一下右上角的「建立表單」按鈕。
An arrow pointing to the "Create a form" button.
  1. 為表單指定名稱 (例如「聯絡我們」),然後按一下「建立」按鈕。該名稱會顯示在「表單」儀表板中,可協助你在擁有多個表單時區分這些表單。
The form name field and Create buttons highlighted.
  1. 在表單編輯器中,從不同的預先建置版面形式中進行選擇,包括聯絡表單、邀請函回覆表單、註冊表單、預約表單、意見回饋表單或多步驟表單。或者,使用文字欄位來描述想要的表單。
The form block with pre-built layouts and a text field to ask AI to build the form.
  1. 使用表單內的「+ 區塊插入工具新增及自訂表單欄位。可用的欄位類型包括名稱、電子郵件、文字區域、複選框、選項按鈕、下拉式清單和檔案上傳
  2. 從表單的樣式設定變更顏色、字型和版面形式,以設計表單

選擇提交後會發生什麼事

你可以控制訪客在提交表單後看到的內容。若要設定提交後的動作,請依照下列步驟操作:

  1. 按一下編輯器左上角的三條水平線圖示,即可開啟「清單檢視」。
  2. 從清單中選取「表單」區塊
An arrow from the List View icon to the Form block in the List View.
  1. 在區塊設定側邊欄中,展開「提交後的動作」。
The "action after submit" settings showing options for a text or redirect link.
  1. 選擇選項:
    • 文字:顯示自訂訊息。你可以編輯預設文字、決定是否顯示已提交資料的摘要,以及包含「返回」連結。
    • 重新導向連結:提交後將訪客傳送到其他頁面。

發佈表單

當表單就緒時,請依照下列步驟操作:

  1. 按一下編輯器右上角的「發佈」按鈕。
  2. 在顯示的面板中再按一下「發佈」即可確認。

表單現已儲存,可嵌入在任何頁面或文章中。

發佈表單後,你會看到下列選項:

  • 新增至新頁面:使用已新增的表單新建頁面。
  • 新增至現有頁面:選取要新增表單的現有頁面。
  • 複製並手動新增:複製嵌入程式碼或短代碼,以手動新增表單。

離開表單編輯器後,你仍然可以將表單新增到任何頁面。深入了解我們的表單區塊指引。

The post-publish options for adding a form to a page.

接收電子郵件通知

每當有人在網站提交表單時,你就會收到電子郵件通知。你可以直接在電子郵件程式中回覆這些電子郵件。

依預設,系統會將回應傳送至 WordPress.com 帳號電子郵件地址。若要變更電子郵件地址或新增多名收件人,請依照下列步驟操作:

  1. 按一下編輯器左上角看起來像三條水平線的圖示,即可開啟「清單檢視」。
  2. 從清單中選取「表單」區塊
An arrow from the List View icon to the Form block in the List View.
  1. 在區塊設定側邊欄中,展開「表單通知」。
  2. 確認「將回應傳送至電子郵件」切換開關已開啟。
  3. 在「傳送目標的電子郵件地址」欄位中輸入電子郵件地址。請用逗號分隔多個電子郵件地址。
  4. 按一下「儲存」。
The Form block's notifications settings with a text field labeled "Email Address to Send To"

自訂電子郵件主旨行

你可以自訂收到的通知電子郵件主旨行。在區塊設定的「表單通知」區段中,更新「電子郵件主旨行」欄位。

若要在主旨行中包含表單提交中的資訊,請在大括號內輸入欄位名稱。例如,如果表單有「名稱」和「電子郵件」欄位,請輸入 {name};{email},以在主旨中包含那些值。欄位名稱必須符合表單上的標籤,且不區分大小寫。

The form block settings showing how the subject line can be customized.

設定推送通知

你可以在儀表板通知瀏覽器中接收表單回應的推送通知。若要啟用推送通知,請依照下列步驟執行:

  1. 在編輯器中開啟「清單檢視」。
  2. 從清單中選取「表單」區塊
  3. 在區塊設定側邊欄中,展開「表單通知」。
  4. 將「啟用回應通知」切換為開啟。
  5. 選擇哪個網站使用者會收到通知。
  6. 按一下「儲存」。
The  "Enable notifications for responses" option is toggled on and a site username is shown in the box below.

設定回應儲存空間

依預設,透過「表單」區塊傳送的表單會儲存在「Jetpack」→「表單」的回應下。如果傳送到電子郵件的訊息遭封鎖為垃圾訊息,將回應儲存在網站特別有用。

請按照下列步驟設定回應儲存空間:

  1. 在編輯器中開啟「清單檢視」。
  2. 從清單中選取「表單」區塊
  3. 在區塊設定側邊欄中,展開「回應儲存空間」。
  4. 關閉「儲存回應」選項以停止儲存訊息。開啟「儲存回應」以在網站上儲存回應。
The Save responses toggle under Response storage toggled on.

了解表單同步處理

網站上的每個表單都會儲存為表單文章。當你在頁面插入「表單」區塊時,WordPress.com 會建立與該區塊連結的表單文章。編輯功能旨在確保兩者保持同步:

  • 頁面上對「表單」區塊所做的變更會更新表單文章。
  • 在表單編輯器中所做的變更,會更新表單出現的頁面。
  • 「Jetpack」→「表單」的「表單」儀表板會在單一位置顯示所有表單文章。

儲存時會自動同步。如果在頁面上插入表單後,「表單」儀表板中未出現該表單,請使用下列步驟進行轉換

Copied to clipboard!