表單系統：3 個情境、2 種嵌入方式、1 個 slash 指令

你開了一個創站點網站，想放一個「讓訪客能聯絡你」「讓學員可以報名課程」「讓粉絲能訂閱電子報」的表單——不用再去找第三方表單工具，也不用再學另一套介面。創站點本身就內建完整的表單功能，打開後台建好表單、在文章或 Vibe 畫布裡敲一個斜線指令，整個表單就跳出來。三分鐘可以上手。

這篇教學只講三件事：創站點表單常見的使用情境、表單編輯器長什麼樣，以及最多人問的——怎麼把建好的表單放進文章或 Vibe 畫布。

表單可以拿來做什麼？3 個最常見的情境#

在動手看編輯器之前，先對齊一下：你是為了什麼要做表單？多數創站點站長的需求會落在這三個情境之一。

情境 1：聯絡表單#

最基礎，也最常用的。訪客有問題，想合作，想詢價，放在「關於我們」「聯絡我們」「服務介紹」這幾個頁面底部。欄位不用多：姓名、電話、Email、主旨、訊息內容五個就夠。要的是讓對方順手填完送出，不是蒐集一堆之後用不到的資料。

情境 2：活動／課程報名#

你辦一場線上講座，開一堂實體課、有一次品牌體驗活動——需要在網站上開放報名。這時候除了基本聯絡欄位，會加上選擇場次、人數，是否葷素、身分別等。表單編輯器有「下拉選單」「單選欄位」「核取方塊」可以直接拉進來，不需要寫程式。

情境 3：訂閱／名單蒐集#

做 SEO、經營部落格、跑廣告，目的通常是把來訪者轉成訂閱戶。這時候表單要設計得簡短有力：只要 Email 一個欄位，或最多加一個「你最想了解什麼？」做初步分群。表單做得越短，送出率越高。

釐清你要做哪一種之後，進後台看編輯器。

創站點的表單編輯器長什麼樣？#

從創站點後台側邊選單進入「聯絡表單」，點開任一個表單（或新建一個），會看到下面這個編輯器畫面。

整個畫面分三個部分：

頂部：三個頁籤#

• 編輯器：你現在看到的畫面，負責表單長相跟欄位。
• 設定：送出後的行為——要寄通知信給誰，要不要串電子報工具，要不要跳轉到感謝頁。
• 輸入項目：表單收到的每一筆填寫資料都會存在這裡，可以匯出。

左側：表單即時預覽#

這是所見即所得——你在右側拉一個欄位進來，左側就會出現；點任一個欄位就能改標題，提示文字、必填與否；拖曳可以調整上下順序。訪客實際看到的表單就是長這樣。

右側：欄位選單#

欄位分三組：

• 一般欄位：日常 90% 會用到的——姓名、電子郵件、電話、簡單文字、文字區域、下拉選單、單選、核取方塊、圖片上傳、檔案上傳、時間與日期等。大部分表單從這裡拉就夠用。
• 進階欄位：收合狀態。需要條件邏輯、評分、簽名，付款整合等進階互動時才展開。
• 容器：排版用。想把「姓」跟「名」擺同一排，想做兩欄式表單，就用容器包起來。

加入欄位的方式有兩種：點一下右側欄位就會自動加到表單底部，或者拖曳到左側預覽的特定位置。改好記得右上角按「Save Form」儲存。

編輯器的部分三分鐘就看懂了。真正值得學會的，是下一段。

重點：怎麼把表單放進文章或 Vibe 畫布？#

表單建好之後，下一步是把它嵌入到實際頁面——可能是你的「聯絡我們」文章、某個服務介紹頁、或一張 Vibe 畫布設計稿。創站點提供兩種做法，推薦第二種。

做法 1：用短代碼（最通用）#

每個建立好的表單都有一組專屬短代碼，長這樣：

[fluentform id="3"]

數字是你表單的 ID，在後台「聯絡表單」列表頁就能看到。把這段短代碼貼進文章、頁面、側邊欄元件，甚至任何支援短代碼的區域，前台就會渲染出你的表單。適用於任何情境，但缺點是在編輯器裡只看得到一串代碼，看不到表單長相，要發佈後才知道排版對不對。

做法 2：Slash 指令（強烈推薦）#

這是這篇教學最想讓你記住的一招。在創站點的文章編輯器（或 Vibe 畫布，Vibe 畫布本質是創站點的一種客製內容類型，跟文章共用同一套編輯器）裡，把游標放在你要插入表單的位置，然後：

1. 輸入一個斜線 /
2. 接著打 fluent（或完整的 fluentform，兩種寫法都會 match 到同一個區塊）
3. 編輯器會跳出一個候選選單，裡面就是創站點表單區塊
4. 按 Enter 或點一下即可插入
5. 插入後，從區塊內的下拉選單選擇你要顯示的那一張表單

/fluentform 是這個區塊的系統識別字——你在創站點後台看到的菜單是中文的「聯絡表單」，但編輯器底層辨識用的仍是 fluentform 這組英文代碼，輸入了就可以嵌入

Slash 指令比短代碼好在哪？#

• 所見即所得：插入後直接在編輯器裡看到表單預覽，不用發佈才知道排版。
• 可以對區塊做設計：當成一個普通的內容區塊，可以調整對齊，加上下邊距，套用不同背景色、放進 Cover 區塊當 hero 表單。
• 切換表單更快：想換成另一張表單？直接在區塊的下拉選單改，不用回去翻短代碼。
• Vibe 畫布完全通用：Vibe 畫布的編輯邏輯跟一般文章相同，同一個 slash 指令直接用，不用額外學。

幾個常被忽略的設計眉角#

表單上方加一段話#

訪客對「要填表」這件事是有心理抗拒的。在表單上方放一句說明——例如「填完後我們會在 24 小時內以 Email 回覆」「訂閱後每週收到一封乾貨摘要，不寄廣告」——送出率會明顯上升。這段說明可以直接用一般段落區塊放在表單區塊之上。

長表單用容器分成兩欄#

當表單超過 6 個欄位，版面一長訪客就會滑走。利用欄位選單裡的「容器」把「姓／名」「縣市／地址」等短欄位放同一排，視覺長度會縮短一半。

同一頁放多個表單是可以的#

一張服務介紹頁頂部放「免費諮詢」表單、底部放「訂閱電子報」表單——創站點沒有單頁表單數量限制，用不同短代碼或 slash 指令插入兩次即可。兩張表單各自獨立運作，不會互相干擾。

小結：一個指令，解鎖所有表單場景#

創站點的表單功能不是外加的附屬模組，它已經深度整合進創站點的編輯器。你只需要：

1. 在後台「聯絡表單」把表單建好，按 Save Form。
2. 回到要放表單的文章、頁面或 Vibe 畫布。
3. 輸入 /fluent，選擇表單，完成。

從聯絡表單、活動報名、電子報訂閱，到任何你想得到的互動場景，這一個指令全部通用。試一次，之後你會覺得短代碼太慢。

延伸閱讀#

• 3 分鐘完成網站寄信（SMTP）設定，讓表單通知信不再進垃圾匣
• 如何新增團隊成員，管理帳號與產生登入連結（讓客服也能看表單）
• 創站點三個方案比較：哪一個最適合你的表單需求？
• 教學文件：開始用聯絡表單——建立第一個表單
• 教學文件：聯絡表單編輯器——欄位類型與排版技巧
• 教學文件：表單設定——通知信，確認訊息、防垃圾
• 教學文件：查看與管理表單記錄（Entries）
• 教學文件：把表單放上網站——3 種嵌入方式