--- title: "Framer 表單怎麼做？從原生 Form 元件到通知、防垃圾與成效追蹤" slug: framer-forms-guide url: https://rar.design/posts/framer-forms-guide published_at: 2026-08-24 modified_at: 2026-08-27 author: "設計師 Riven" category: "AI 設計" tags: ["UX", "無程式碼", "接案", "轉換率", "網頁設計", "表單", "Framer"] access: public_access --- # Framer 表單怎麼做？從原生 Form 元件到通知、防垃圾與成效追蹤 > 表單是整個網站唯一會收到東西的元件，也是唯一會安靜壞掉的元件 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-24 ✱ FRAMER · FORMS · 2026Insert 面板的 Forms 分類：第一格是原生表單，其餘是各家整合QUICK ANSWERFramer 表單有三條路：原生 Form 元件、內建整合（Formspark、HubSpot、Typeform、Mailchimp 等）、以及用 Embed 嵌入第三方。多數情況直接用原生就好——所有方案都能用、提交數無上限，而且內建防垃圾與速率限制。真正決定表單成敗的不是怎麼做出來，是提交之後通知去哪裡、有沒有人在看那個數字。✱ CHAPTER 01 · WHY IT MATTERS整個網站唯一會「收到東西」的元件網站上的其他東西都是單向的。Hero 給人看、作品集給人看、關於我給人看。只有表單是雙向的——它是訪客唯一能把東西送回來給你的地方。所以它也是整個網站唯一會「壞掉而沒人發現」的元件。首頁掛了你三分鐘內就知道，表單通知寄丟了，你可能三個月後才在某次對話裡發現有人明明填過。這篇的重點會放在提交之後，因為做出一個表單在 Framer 裡真的只要三十秒。✱ CHAPTER 02 · THREE PATHS三條路，先決定走哪一條打開 Insert 面板往下拉到 Forms，你會看到第一格是原生表單，後面一整排是各家整合。它們解決的問題不一樣。做法什麼時候用代價原生 Form聯絡表單、報名、諮詢單、意見回饋——九成的案子沒有條件邏輯與多步驟流程內建整合客戶已經在用 HubSpot、Mailchimp、Typeform 那一套樣式受對方限制，你只能改一部分Embed 嵌入Tally、Beehiiv 這類沒有原生整合的服務是一塊 iframe，跟你的設計系統完全脫節給一個實務上的預設值：先假設用原生，除非有具體理由不能。原生的最大優勢是它繼承你的設計系統——輸入框、按鈕、焦點狀態、錯誤狀態全部你自己畫，不會出現整個網站很美、到表單突然變成別人家的樣子那種斷裂。另外一個常被誤會的點：原生表單所有方案都能用，連免費方案也是，提交數沒有上限。這跟很多人以為的「表單是付費功能」不一樣。✱ 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讓人真的願意填完的幾件事前面都是技術，這一段是設計。同一個表單，做法不同，填完率可以差好幾倍。項目怎麼做欄位數量每多一個必填就掉一段填完率。問清楚哪些是「業務真的會用到」，其他一律砍掉或改選填標籤位置放在欄位上方，不要只用 placeholder。使用者一打字提示就消失，填到一半忘記這格要填什麼按鈕文案寫使用者得到什麼，不要寫「送出」。「預約免費諮詢」比「Submit」有效得多錯誤狀態錯的那一格要標紅並說明原因，不要只在最上面丟一句「表單有誤」讓人自己找成功狀態明確告訴他收到了、什麼時候會回覆。沒有回饋的話很多人會再送一次，你就收到重複資料手機鍵盤Email 欄位選 Email 型別、電話選電話型別，手機才會跳對的鍵盤。這一點超多人忽略防垃圾這件事 Framer 幫你處理掉了——內建垃圾過濾與速率限制，不用自己接 reCAPTCHA。這是原生表單相對於自己刻的另一個實質優勢，因為公開在網路上的表單一定會被機器人找到，沒防護的話你會收到一堆賣藥廣告。表單不是設計問題，是信任問題。每多問一格，你就多要求對方相信你一次。✱ CHAPTER 06 · TRACKING沒有數字，你不會知道它壞了回到開頭那句話：表單是唯一會安靜壞掉的元件。防止這件事的方法只有一個——讓它有數字。Framer 的分析功能可以直接追蹤表單提交。幫每個表單設一個追蹤名稱，之後就能在後台看到它每週被送出幾次。追蹤面板：連結點擊與表單提交都在同一張表上這個數字的價值不只是好看。它是一條警報線——如果某週突然歸零，那不是沒人想聯絡你，是通知設定掛了、Webhook 斷了、或是你改版時把某個欄位改壞導致驗證永遠不通過。再往上一層是漏斗。把「看到頁面 → 點擊 CTA → 送出表單」串成一條路徑，你就看得出流失發生在哪一段。是沒人往下捲、還是捲到了但不敢填，這兩件事的解法完全不同。漏斗與 A/B 測試：表單填完率也能拿來做對照實驗官方 Academy 有一支影片把建表單到發佈的流程走過一遍，適合先看一次再動手：Framer 官方教學 — 做出你的第一個表單✱ CHAPTER 07 · HANDOVER交件前的五個動作表單是最容易在交件後被客訴的元件，因為它一壞就直接影響生意。這五個做完再交。1自己送一次真的資料不要用測試環境，用正式網址填完整送出，確認信真的到、表格真的多一列。這一步不能省。2請客戶也送一次讓他親眼看到通知進他自己的信箱。順便確認那封信沒有掉進垃圾郵件——這件事你在自己電腦上測不出來。3手機實機測一遍超過一半的表單是在手機上填的。確認鍵盤型別對、欄位不會被鍵盤蓋住、送出按鈕點得到。4設好追蹤名稱每個表單一個名字，用途看得出來的那種。這是客戶之後唯一能自己確認表單有在運作的方式。5寫進交件文件通知寄到哪個信箱、資料存在哪張表、誰負責看。三句話，但它能擋掉半年後那句「我們都沒收到啊」。✱ CHAPTER 08 · 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 一次搞定。閱讀文章 →一頁式網站為什麼好看卻沒人填表單？從 Hero 到 CTA 的六段說服順序版面把人帶到按鈕前，表單負責不要把他弄丟。閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具還在評估要不要跳進來的話，從這篇開始。閱讀文章 →Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂建站那一段能省多少力氣，這篇拆解它的能力邊界。閱讀文章 →✱ EXTRA ／ 官方資源官方教學：加入聯絡表單官方教學：原生表單的各種欄位型別官方教學：追蹤連結與表單Framer Academy：做出你的第一個表單Framer 官網（免費開始）COURSEFramer 網站設計課：從零開始三個實戰專案把版面做出來，課後教材再補上表單、通知與交件驗收這一段。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →✱ FAQ常見問題✱ Framer 的原生表單要付費嗎？不用。原生表單所有方案都能使用，包含免費方案，而且提交數沒有上限。要付費的是進階的分析功能與部分第三方整合服務本身的費用。✱ 可以做多步驟或有條件邏輯的表單嗎？原生表單目前不支援。需要分頁填寫、依前面答案決定後面問題的話，要走 Typeform 這類服務的整合，或是用 Code Component 自己刻。多數聯絡表單用不到這些，先確認客戶是真的需要還是想要。✱ 提交的資料會存在 Framer 裡面嗎？不會，Framer 只負責把資料轉送到你指定的目的地。所以目的地一定要設好，而且要有一個地方是會留存的——這也是我建議一定要接 Google Sheet 的原因，信會被刪，表格不會。✱ 會收到垃圾訊息嗎？Framer 內建垃圾過濾與速率限制，一般情況擋得住。如果還是有漏網的，最有效的補強是加一個機器人不會填、但人類看得懂的選填問題，或是把提交串到有二次過濾的服務。✱ 表單填完率多少算正常？沒有通用答案，差別主要來自流量品質與欄位數量。與其追一個標準值，不如追自己的趨勢——記下改版前的數字，砍掉兩個必填欄位之後再看一次，那個差距才是有意義的資訊。✱ 客戶想把表單資料接到自己的 CRM，怎麼做？看 CRM 是哪一家。HubSpot 這種有原生整合就直接用；沒有的話走 Webhook 接 Zapier 或 Make 中轉。要提醒客戶的是中介服務有月費也有額度上限，那筆錢與維護責任要講清楚是誰的。