Framer 表單怎麼做？從原生 Form 元件到通知、防垃圾與成效追蹤
2026年8月24日 上午 12:10
AI 設計FRAMER · FORMS · 2026
QUICK ANSWER
Framer 表單有三條路：原生 Form 元件、內建整合（Formspark、HubSpot、Typeform、Mailchimp 等）、以及用 Embed 嵌入第三方。多數情況直接用原生就好——所有方案都能用、提交數無上限，而且內建防垃圾與速率限制。真正決定表單成敗的不是怎麼做出來，是提交之後通知去哪裡、有沒有人在看那個數字。
CHAPTER 01 · WHY IT MATTERS
整個網站唯一會「收到東西」的元件
網站上的其他東西都是單向的。Hero 給人看、作品集給人看、關於我給人看。只有表單是雙向的——它是訪客唯一能把東西送回來給你的地方。
所以它也是整個網站唯一會「壞掉而沒人發現」的元件。首頁掛了你三分鐘內就知道，表單通知寄丟了，你可能三個月後才在某次對話裡發現有人明明填過。
這篇的重點會放在提交之後，因為做出一個表單在 Framer 裡真的只要三十秒。
CHAPTER 02 · THREE PATHS
三條路，先決定走哪一條
打開 Insert 面板往下拉到 Forms，你會看到第一格是原生表單，後面一整排是各家整合。它們解決的問題不一樣。
給一個實務上的預設值：先假設用原生，除非有具體理由不能。原生的最大優勢是它繼承你的設計系統——輸入框、按鈕、焦點狀態、錯誤狀態全部你自己畫，不會出現整個網站很美、到表單突然變成別人家的樣子那種斷裂。
另外一個常被誤會的點：原生表單所有方案都能用，連免費方案也是，提交數沒有上限。這跟很多人以為的「表單是付費功能」不一樣。
CHAPTER 03 · FIELDS
欄位不難選，難的是命名
把 Form 元件拖上畫布，Framer 會給你一組預設的姓名、Email、送出按鈕。點下方的加號就能繼續加欄位，型別有文字、勾選、單選、下拉這幾種。
型別照字面選就對了，不用教。真正會出事的是每個欄位的 Name 屬性——那是提交出去時用來標示這筆資料的鍵值。你在畫布上看到的標籤是給人看的，Name 是給系統看的。
沒改過的話你的信箱會收到一封裡面寫著 field-1、field-2、field-3 的通知，而且你分不出哪個是電話哪個是預算。等到累積三百筆再回頭改，前面三百筆的資料結構就跟後面對不起來。
習慣養成：拉完欄位立刻改 Name，用英文小寫加連字號，跟你之後要匯進去的表格欄位對齊。這件事花你十秒，省掉的是之後每一次讀信的困惑。
NOTE
只要輸入元件放在 Form 元件裡面，它就會自動被算進這次提交。所以你可以自由排版——把兩個欄位並排、中間插一段說明文字、加一張圖，都不影響資料。這是原生表單比嵌入好用的地方。
CHAPTER 04 · WHERE IT GOES
送出之後，那筆資料去哪裡
這是整篇最重要的一段。原生表單的提交目的地有三種，在表單的設定面板裡選。
EMAIL · 最快，但最容易漏
填一個信箱就完成。問題是通知信很容易掉進垃圾郵件，或是被淹沒在一天兩百封信裡。如果是客戶的案子，強烈建議填一個共用信箱而不是某個人的個人信箱——那個人離職的那天，所有詢問就進黑洞了。
GOOGLE SHEET · 最實用
每一筆自動變成一列。好處是資料留得下來、可以排序、可以計算轉換、可以直接交給業務。客戶對這個的接受度也最高，因為所有人都會用試算表。實務上我會 Email 跟 Sheet 兩個都設，信是通知，表是存檔。
WEBHOOK · 最彈性
把資料丟到一個網址，接下來要進 Notion、Airtable、Slack、CRM 都可以，中間接 Zapier 或 Make 這類服務。彈性最大，但多了一層會壞的東西——那個中介服務停掉、免費額度用完、或是欄位改名，你的表單看起來都正常，資料卻不見了。
不管選哪一種，上線後一定要自己填一次真的送出去，然後確認那封信真的躺在收件匣、那一列真的出現在表格裡。這是唯一能證明它會動的方法，而且很多人跳過。
CHAPTER 05 · CONVERSION
讓人真的願意填完的幾件事
前面都是技術，這一段是設計。同一個表單，做法不同，填完率可以差好幾倍。
防垃圾這件事 Framer 幫你處理掉了——內建垃圾過濾與速率限制，不用自己接 reCAPTCHA。這是原生表單相對於自己刻的另一個實質優勢，因為公開在網路上的表單一定會被機器人找到，沒防護的話你會收到一堆賣藥廣告。
“
表單不是設計問題，是信任問題。每多問一格，你就多要求對方相信你一次。
CHAPTER 06 · TRACKING
沒有數字，你不會知道它壞了
回到開頭那句話：表單是唯一會安靜壞掉的元件。防止這件事的方法只有一個——讓它有數字。
Framer 的分析功能可以直接追蹤表單提交。幫每個表單設一個追蹤名稱，之後就能在後台看到它每週被送出幾次。
這個數字的價值不只是好看。它是一條警報線——如果某週突然歸零，那不是沒人想聯絡你，是通知設定掛了、Webhook 斷了、或是你改版時把某個欄位改壞導致驗證永遠不通過。
再往上一層是漏斗。把「看到頁面 → 點擊 CTA → 送出表單」串成一條路徑，你就看得出流失發生在哪一段。是沒人往下捲、還是捲到了但不敢填，這兩件事的解法完全不同。
官方 Academy 有一支影片把建表單到發佈的流程走過一遍，適合先看一次再動手：
▲ Framer 官方教學：做出你的第一個表單
CHAPTER 07 · HANDOVER
交件前的五個動作
表單是最容易在交件後被客訴的元件，因為它一壞就直接影響生意。這五個做完再交。
自己送一次真的資料
不要用測試環境，用正式網址填完整送出，確認信真的到、表格真的多一列。這一步不能省。
請客戶也送一次
讓他親眼看到通知進他自己的信箱。順便確認那封信沒有掉進垃圾郵件——這件事你在自己電腦上測不出來。
手機實機測一遍
超過一半的表單是在手機上填的。確認鍵盤型別對、欄位不會被鍵盤蓋住、送出按鈕點得到。
設好追蹤名稱
每個表單一個名字，用途看得出來的那種。這是客戶之後唯一能自己確認表單有在運作的方式。
寫進交件文件
通知寄到哪個信箱、資料存在哪張表、誰負責看。三句話，但它能擋掉半年後那句「我們都沒收到啊」。
CHAPTER 08 · TAKEAWAYS
重點整理
TAKEAWAYS
→
預設用原生表單，所有方案都能用、提交無上限、繼承你的設計系統。整合與嵌入是例外不是常態。
→
拉完欄位立刻改 Name 屬性，不然收到的通知會是 field-1、field-2，而且改不回來。
→
Email 當通知、Google Sheet 當存檔，兩個都設。客戶的案子用共用信箱，不要用個人信箱。
→
必填欄位每多一個就掉一段填完率，按鈕寫使用者得到什麼，成功狀態一定要有。
→
設追蹤名稱，那個數字是表單安靜壞掉時唯一的警報。
做完前面那些，你交出去的就不只是一個能填的表單，是一條真的會把人帶到客戶面前的路。網站其他部分做得再漂亮，最後成交都要從這裡經過——它值得你多花那三十分鐘。
RELATED READS · 延伸閱讀
Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學
讓客戶自己更新內容，你不用再當免費工讀生。
閱讀文章 →Framer SEO 怎麼設定？從 meta、sitemap 到 AI 搜尋可見度的完整指南
先讓人找得到你，表單才有東西可以收。
閱讀文章 →Framer 網域怎麼綁？DNS 設定、SSL 憑證與五個最常卡關的地方
把 framer.website 換成自己的名字，連同 SSL 一次搞定。
閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具
還在評估要不要跳進來的話，從這篇開始。
閱讀文章 →Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂
建站那一段能省多少力氣，這篇拆解它的能力邊界。
閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？
專案跨出 Framer 之後，這套調教方法能接上。
閱讀文章 →EXTRA · 官方資源
常見問題
Q：Framer 的原生表單要付費嗎？
不用。原生表單所有方案都能使用，包含免費方案，而且提交數沒有上限。要付費的是進階的分析功能與部分第三方整合服務本身的費用。
Q：可以做多步驟或有條件邏輯的表單嗎？
原生表單目前不支援。需要分頁填寫、依前面答案決定後面問題的話，要走 Typeform 這類服務的整合，或是用 Code Component 自己刻。多數聯絡表單用不到這些，先確認客戶是真的需要還是想要。
Q：提交的資料會存在 Framer 裡面嗎？
不會，Framer 只負責把資料轉送到你指定的目的地。所以目的地一定要設好，而且要有一個地方是會留存的——這也是我建議一定要接 Google Sheet 的原因，信會被刪，表格不會。
Q：會收到垃圾訊息嗎？
Framer 內建垃圾過濾與速率限制，一般情況擋得住。如果還是有漏網的，最有效的補強是加一個機器人不會填、但人類看得懂的選填問題，或是把提交串到有二次過濾的服務。
Q：表單填完率多少算正常？
沒有通用答案，差別主要來自流量品質與欄位數量。與其追一個標準值，不如追自己的趨勢——記下改版前的數字，砍掉兩個必填欄位之後再看一次，那個差距才是有意義的資訊。
Q：客戶想把表單資料接到自己的 CRM，怎麼做？
看 CRM 是哪一家。HubSpot 這種有原生整合就直接用；沒有的話走 Webhook 接 Zapier 或 Make 中轉。要提醒客戶的是中介服務有月費也有額度上限，那筆錢與維護責任要講清楚是誰的。