嵌入 Google Forms 的 3 種方式

Boobesh Ramalingam
Guesswork.co 共同創辦人。
"把含有檔案上傳問題的 Google Forms 表單嵌入網站"- Google Docs Editors Community

Google 不會為含有檔案上傳問題的表單提供嵌入程式碼，Google 論壇上已有 305 人詢問解決辦法。這是 Google Forms 觸及填答者的三種方式的限制之一：網站用的嵌入程式碼、電子郵件和連結。每種方式都保留 Google 的外觀，嵌入的表單待在固定的 iframe 中，而且沒有一種能從您的頁面預先填寫答案。使用 Formfacade，您可以不透過 iframe 嵌入表單，連檔案上傳問題也包含在內，回應仍會送到 Google Forms 和 Google Sheets。

以下是 Google Forms 提供的三種方式、各自的不足之處，以及加碼段落中使用 Formfacade 的第四種方式。

每種方式適合不同的目標，您可以挑選最符合需求的選項。把表單嵌入網站，讓訪客容易聯絡您；把連結貼到社群媒體，讓問卷觸及更多人；或用電子郵件寄送連結，向現有客戶收集意見。

開始之前

無論您選擇哪種方式，都有兩個關鍵步驟，確保使用者真的能開啟表單，而且對的人能夠回應。
發布您的表單。表單必須先發布，其他人才能存取。在 Google Forms 開啟您的表單，點選右上角的 Publish。發布設定頁面會出現，Responders 預設為「Anyone with the link」。點選 Publish 確認。發布後，右上角會顯示「Published」，您隨時可以點選 Published 來變更這些選項。
管理存取權。如果您需要與預設不同的存取權，例如只限團隊參與的內部問卷，請點選 Published 開啟發布選項頁面，再點選 Manage 設定存取權。在 General access 下，您可以將表單開放給任何知道連結的人，或限制為特定人員、您的機構或目標對象。如果是網站上的公開表單，請選擇 anyone with the link，訪客才不會被要求登入。

方法 1：如何將 Google Forms 表單嵌入您的網站？

您可以將表單直接嵌入頁面，讓訪客不必離開您的網站就能填寫。
  1. 在 Google Forms 開啟您的表單，點選右上角的 More 選單（三個點的圖示）。
  2. 選擇 <> Embed HTML。
  3. 視需要調整寬度和高度，然後點選 Copy。將 iframe 嵌入程式碼貼到您要顯示表單的頁面。
顯示 iframe 程式碼、Width 640 和 Height 384 的 Embed HTML 對話方塊，標示了 Copy
當您想在自己的頁面收集回應時，嵌入網站就很有用，例如專屬頁面上的聯絡表單、部落格文章結尾的活動報名，或說明中心裡的意見回饋表單。它省去了把人送到另一個表單頁面的額外點擊，減少阻力，通常也能提高完成率。

限制

  • 較長的多頁表單會在 iframe 內捲動。iframe 是固定大小，因此長表單會在自己的框內捲動，而不會隨頁面延展。
  • 不適合行動裝置，也不是響應式。表單不會配合螢幕大小調整，在手機上可能被截斷或顯得擁擠。
  • 檔案上傳問題會阻擋嵌入。含有檔案上傳問題的表單無法嵌入，您會看到「This form cannot be embedded because it makes use of File Upload fields.」
  • 顯示 Google 品牌與條款。「Google Forms」頁尾和條款會留在表單上，使用原生嵌入無法移除。
  • 使用者分析無法運作。由於表單在跨來源 iframe 中載入，Hotjar 或 FullStory 等工作階段錄影和分析工具無法看到其中內容，因此您無法追蹤行為，也無法找出表單內的流失點。
  • 無法預先填寫答案。由於頁面無法存取跨來源 iframe，您無法從網址查詢字串自動預先填寫嵌入的表單，也無法用 JavaScript 動態傳入值。

方法 2：如何將 Google Forms 表單嵌入電子郵件？

您可以透過電子郵件分享表單，讓收件人直接在收件匣中或一鍵回應。
  1. 在 Google Forms 開啟您的表單，點選右上角的 Share 圖示。
  2. 輸入填答者的名稱或電子郵件地址。
  3. 啟用 Notify people 選項。
  4. 視需要加上訊息，然後點選 Send。
