官網『表單自動儲存』(Form Auto-Save) 設計完整攻略：中小企業如何用一段小 JS 把填到一半就跑掉的詢問單救回來

你有沒有遇過這種狀況：官網上一個看起來很正式的詢問表單，客戶認真填了十幾個欄位，寫到最後一個問題「請描述您想合作的方案」寫了兩百多個字，結果不小心切到別的分頁、或是網路抖一下、或是手機轉個橫向再轉回來，回來一看——欄位全空了。

對客戶來說，這種挫折感很直接：「算了，我下次再說。」而所謂的「下次」，通常就是永遠不會再有的下次。對中小企業的老闆來說，這代表你花了廣告費把人帶到官網、頁面內容也做得很認真、客戶都已經走到最後一步了，結果因為表單沒有自動儲存，白白流失一張詢問單。

「表單自動儲存」(Form Auto-Save) 是一個成本很低、卻能實實在在降低表單流失率的功能。這篇文章就來聊聊，中小企業官網為什麼該做這件事、要怎麼做、以及做的時候該注意哪些細節。

Photo by Team Nocoloco on Unsplash

為什麼中小企業的官網特別需要表單自動儲存？

先講一個殘酷的事實：越是完整、越是專業的表單，流失率越高。一個只有「姓名 / 電話 / 需求」三欄的簡單表單，客戶填完只要 15 秒；但如果你是做 B2B 的、要問公司名稱、統編、預算範圍、需求規格、專案時程、聯絡窗口、加上一段自由描述——填完可能要三到五分鐘。這段時間裡任何一個中斷，都可能讓客戶放棄。

中小企業的官網通常會遇到幾種典型情境，每一種都很容易踩到表單流失的雷：

情境一：客戶在通勤時填。 手機拿出來滑，捷運換車、電話進來、切到 LINE 回訊息，回到 Chrome 分頁，Safari 為了省記憶體早就把頁面重整了。填到一半的東西——沒了。

情境二：客戶在辦公室邊上班邊填。 老闆走過來、同事叫他、電話響、Windows 系統跳出更新提示逼他重開機。他心想「等下再填」，結果分頁被關掉，回來看到空白表單，直接放棄。

情境三：客戶認真寫需求描述。 你的表單有一個 800 字的自由填寫欄，客戶為了讓你更了解他的專案，寫得非常詳細。寫到一半想去找一個資料佐證，切出去查完回來——內容不見了。第二次他絕對不會再寫一次。

以上這三種情境的共通點是：問題不在客戶不想留，而是資料在他還沒按送出前就消失了。表單自動儲存做的事情很單純，就是在客戶按下送出之前，先把他填過的內容偷偷存下來，讓他關掉分頁再回來、或不小心重整頁面時，資料還在。

表單自動儲存的三種實作方式，中小企業怎麼選？

常見的做法主要有三種，複雜度和成本差很多，可以依照你的表單類型來挑。

第一種：瀏覽器端 localStorage 自動儲存（最容易做）

這是最簡單、也最適合中小企業一開始就導入的做法。原理是：客戶每輸入幾個字，前端 JavaScript 就把整份表單狀態寫進瀏覽器的 localStorage；下次客戶回到同一頁時，先檢查有沒有暫存資料、有的話就自動回填。

優點是不需要動到後端、不用任何伺服器成本、也不涉及資料庫。適用於一般聯絡表單、詢問單、報價需求表這類「一次性」的表單。

缺點是：資料只存在客戶「這台裝置的這個瀏覽器」，換一台裝置就不見了。而且如果客戶清了瀏覽器快取，暫存也一起消失。對於絕大多數中小企業的詢問單場景，這個限制其實可以接受。

第二種：後端草稿模式（給有帳號的系統用）

如果你的官網有會員系統、客戶要登入才能填某些長表單（例如報名活動、申請授權、上傳作品集），那可以做一個「儲存草稿」的機制：資料存到你自己的資料庫、綁定會員帳號，客戶下次登入不管換手機、換電腦都能繼續填。

