表單建好之後，要放上網站才能讓訪客填。創站點提供 3 種嵌入方式：斜線指令、Gutenberg 區塊、短代碼。本篇講每種方式的使用情境、實際操作步驟，以及怎麼在 Vibe 畫布裡放表單。
3 種嵌入方式比較#
- 斜線指令
/fluentform：在文章、頁面、Vibe 畫布裡敲指令、最快 - Gutenberg 區塊：用區塊插入器選「聯絡表單」區塊、視覺化挑表單
- 短代碼：用
[fluentform id="X"]貼進任何位置，相容性最廣（widget、外掛、第三方頁面建構器）
方法 1：斜線指令 /fluentform（推薦）#
這是創站點最快的嵌入方式。文章編輯器或 Vibe 畫布的 HTML 區塊裡敲斜線、跳出指令選單，輸入「fluentform」就會看到「聯絡表單」選項。
操作步驟#
- 打開要嵌入表單的文章或頁面
- 游標移到要放表單的位置
- 輸入
/fluentform，按 Enter - 下拉選單會列出所有現有表單，挑你要的那個
- 表單就會嵌入該位置、儲存即可
適合情境#
- 在「聯絡我們」頁面加聯絡表單
- 在部落格文章末尾加訂閱表單
- 在活動介紹頁中段加報名表單
方法 2：Gutenberg 區塊#
操作步驟#
- 在編輯器點「+」加區塊
- 搜尋「聯絡表單」（Fluent Form）
- 插入區塊後、從下拉選單挑你要的表單
- 區塊會即時預覽、儲存即可
區塊跟斜線指令本質上是同一件事，只是觸發方式不同——斜線指令快、Gutenberg 區塊適合不熟鍵盤指令的使用者。
方法 3：短代碼 [fluentform id="X"]#
怎麼找到表單 ID#
後台「聯絡表單」列表，每個表單後面都有一個短代碼欄位、直接複製即可。或從表單編輯器右上角「嵌入」按鈕也能拿到。
適合情境（為什麼還需要短代碼）#
- 放進「文字」widget（後台 → 外觀 → 小工具）
- 放進其他外掛的 shortcode 容器（例如彈窗、頁尾推廣）
- 放進主題模板的 PHP 檔（用
do_shortcode()） - 放進電子報、AMP 頁、自訂 HTML 區塊
在 Vibe 畫布裡放表單#
Vibe 畫布是創站點讓你貼 AI 寫的 HTML/CSS/JS 區塊的功能。如果你的設計需要「整頁是 AI 生成的 landing page，表單嵌在中段」、有 2 個做法：
做法 A：在 Vibe 畫布旁邊另放區塊#
Vibe 畫布跟其他區塊可以混用。最簡單的做法：
- 頂部放 Vibe 畫布（hero、產品介紹、優勢）
- 中段加一個普通區塊，用
/fluentform嵌入表單 - 下方繼續 Vibe 畫布（FAQ、見證）
這個做法最穩定，表單樣式不會受 Vibe 畫布的 CSS 干擾。
做法 B：Vibe 畫布內直接嵌短代碼#
Vibe 畫布的 HTML 區塊裡可以放 [fluentform id="X"]——但要小心 Vibe 畫布的 CSS 可能蓋到表單樣式。
- 把短代碼放進你想要的位置（例如 hero 下方、FAQ 上方）
- 儲存後預覽，檢查表單欄位是否正常顯示
- 如果樣式跑掉（顏色，按鈕大小不對），改用做法 A 把表單拉到 Vibe 畫布外
嵌入後的測試清單#
表單放上線之後，實際在前台測試 5 件事：
- 表單欄位顯示正常，沒有 CSS 跑掉
- 送出按鈕能按，按下會跳「送出中…」
- 送出後出現確認訊息（或跳轉到指定頁面）
- 後台「記錄」分頁有看到剛送出那筆
- 站長 Email 跟填表人 Email 都收到通知信
5 個都對就完成了。如果通知信沒收到，回去檢查設定 → 通知 → 收件人是否設對，或是否需要設定 SMTP 寄信（建議用 Brevo 免費版）。