當您已經有收件人清單並想直接觸及他們時，電子郵件最合適，例如內部團隊問卷、寄給受邀賓客的活動出席回覆，或寄給現有客戶的後續問卷。

限制

  • 嵌入的表單只有在 Gmail 中能穩定顯示。在 Outlook、Apple Mail 和其他郵件程式中，收件人通常只會收到開啟表單的連結，而不是信中的欄位。
  • 某些問題類型會阻止嵌入。如果表單含有檔案上傳問題、評分問題、問題或選項中的圖片，或是受保護的測驗，就不會嵌入電子郵件中。
  • 多頁表單只會嵌入第一頁。收件人會在郵件內文看到第一個區段，其餘部分必須在瀏覽器中繼續填寫。
  • 收集電子郵件地址會使信中提交失效。如果開啟「Collect email addresses」，回應就無法從收件匣提交。答案會以部分回應的形式帶過去，填答者會被送到 Google Forms 完成填寫，而且已驗證的電子郵件收集可能完全失敗。

方法 3：如何分享 Google Forms 表單連結？

連結是分享表單最快的方式。您可以複製表單連結，貼到任何能貼上文字的地方，例如聊天、電子郵件或社群媒體。
  1. 在 Google Forms 開啟您的表單，點選右上角的 Link 圖示。
  2. 在「Copy responder link」下，啟用 Shorten URL 取得較短的連結，然後點選 Copy。
  3. 您也可以從 Share 或 Preview 複製連結。
連結在以下幾種情況很有用：
  • 發布到社群媒體。把連結放進任何平台的貼文，觸及更多人。
  • 從您自己的電子郵件寄送。Google 內建的「Share via email」選項一律從 drive-shares-noreply@google.com 寄出，而且無法變更這個寄件地址。如果您想從自己的 Google 帳戶或電子郵件服務寄送，請把連結以超連結貼進您自己的訊息，這樣郵件就會由您寄出。
  • 在您的網站放上連結。如果您不想把表單嵌入頁面中，可以在網站加上連結，讓訪客在表單專屬的頁面開啟它。

限制

  • 是 Google 品牌的頁面，不是您的。連結會開啟 Google 網域上由 Google 代管的頁面，所以填答者會離開您的網站，前往一個看起來不像您品牌的地方。這在蒐集潛在客戶時會降低信任感，您也會失去頁面的上下文。
  • 無法掌控體驗。一旦有人點了連結，就會來到 Google 代管的頁面，沒有相關內容、沒有回到您網站的導覽，也沒有下一步，表單成了死路，而不是整個流程的一部分。
  • 連結預覽千篇一律。貼到社群媒體或聊天時，連結展開的是 Google Forms 自己的預覽圖片和您表單的說明，而不是您的品牌，在公開貼文中看起來不夠精緻。
  • 無法自訂連結。您無法設定品牌或自訂網址，所以這個連結，即使是縮短後的 forms.gle 版本，也無法憑記憶輸入。

加碼：如何不透過 iframe 嵌入 Google Forms 表單？

您可以使用 Formfacade 嵌入表單，讓它符合您網站的主題，沒有 iframe，也沒有 Google 品牌標示。
  • 在開啟的頁面中為表單命名，點選 Embed form，再點選 Proceed。
  • 在 Share 分頁的 Where do you want to embed this form? 下，選擇您的網站平台並點選 Next。
Share 下的 Embed 分頁詢問 Where do you want to embed this form?，標示了 Embed、My website is different from above 和 Next
  • 依照提示嵌入表單。大多數網站只要複製嵌入程式碼，貼到您的網頁即可。
Share 下的 Embed 分頁在方框中顯示嵌入程式碼，標示了程式碼
這個方法解決了原生 iframe 造成的問題。它在手機上是響應式的，並移除 Google 品牌標示，讓表單感覺就是您品牌的一部分。

為什麼選擇 Formfacade

