- 登入
- 註冊
把表單放上網站：3 種嵌入方式
表單建好之後、要放上網站才能讓訪客填。秒站提供 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 免費版）。
常見問題
斜線指令在 Vibe 畫布裡也能用嗎？
可以、但要在 Vibe 畫布的「文字」或「段落」區塊內、不是在「HTML」區塊內。HTML 區塊不解析 WordPress 短代碼。如果一定要在 HTML 區塊放表單、改用短代碼 `[fluentform id="X"]`，但要注意 Vibe 畫布的 CSS 可能影響表單樣式。
怎麼讓表單置中、改寬度？
Gutenberg 區塊提供「對齊」選項（左／中／右／滿版），最簡單。如果要更精細控制（自訂寬度、邊距）、用區塊容器（Group block）包表單、再對 Group block 設寬度與居中。或在表單編輯器的「樣式」分頁直接設容器寬度。
可以同一個表單放多個地方嗎？
可以。同一個表單 ID 可以在多個頁面嵌入、所有送出的記錄會合併到同一個「記錄」分頁。但要注意「來源網址」欄位會記錄是從哪一頁送出的，方便你日後分析哪個頁面轉換率最高。
表單在手機版顯示跑掉怎麼辦？
3 個常見原因：(1) 表單寬度被父容器限制——把表單包到滿版區塊裡；(2) 用了 2 欄容器但手機沒自動堆疊——檢查容器欄位的「響應式設定」是否開啟；(3) 字型大小設太大、超出手機螢幕——回欄位設定改字型大小或留預設值。實在跑掉就到表單編輯器「樣式」分頁開「行動裝置最佳化」。