這種做法比較適合客戶會回訪多次的情境，例如經銷商申請表、加盟意向書、供應商註冊這類流程。成本比第一種高，因為要動到後端 API 和資料庫設計，但對客戶體驗來說是巨大升級。

Photo by Ed Hardie on Unsplash

第三種：混合模式（同時做前後端）

比較講究的官網會兩者都做：客戶還沒登入前用 localStorage 暫存，客戶登入或按下「先儲存不送出」時再同步到後端。這樣不管客戶用哪種方式填、填到哪一半，資料都不會不見。

對中小企業來說，除非你的表單真的很長、很複雜、客戶又必須分好幾次填完（例如政府補助申請、認證表單），否則不用一步到位。先做第一種 localStorage 版本，等真的看到需求再升級。

做表單自動儲存，中小企業必守的五個實務原則

技術上不難，但很多網站做壞了、反而讓客戶更不爽。以下這五件事一定要做對。

一、不要儲存密碼、信用卡、身分證等敏感欄位。這個看起來像廢話，但真的很多網站把整份表單原封不動塞進 localStorage。密碼欄位、金融資料、個人身分證字號——這些絕對不能存。設計上要明確排除這些 input，只儲存一般文字、選項、多行說明這類。

二、儲存要有節流（debounce）。不要每按一個鍵就寫一次 localStorage，這會拖慢瀏覽器。實務上通常是使用者停止輸入 500 毫秒到 1 秒後才儲存一次，效能好、也不會浪費資源。

三、要主動告訴客戶「你的內容已保留」。當客戶重新回到頁面、發現表單自動填上了他之前寫的內容，一定要有一段明顯的提示：「我們幫您保留了上次填寫的內容，可以繼續編輯」。同時要提供一個「清除重填」的按鈕。這個小細節會讓客戶對你的官網信任感直接上一個檔次。

四、送出成功後要清掉暫存。客戶按下送出、收到成功訊息之後，一定要清掉 localStorage 裡的資料。不然下次他再進來想填另一筆詢問，會看到上一筆的舊資料，很尷尬也很奇怪。

五、要設一個過期時間。暫存資料放太久沒意義。實務上建議 7 天或 14 天就自動失效，超過時間就當作沒暫存過。這樣既保護客戶隱私、也避免半年前的草稿突然跳出來嚇到人。

Photo by Christian Boragine on Unsplash

做完之後怎麼評估效果？三個指標追起來

導入之後不要憑感覺，用數據看有沒有真的改善。

指標一：表單完成率。用 GA4 或你的表單分析工具，看每天「進入表單頁」對比「成功送出」的比例。導入自動儲存前後對比，通常會看到 5% 到 15% 的提升，長表單提升幅度更明顯。

指標二：回訪填單率。如果表單頁的 GA4 事件有記錄「發現暫存資料」，就可以統計有多少比例的訪客是回到頁面繼續填的。這個數字會告訴你：確實有一批客戶原本會流失、現在被你救回來了。

指標三：長文欄位的平均字數。如果表單裡有「需求描述」這種自由填寫欄位，導入自動儲存後客戶願意寫的字數通常會增加。因為他知道「寫再多也不會不見」，就會寫得更詳細——而這對你判斷案件價值、決定要不要投入報價成本，都有很大幫助。

結語：一個週末就能上線的小功能，卻可能是你今年最划算的官網改動

表單自動儲存這件事，技術上真的不難，一個熟悉前端的工程師大概半天到一天就能寫完並上線。但對中小企業來說，它救回來的每一張詢問單，可能就是一個幾萬到幾十萬的案子。

如果你的官網目前有詢問單、報價單、預約表單、活動報名這類需要客戶填寫的功能，強烈建議把「表單自動儲存」列進下一次官網優化的清單裡。它不需要重做整個網站、不需要換技術棧、也不需要額外的伺服器成本——但它會讓你原本流失掉的那些「認真填了一半的客戶」，有更高機會真的把單子送出來。

做官網這件事，很多時候贏在細節，不是贏在花俏。表單自動儲存就是那種「客戶不會注意到你有做、但只要你沒做他就會離開」的隱形防線。這一步做起來，值得。