WordPress 嵌入 Google 表單教學:免外掛搞定
教你把 Google 表單嵌入 WordPress,只要複製 HTML 嵌入碼貼進「自訂 HTML」區塊,三分鐘完成、免寫程式免裝外掛。同時附上 Google 表單與表單外掛的比較、手機版自適應與 SEO 影響的判斷框架,幫你決定該不該用。
作者:褚崇名(Sliven)
本頁目錄
- 先說結論:無外掛嵌入 Google 表單的完整三分鐘流程
- 什麼時候該用 Google Forms,什麼時候該換掉它
- 取得嵌入碼的那個「傳送」按鈕,藏在右上角
- 把 iframe 碼貼進 WordPress 的三條路,與實務上最推薦的那一條
- 方法一:區塊編輯器的「自訂 HTML」區塊(首選)
- 方法二:傳統編輯器(Classic Editor)的文字模式
- 方法三:頁面編輯器(Elementor、Divi)的 HTML 或程式碼小工具
- 嵌入失敗時,先檢查這兩個常見原因
- 用網址參數預先填好表單,一個被低估的技巧
- 手機破版是 Google 表單嵌入的第一號兇手
- 送出表單前,在 Google 表單後台調整這五個設定會少掉一半麻煩
- 嵌入碼背後你看不見的三個代價:速度、個資、通知信
- 代價一:iframe 會拖累頁面速度
- 代價二:資料不在你家,個資合規要自己把關
- 代價三:通知信不是 WordPress 寄的,是 Google 寄的
- 讓「提交」這個動作被 GA4 追蹤到,才算真的在做事
- 關於 Google 表單嵌入,三個最常提醒客戶的誤區
- 從 Google 表單畢業的五個訊號
- 搬家不丟資料:從 Google 試算表搬到 WordPress 的兩條路
- 現在就動手的四步行動方案
其實不少人都遇過這個場景?網站剛上線,客戶忽然傳來一句「能不能幫我加一張週末活動的報名表?」你打開 WordPress 後台,看著幾十款表單外掛,心裡盤算:只是收 30 個人的名字跟電話,有必要為了這一張表,裝一個會在資料庫開十幾張資料表、還要設定 SMTP 才不會被當垃圾信的外掛嗎?
答案是不用。一張 Google 表單,加上 WordPress 內建的「自訂 HTML」區塊,前後不用三分鐘就能上線,完全不碰任何外掛(基礎後台見 WordPress 架站攻略)。在臨時活動頁、MVP 驗證、問卷調查這幾種情境,第一版幾乎都會先用 Google 表單頂著。這篇會把整套流程、手機破版的修法、還有那些「嵌入碼背後看不見的代價」一次講清楚,讓你三分鐘上線、也知道自己什麼時候該換掉它。
先打個預防針:這篇談的是「嵌入 Google 表單」這個動作,不涵蓋「Google 表單本身怎麼設計」。如果你連表單的題目邏輯、分支、題型都還不熟,那建議先花十分鐘把 Google 表單後台摸一遍再回來;下面所有流程都假設你手上已經有一張做完、按一下就能填的表單。底下也會誠實告訴你哪些情境不適合用 Google 表單,不會一味推銷「免費萬歲」,因為把錯的工具用在不對的場景,省下來的錢最後都會用別的形式還回去。
先說結論:無外掛嵌入 Google 表單的完整三分鐘流程
直接給你三分鐘重點,後面章節再拆細節。整個流程只有四個動作。
- 在 Google 表單編輯畫面右上角,點那顆看起來像紙飛機的「傳送」按鈕。
- 在彈出的視窗裡,選最右邊的「<> 嵌入」圖示,視窗會吐出一段
<iframe src="...">碼,連同寬高一起複製下來。 - 回到 WordPress,把任何一篇文章或頁面切換成區塊編輯器,新增一個「自訂 HTML(Custom HTML)」區塊,把 iframe 碼貼進去。
- 按下預覽,確認桌機看得到表單,發佈,收工。
就這樣。沒有外掛要裝、沒有資料庫要搬家、沒有授權要買。但如果你只做到這一步就上線,大概有八成的機率會在手機上破版、或在第三天發現收不到通知信。下面的章節就是拿來處理這兩件事,以及幾件多數教學文不會跟你說的事。
什麼時候該用 Google Forms,什麼時候該換掉它
在直接講操作之前,先把判斷邏輯講清楚,因為「要不要用 Google 表單」這件事,答案不是看個人喜好,是看你要解決的問題。WordPress 之所以能吃下全球超過四成的網站市占(依 W3Techs 2026 年 6 月的統計),很大一部分原因是它的表單生態超級完整,從免費的 Contact Form 7 到付費的 Elementor Pro 表單,選擇多到會讓人選擇障礙。但選擇多不代表你每次都需要走那條路。
底下把判斷標準整理成這張表,是實務上實際會用的版本,你可以直接拿來對照自己的情境。
| 情境 | 該選 Google 表單 | 該選 WordPress 原生表單外掛 |
|---|---|---|
| 活動報名、單次問卷、限時投票 | 是 | 否 |
| 長期聯絡表單、放在網站主選單 | 否 | 是 |
| 需要把資料留在自己伺服器(個資法、醫療、金融) | 否 | 是 |
| 需要寄送自動回覆信、附件、條件邏輯 | 否 | 是 |
| 預算為零、又想兩小時內上線 | 是 | 否 |
| 想要表單跟網站版型完全一致的品牌體驗 | 否 | 是 |
換句話說,Google 表單的最佳定位是「快速、免費、夠用就好」的墊檔工具。當你處在驗證需求、跑短期活動、或只是想收個意見回饋的階段,它是最划算的選擇。可是只要你的表單開始變成網站的核心轉換路徑(例如它是主選單上那顆「聯絡我們」),就會建議你早點畢業,換成 WordPress 原生的表單外掛,原因後面會講。
有一種情境特別適合 Google 表單,就是「你想驗證一個需求、還不確定值不值得蓋一套正式表單」。比方說你想知道來訪的讀者對某個新服務有沒有興趣,與其花一個下午研究表單外掛、設計欄位、調樣式,不如十分鐘做一張 Google 表單嵌進文章結尾,看一週收得到幾張回覆。如果迴響冷清,你什麼都沒損失;如果迴響熱烈,你手上就有了足夠的數據去說服自己(或老闆)投資一套正式表單。這種「先用免費工具跑一趟、再決定要不要正式化」的思維,是相當通用的做事方法,它適用於表單,也適用於很多行銷決策。
取得嵌入碼的那個「傳送」按鈕,藏在右上角
很多人第一次用 Google 表單卡關,不是卡在 WordPress,而是卡在「我到底要去哪裡找嵌入碼」。Google 把它藏在了一個不太直覺的地方,就算用過很多次,偶爾還是會愣個兩秒。所以這一段把路徑寫得很細。
打開你的 Google 表單(forms.google.com),進到編輯畫面。注意,是編輯畫面,不是填寫畫面。在畫面的右上角,你會看到幾顆按鈕,由左到右分別是你的大頭貼、一顆齒輪(設定)、一顆三個點的選單、然後是一顆比較顯眼的藍色按鈕,上面寫著「傳送」。對,就是那顆藍色的。
點下去之後,會跳出一個視窗,視窗頂部有一排圖示列:郵件信封、連結符號、社群分享、然後是最右邊那個長得像左右尖括號 <> 的圖示。那個就是嵌入。點下去之後,視窗下方會出現一段已經幫你包好的 iframe 原始碼,旁邊還有一個可以調整寬度跟高度的欄位,預設是寬 640、高 450。
這裡有個小訣竅。不要管那個預設的寬高數字,直接按右下角的「複製」。為什麼?因為那個固定的寬高數字就是你手機會破版的元兇之一,與其在這裡改數字,不如等一下在 WordPress 那一端用 CSS 一次解決,後面會給你現成的程式碼。
順帶一提,很多初學者會把「嵌入用」的 iframe 碼,跟「直接填寫」的表單連結搞混。在「傳送」視窗裡,連結圖示給你的是一串 forms.gle 或 docs.google.com/forms 的短網址,那是要貼到電子報、社群貼文裡讓人「點下去另開分頁填寫」用的;而最右邊那個 <> 圖示給你的才是嵌入用的 iframe 碼,是要放進 WordPress 讓表單「直接顯示在頁面上」的。兩種用途差很多,貼錯了表單就不會內嵌,只會出現一條可點擊的文字連結,這是新手最常踩的第一個坑。
把 iframe 碼貼進 WordPress 的三條路,與實務上最推薦的那一條
拿到 iframe 碼之後,把它放進 WordPress 有三種常見的做法。三種都會成功顯示,但維護起來的體驗差很多。
方法一:區塊編輯器的「自訂 HTML」區塊(首選)
這是實務上九成情境會用的方法。在 Gutenberg 區塊編輯器裡,按一下加號新增區塊,搜尋「自訂 HTML」或「Custom HTML」,把它加進來,把剛才複製的 iframe 碼整段貼進去。這個區塊的好處是你可以即時預覽,也可以隨時切回程式碼修改。如果你對區塊編輯器還不熟,Gutenberg 區塊編輯器外掛推薦那篇有更完整的背景,這裡就不重複。
方法二:傳統編輯器(Classic Editor)的文字模式
如果你裝的是傳統編輯器,切換到編輯器右上角的「文字」標籤(不是「視覺」),把 iframe 碼貼進去就行。缺點是萬一你不小心切回「視覺」模式,某些版本的傳統編輯器會把 iframe 標籤吃掉,這是它最討厭的地方。
方法三:頁面編輯器(Elementor、Divi)的 HTML 或程式碼小工具
如果你用的是 Elementor 這類頁面編輯器,在左邊的元素面板裡搜尋「HTML」,把「HTML」元素拖拉到畫面上,再把 iframe 碼貼進去。Divi 的對應選項是「Code」模組。這個方法的好處是你可以把表單跟其他設計元素一起排版,壞處是你被綁在那套頁面編輯器裡,哪天換主題就要重來。
三種方法當中,首選是第一種。理由很簡單:自訂 HTML 區塊是 WordPress 核心內建的,不依賴任何外掛、不依賴任何主題,你換主題、換主機、換頁面編輯器,它都還在原來的位置。這符合一直強調的原則,能用核心功能解決的事,就別再疊一層外掛上去。
嵌入失敗時,先檢查這兩個常見原因
有時候你照著上面的流程做,預覽時卻只看到一片空白、或一個「拒絕連線(refused to connect)」的錯誤訊息。這通常不是 Google 表單壞掉,而是兩個常見原因之一,各有對應的解法。
第一個原因是表單的回覆設定被改成「關閉」。這最常發生在你把舊活動的表單複製來改、卻忘記重新打開回覆。在 Google 表單的「回覆」分頁,右上角有一個可以切換「接受回覆/不接受回覆」的開關,如果它是關的,嵌入的 iframe 在某些瀏覽器上會直接顯示空白。解法就是把開關打開,再重新預覽一次。
第二個原因是快取或安全外掛擋下了 iframe。WordPress 的某些安全外掛、快取外掛、或 CDN 會啟用 X-Frame-Options 或 Content-Security-Policy 的 frame-ancestors 限制。雖然這類限制主要影響的是「別人嵌入你」的方向,但少數設定激進的外掛會連「你嵌入別人」的 iframe 一併擋下、或把頁面快取成空白狀態。排查的方法是把那個頁面加入快取白名單、或暫時關掉安全外掛再測一次。如果你用的是 Cloudflare 或類似的 CDN,也可以切換成開發模式繞過快取看看。
排掉這兩個原因之後,嵌入還是失敗的機率就非常低了。真的還是不行,最後一招是把 iframe 的 src 網址直接貼到瀏覽器網址列打開,確認表單本身能正常填寫,把問題範圍先限縮在「表單本身」還是「嵌入這個動作」。
用網址參數預先填好表單,一個被低估的技巧
這是 Google 表單嵌入最被低估、卻最少人教的功能:你可以透過網址參數,把表單的部分欄位預先填好。什麼時候會用到?想像你在一篇活動說明文的最後嵌入報名表,讀者點開表單時,「想參加的場次」這個欄位如果可以自動帶入他正在看的那場,就不用擔心他選錯。或者你在電子報裡為不同分眾放同一張表單,卻希望每個分眾看到的是已經帶好標記的版本,這件事用網址參數就能做到。
操作流程是這樣的。在 Google 表單編輯畫面的右上角選單裡,找到「預先填寫回覆(Get pre-filled link)」,點下去之後,表單會以填寫狀態打開,你把想預設的欄位填一填,按底下的「取得連結」,系統就會吐出一串很長的網址,結尾長得像 ?entry.12345=場次A&entry.67890=台北。這串網址就是帶好預設值的表單連結。
關鍵在於,這個帶參數的連結也能直接放進 iframe 的 src 裡,成為一張「針對特定情境預先填好」的嵌入式表單。換句話說,同一張表單,你可以為十場活動、十個分眾、十個流量來源,分別嵌入十個帶有不同預設值的版本,而背後的資料還是收進同一份試算表,差別只在每筆回覆帶著不同的標記欄位。
這個技巧疊加上後面會談到的 GA4 追蹤,威力就出來了:不同預填連結的表單,各自綁定一個事件、或一個 UTM 參數,你就看得到「哪一篇活動文、哪一封電子報帶來的填寫最多」。本質上來說這就是用免費工具做出媲美付費行銷自動化平台能做到的「分眾追蹤」,而且完全不碰程式碼。
手機破版是 Google 表單嵌入的第一號兇手
表單嵌入成功、桌機看起來也正常,九成的人到這裡就發佈了。然後第二天收到客戶傳來的手機截圖,表單被裁掉一半、下面出現捲軸、整個畫面歪一邊。這不是 Google 表單的 bug,是它預設給你的那段 iframe 碼,寫死了一個固定寬度。
問題的根源在於 iframe 預設是這樣的:<iframe src="..." width="640" height="450" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>。那個 width="640" 就是兇手。手機螢幕可能只有 360 到 414 個像素寬,一個寫死 640 的框放進去,當然會超出畫面。
修法很簡單,用一段 CSS 把 iframe 包起來,強制它跟著容器縮放。這段程式碼是每個專案都能套用的固定寫法,複製貼上即可。
第一步,在 WordPress 後台「外觀 → 自訂 → 附加的 CSS」,貼進這段:
.gf-wrap { position: relative; width: 100%; overflow: hidden; padding-top: 140%; }
.gf-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
padding-top: 140% 那個數字是表單的高度比例,你可以依表單長度微調,問卷類大概 120% 到 140%、長報名表可能要拉到 180%。
第二步,回到你剛才那個自訂 HTML 區塊,在 iframe 外面包一層 div:
<div class="gf-wrap">
<iframe src="你的表單網址" ...>載入中…</iframe>
</div>
就這樣,手機破版的問題解掉。為什麼這一段值得特別強調?因為現在全世界大約六成的網站流量來自手機(依 Statista 的統計),而且 Google 早在 2023 年就宣布行動優先索引(mobile-first indexing)已全面完成(見 Mobile-first indexing is now fully complete 公告)。也就是說,Google 看你網站的時候,優先看的是手機版。一張在手機上破版的表單,等於直接告訴 Google「這個頁面的體驗很差」,這對 SEO 是純扣分。
這裡有個實務上常見、也值得順便提醒你的坑:iframe 的高度。padding-top 的比例寫法可以解決寬度破版,但它對「高度」是用一個固定比例去撐出來的,意味著表單內容如果比那個比例短,下面會留一塊空白;如果比較長,訪客得在 iframe 內捲動,桌機上會看到框框裡有一條捲軸,體驗不太漂亮。Google 表單並沒有提供 postMessage 之類的機制讓外層網頁即時得知它實際的高度,所以業界常見的「自動等高」做法在這裡行不通。實務上的折衷是:依表單實際長度抓一個差不多的高度,寧可稍微多一點留白,也不要讓框內出現捲軸;或者乾脆把表單設計成簡短版,把太長的開放式問答搬到填寫後的後續聯絡裡。
送出表單前,在 Google 表單後台調整這五個設定會少掉一半麻煩
很多人以為嵌入碼貼好、手機不破版,就等於完工。其實 Google 表單後台有幾個設定,預設值不一定符合你想要的效果,建議在嵌入之前一次調整完,免得表單上線之後才發現收了一堆沒有用的欄位、或漏收了關鍵資訊。底下把這五個設定列成一張清單,是每次新建表單時建議走一遍的流程。
- 收集 Email 的方式。在「設定 → 回覆」裡有「收集 Email」的選項,可以選不收集、收集、或限制填答者一次。如果你只需要匿名問卷,務必關掉,否則會逼填答者登入 Google 帳號,轉換率會明顯往下掉。
- 限制每人填一次。同樣在「設定 → 回覆」,打開「限制為 1 次回覆」可以防止同一個人重複灌水,代價是它會強制要求登入 Google 帳號。報名類表單建議開,純問卷類建議關。
- 顯示進度條。在「設定 → 簡報」裡打開「顯示進度條」,長表單特別有用,填答者知道自己離結束還有多遠,放棄率會降一些。
- 調整提交後訊息。預設的「已記錄您的回覆」太冷淡,建議把它改成「收到你的報名,我們會在三個工作天內 Email 聯絡你」之類有下一步的文字,這是最便宜也最常被低估的轉換優化。
- 關閉「查看摘要」與「編輯回覆」。除非你有特別需求,否則這兩個預設開啟的選項會讓填答者在提交後看到所有人的統計摘要、甚至回頭改答案,對報名或敏感表單是風險,建議關掉。
這五個設定調完,同一張嵌入表單帶給填答者的體驗會差很多。它們都是後台點一點就能改的事,不需要動到 WordPress 那一邊。
嵌入碼背後你看不見的三個代價:速度、個資、通知信
免費的東西,通常不是真的免費,只是付錢的人不是你。Google 表單嵌入碼背後有幾個代價,多數教學文不會講,但它們會實實在在影響你的網站表現跟使用者體驗。
代價一:iframe 會拖累頁面速度
每次有人打開你這個頁面,瀏覽器都得額外去跟 Google 的伺服器要一份表單內容,這是一個獨立的 HTTP 請求,會吃掉額外的載入時間。Google 自己在 2020 年 5 月 談頁面體驗(page experience)的文章裡,就把這類第三方嵌入列為可能拖慢 Core Web Vitals 的因素之一。如果你的表單只是頁面上的一小段,影響還有限;但如果整頁幾乎只有這張表,建議搭配延遲載入(lazy-load iframe)的技巧,或乾脆把表單放到一個獨立的子頁面。更系統性的網站速度優化觀念,可以參考速度優化的完整做法。
代價二:資料不在你家,個資合規要自己把關
這一點最值得提醒台灣站長。Google 表單收回來的資料,是存在 Google 試算表、存在 Google 的伺服器,不在你的 WordPress 主機上。如果只是收活動報名,沒什麼問題。但如果你收的是會員資料、訂單、就醫紀錄、金融資訊這類敏感個資,就必須想清楚兩件事:一是台灣的個人資料保護法對蒐集、處理、利用個人資料有明確規範;二是這些資料跨境儲存在境外伺服器,對某些產業(例如醫療、金融、政府標案)是地雷。
原則很簡單:只要資料的性質會讓你在主管機關面前解釋半天,就不要用 Google 表單收,乖乖用 WordPress 原生表單外掛,讓資料留在你自己的主機或你簽過約的雲端。
代價三:通知信不是 WordPress 寄的,是 Google 寄的
這是另一個常見的誤會。很多人以為表單填完之後,通知信會走 WordPress 的寄信系統,於是花一堆時間調 WordPress SMTP 發信設定,結果怎麼調都沒用。原因是 Google 表單的通知信根本不是 WordPress 寄的,是 Google 自己寄到表單擁有者的 Gmail。WordPress 在這整個流程裡,只是一個提供 iframe 容器的房東,它根本不知道有人填了表單。
這會衍伸兩個問題。第一,你只能在被通知的那個 Gmail 收到信,沒辦法像原生表單那樣寄一份副本給業務、給客服。第二,如果表單填寫者希望收到一封「我們已收到您的報名」的自動回覆,Google 表單原生功能做不到,你得再接一套外掛或自動化工具。這兩個限制,常常是客戶用了一個月之後決定換掉 Google 表單的關鍵原因。
兩個限制裡,第二個其實有不算完美的解法。在 Google 表單的「設定 → 回覆」裡有一個「收集 Email」搭配「傳送回覆副本給填答者」的選項,這能解決「讓填寫者收到一份自己填過的內容」這件事。至於「一份回覆同時通知多個內部信箱」,原生功能做不到,但你可以繞兩條路:一是把那一份回應試算表的「共用」打開,給相關同事編輯權限,他們自己進試算表看;二是用 Google 試算表內建的「安裝附加元件」,或寫一小段 Google Apps Script,在每次有新回覆時自動寄信到一組指定的信箱。第二條路比較接近原生表單的多收件者體驗,但維護成本就上來了,通常走到這一步,離換成 WordPress 原生表單也不遠了。
讓「提交」這個動作被 GA4 追蹤到,才算真的在做事
表單上線之後,多數人只關心「有沒有人填」,卻沒想過「到底多少人點了提交又放棄」。如果你想認真把這張表單當成一個轉換路徑在優化,就必須能追蹤「提交成功」這個事件。問題是 Google 表單嵌入在 iframe 裡,iframe 是一個跨網域的沙箱,你的 GA4 沒辦法直接聽到表單裡發生的事。
這個限制是真的,但不是沒有解法。實務上有兩種常見的做法。
第一種是追蹤外層的點擊行為,而不是表單內部的提交事件。你在 GTM 裡設定一個「連結點擊」觸發條件,把條件設成「當訪客點擊的連結網址包含你的 Google 表單連結時」,就觸發一個 GA4 事件。這只能追蹤到「點了連結打開表單」,追蹤不到「真的提交了」。如果你還沒把 GTM 跟 GA4 串起來,WordPress GTM 與 GA4 串接教學那篇可以從零開始跟著做。
第二種做法比較精準,但要多一個步驟:把表單的「提交後顯示頁面」改成另一個感謝頁,再讓 GA4 去追蹤那個感謝頁的瀏覽事件。可惜 Google 表單內建的「提交後顯示訊息」是 JavaScript 動態產生的,不是一個獨立網頁,沒辦法直接套用。要走這條路,你得把表單的連結改成「另開新分頁」填寫,提交後再透過 Google 表單的附加元件或 Apps Script 轉址到一個你自建的感謝頁。
如果你聽到這裡覺得「這也太麻煩了」,恭喜你,這正是 Google 表單的限制開始浮現的訊號。當追蹤需求複雜到一定程度,換成原生表單外掛反而更省事,因為它們幾乎都有現成的事件勾點、或一鍵接 GA4 的設定。
關於 Google 表單嵌入,三個最常提醒客戶的誤區
從實務經驗來看,不管客戶的產業是什麼,碰到 Google 表單嵌入時踩到的雷都差不多。底下整理三個最常見的誤區,在新專案開始時先講清楚,能讓客戶少走一些冤枉路。
第一個誤區是「以為嵌入就等於即時通知」。很多人把表單嵌入、自己測填一次,收到 Gmail 通知就放心了,卻沒注意到那封信只進了表單擁有者一個人的信箱。等到兩週後業務跑來問「為什麼都沒收到詢問」,才發現十幾張報名單全卡在創辦人個人的 Gmail 裡。如果你不是唯一收信的人,務必在嵌入當下就把通知機制想清楚,別假設它會自動廣播。
第二個誤區是「拿 Google 表單當長期的聯絡表單」。臨時活動用 Google 表單很合理,但不少客戶圖方便,連放在主選單的「聯絡我們」都用嵌入式 Google 表單。問題是這張表單的視覺永遠是 Google 的藍色漸層、永遠帶著 Google 的浮水印,對品牌信任是持續性的小失分。更重要的一點,當這張表單變成網站的核心轉換入口,它卻完全不在 WordPress 的掌控裡,你的 GA4 看不到它、你的備份不含它、你的權限系統管不到它,等於把最重要的名單來源外包給一家你無法控制的服務。
第三個誤區是「忽略資料所有權」。Google 表單的免費是有代價的,代價就是資料存在 Google 那一端,你只有使用權、沒有真正的持有權。對多數活動報名、問卷調查來說,這完全沒問題。可是一旦你收的資料涉及會員、訂單、就醫、金融、或是會被稽核的個資,就值得停下來想清楚:萬一哪天 Google 帳號被停權、或政策調整,你手上還有沒有那些資料?這不是嚇人,實務上確實有發生過帳號被誤判停權、差點丟掉一整份活動名單的案例。資料所有權這件事,平時不痛,出事才會痛到骨子裡。
從 Google 表單畢業的五個訊號
既然 Google 表單是墊檔工具,那什麼時候該換掉它?底下列出五個訊號,只要中任何一個,就會建議認真考慮換成 WordPress 原生表單。如果你已經中了兩個以上,那基本上是時候了。
- 通知信的需求變複雜了。你需要同時通知業務跟客服、要寄自動回覆、要夾帶附件,這些 Google 表單都做不到。
- 個資合規開始被問到了。客戶、法務、或主管機關開始追問「資料存在哪裡」、「會不會跨境傳輸」。
- 表單變成網站的核心轉換路徑。它出現在主選單、出現在每一頁的頁尾、是網站的主要詢問入口。
- 你需要條件邏輯或欄位連動。選了 A 才出現 B 欄位、金額自動加總、依選項跳到不同下一步,這些 Google 表單只能做到很初階的版本。
- 品牌一致性變重要了。你希望表單的字體、配色、按鈕跟網站完全一致,而不是一個藍色漸層的 Google 預設樣式。
出現這些訊號的時候,WordPress 表單外掛那一篇有完整的橫評可以幫你挑選。如果網站是用 Elementor 蓋的,直接看Elementor Pro 表單製作教學最省事。若是單純的聯絡表單,Contact Form 7 免費又穩,是預設推薦。
如果你的目標不是「換掉」,而是「讓表單幫我帶來更多詢問」,那重點會落在表單設計跟行動呼籲的搭配,這部分可以參考如何讓網站帶來更多詢問跟CTA 行動呼籲設計指南,觀念是一樣的,無論表單是哪一套。
搬家不丟資料:從 Google 試算表搬到 WordPress 的兩條路
決定畢業之後,最常被問到的下一個問題是「我之前收的那幾百筆資料怎麼辦?」好消息是資料不會不見,它一直乖乖待在 Google 試算表裡,你只是要決定怎麼把它接軌到新的表單系統。實務上有兩條路,看你的資料量跟需求。
第一條路是「新舊並存」。新表單用 WordPress 原生外掛從今天起跑,舊的 Google 試算表當成歷史資料留檔。這條路最簡單,缺點是你的名單會分成兩個來源,後續要撈資料的時候得兩邊都查。如果你的舊資料只是備查、不會持續用到,這條路就夠了。
第二條路是「搬進新的表單系統」。多數主流的 WordPress 表單外掛都提供 CSV 匯入功能,你只要從 Google 試算表「檔案 → 下載 → 逗號分隔值」,把欄位順序跟新表單的欄位對應好,就能把歷史資料倒進新系統。重點在於欄位的對應要一次想清楚,尤其是日期格式、電話號碼的國際碼、下拉選項的文字是不是完全一致,不然匯入後會出現一堆看起來像亂碼的欄位。
不管走哪一條,都建議搬家之前先把那份 Google 試算表下載備份一份到本機。Google 表單可以刪、試算表可以斷連結,但你本機的那份 CSV 永遠跑不掉。資料搬家的第一原則向來都是「先備份、再動手」。
現在就動手的四步行動方案
講了一大堆,最後給你一份可以今天照著做的行動清單。別貪多,先跑完一輪,有問題再回來對照前面的章節。
- 挑一個低風險的頁面試跑。不要一開始就把聯絡頁換成 Google 表單。先挑一個活動報名或一次性問卷頁面,跑完整個嵌入流程,確認桌機跟手機都正常。
- 套上響應式 CSS。把前面那段
.gf-wrap的 CSS 加進佈景主題的附加 CSS,iframe 外面包一層 div,確認在手機上不會再破版。這一步不做,前面做的都白費。 - 測一次完整填寫流程。用自己手機、用隱私瀏覽模式、用同事的手機,各填一次。確認通知信有進到你的 Gmail、確認提交後的訊息看得見、確認沒有奇怪的授權彈窗。
- 設定最基本的追蹤。在 GA4 或 GTM 至少設一個「點擊表單連結」的事件,讓你知道這張表單到底有沒有人理。哪怕數字不完美,也比完全沒追蹤好。
做完這四步,你就有了一張可以正常運作、不破版、可追蹤的嵌入式 Google 表單。它不一定是你網站最終的表單解法,但在「現在就需要、預算為零、兩小時內要上線」這個階段,它是最理性的選擇。
表單上線之後,建議你給自己一個兩週的觀察期,把注意力放在兩個數字上:一是表單實際被填寫的次數,二是看到表單的人數,這兩個數字的比值就是你的表單轉換率。如果發現看的人多、填的人少,問題往往不在表單本身,而在它前後的鋪陳:標題有沒有把價值講清楚、表單上方有沒有一段讓人願意填的動機、欄位是不是多到讓人卻步。這幾個變因的調整成本都很低,但對轉換率的影響常常比換一套表單工具還大。把工具當成手段,把使用者的意願當成核心,這是從實務經驗中一直成立的原則。
如果你後來真的走到了「該換成原生表單」的那一刻,別覺得前面用 Google 表單是浪費時間。它幫你用最低成本驗證了「這張表單有沒有人要填」,這個驗證本身比任何外掛都值錢。等你確定了需求,再回頭把 WordPress 表單外掛一步步建起來,那會是更紮實的一步。需要別人陪你把這套從表單到名單轉換的流程一起想清楚時,Whoops SEO 隨時在這裡,這是選項,不是義務。
還有一件容易被遺忘的小事值得提醒:表單上線之後,每隔一段時間回去 Google 表單後台看一眼回應試算表,把測試時自己填的假資料刪掉、把重複提交或垃圾回覆清掉。一張乾淨的表單,才會給你乾淨的數據;而乾淨的數據,才是你判斷下一步該不該換工具的依據。工具會換、平台會換,唯獨「讓數據說話」這件事值得你一直做下去。
常見問題
Google 表單可以嵌入 WordPress 嗎?
Google 表單嵌入 WordPress 要錢嗎?
為什麼我的 Google 表單嵌入後別人打不開?
Google 表單嵌入會拖慢網站速度嗎?
操作步驟
- 在 Google 表單複製嵌入碼開啟 Google Forms 新增或開啟要嵌入的表單,點上方「傳送」按鈕,切到最右邊的「<>」嵌入圖示,視窗會顯示寬高欄位供調整尺寸(預設固定像素),按下「複製」即可取得一段以 iframe 包起來的 HTML 嵌入碼。
- 在 WordPress 貼上嵌入碼到 WordPress 後台選「頁面 → 新增頁面」,在 Gutenberg 區塊編輯器加入「自訂 HTML」區塊,把剛複製的 iframe 嵌入碼貼進去,按下「發布」或「更新」,回前台重新整理即可確認表單正常顯示且可填寫。