Formfacade 解決了原生 iframe 造成的問題，並加入 Google Forms 本身沒有的功能：
  • 符合您的網站主題。表單會沿用您網站的字型、顏色和版面，呈現專業、響應式的外觀，且沒有 Google 品牌標示。
  • 適用所有主流網站建置工具。可嵌入 WordPress、Squarespace、Shopify、Google Sites、Wix、Webflow 等。
  • 保留您的 Google Workspace 工作流程。回應仍會送進 Google Forms，並可自動同步到 Google Sheets，您管理回應的方式完全不變。
  • 預先填寫答案。從網址查詢字串自動預先填寫嵌入的表單，或用 JavaScript 動態傳入值。
  • 啟用使用者分析。由於表單沒有被鎖在跨來源 iframe 中，您可以用 Hotjar 或 FullStory 等工作階段錄製工具追蹤行為並找出流失點。
  • 支援檔案上傳。與原生嵌入不同，Formfacade 讓您嵌入含有檔案上傳問題的表單（每個檔案最多 10 MB）。更大的檔案以及將上傳檔案同步到 Google Drive，需使用更高階的付費方案。
  • 不只用於網站。您也可以將表單嵌入行動應用程式，並可透過 ReactJS、React Native 和 JavaScript 整合進行客製開發。

限制

  • 部分平台只允許 iframe 嵌入。Google Sites 和 Wix 不支援以指令碼嵌入，所以即使使用 Formfacade，表單在這些平台上仍會以 iframe 加入。
  • 免費與較低方案會有 Formfacade 品牌標示。免費方案會移除 Google 的品牌標示，但會加上一個小小的 Formfacade 署名。要移除它以及取得更高的回應量，需要付費方案，請依您表單的需求查看目前的價格。

比較

快速比較 Google Forms 原生 iframe 嵌入與 Formfacade。
Google Forms 嵌入Formfacade 嵌入
配合網站主題否是
行動裝置響應式否是
檔案上傳問題不支援支援
預先填寫答案否是，透過網址或 JS
使用工作階段錄影工具分析否是
支援行動應用程式與 React否是
回應存入 Google Forms / Sheets是是
價格免費需要訂閱
嵌入 Google Forms 表單的最佳方式取決於您的目標。想在自己的頁面收集回應，就嵌入網站；想直接觸及已知名單，就用電子郵件寄送表單；想最廣、最快地散布，就分享連結。如果您希望表單看起來像網站的一部分，而不是 Google 的 iframe，用 Formfacade 嵌入就能得到原生、符合品牌、適合行動裝置的結果。請依填答者所在的地方，以及您需要表單看起來多精緻，選擇合適的方式。

常見問題

可以自訂嵌入的 Google Forms 表單外觀嗎？
不行。原生嵌入會保留 Google 的字型、顏色和版面。要讓表單符合您網站的設計，請用 Formfacade 嵌入，它不透過 iframe 呈現表單，所以會沿用您的主題。
可以嵌入含有檔案上傳問題的表單嗎？
不行。原生嵌入會擋下它，並顯示「This form cannot be embedded because it makes use of File Upload fields.」您必須刪除該問題，或改用 Formfacade，它在嵌入的表單中也支援檔案上傳。
為什麼我嵌入的表單會要求大家登入？
當表單會收集電子郵件地址、限制每人只能回應一次、將存取權限制在機構內，或含有檔案上傳問題時，就需要登入。如果您希望填答者不必登入就能回應，請將存取權設為「anyone with the link」並移除這些設定。
可以預先填寫嵌入的 Google Forms 表單嗎？
不行。由於您的頁面無法把值傳進跨來源 iframe，原生 iframe 無法動態預先填寫答案。Formfacade 可以從網址查詢字串或用 JavaScript 預先填寫嵌入的表單。
為什麼我嵌入的 Google Forms 表單會被截斷或出現捲動？
原生 iframe 的大小固定，所以較長的表單會在方框內捲動。請將 iframe 寬度設為 100% 並增加高度，或用 Formfacade 不透過 iframe 嵌入，讓表單自動配合您的頁面調整大小。
嵌入 Google Forms 表單是免費的嗎？
是的。原生的網站、電子郵件和連結方式都是免費的。透過 Formfacade 不用 iframe 嵌入有免費方案，另有付費方案可移除品牌標示並提高回應上限。

摘要

表單要讓人找得到才有用，而 Google 的嵌入、電子郵件和連結都保留 Google 的外觀，嵌入還不接受檔案上傳問題。使用 Formfacade，您可以不透過 iframe 嵌入表單，而且能包含檔案上傳和預先填寫的答案。建立您的表單並完成加碼段落中的步驟。如有任何問題，請寫信給支援團隊。

最後更新：