如何不用 iframe，在 React 或 Next.js 中嵌入並自訂 Google Forms？
用 React 或 Next.js 開發、並把表單放在 Google Forms 的開發者，都會撞上同一堵牆：Google 的嵌入程式碼是來自 docs.google.com 的 iframe，所以您的 CSS 和深色模式永遠碰不到表單。Customize theme 只能改頁首圖片、一份簡短的字型清單和 2 種顏色，而 Google Forms API 完全沒有樣式功能。使用 Formfacade，表單會從 npm 套件以原生 HTML 呈現，所以您可以像產品的其他部分一樣為它套用主題，包括深色模式。回應仍然收集在您的 Google Forms 表單中，您的團隊也繼續在 Google Forms 和 Google Sheets 中工作。
以下介紹在 React 或 Next.js 應用程式中為 Google Forms 表單設定樣式的 2 種實際可行的方法，以及各自的不足之處。
Google Forms 預設的嵌入方式是從 docs.google.com 提供的 iframe，所以您的樣式表永遠碰不到表單，表單看起來總是像 Google，而不像您的產品。本指南會說明這個限制為什麼存在，比較實際可行的選項，再示範如何用 Formfacade 自訂您的 Google Forms 表單，並在不使用 iframe 的情況下嵌入 React 或 Next.js，包括深色模式。
為什麼無法用 CSS 設定嵌入的 Google Forms 表單樣式
當您貼上 Google Forms 的嵌入程式碼時，得到的是一個從 docs.google.com 載入表單的 iframe。瀏覽器會強制執行跨來源限制：您頁面的 CSS 和 JavaScript 無法進入從其他網域提供的框架。您的 .dark-mode 類別和字型設定都會停在 iframe 的邊界。
Google 只給您一個樣式工具，就是主題編輯器。開啟表單並點選 Customize theme，即可設定頁首圖片、標題和問題的文字樣式、主題色和背景色。
它做不到的事：
- 配合您網站的字型(只能從 Google 的簡短清單中選)
- 移除卡片版面、紫色的焦點強調色或 Google Forms 頁尾
- 跟隨您應用程式的深色模式
- 讓表單在您的版面中全寬並具響應式
Google Forms API 也幫不上忙。它能讀取表單結構和回應的中繼資料，但完全沒有樣式設定的端點。
在 React 或 Next.js 應用程式中自訂 Google Forms 的選項
實際可行的方法有 2 種。第 1 種是免費的原生功能，第 2 種是 Formfacade。
選項 1：原生 iframe 加上主題編輯器
用 Customize theme 把顏色調到接近，再把 iframe 嵌入您的元件。
優點：
- 免費又是官方功能，不需要額外維護
- 只要能用 iframe 的地方都能用
缺點：
- 樣式只能改到顏色和頁首圖片；字型、間距和版面都還是 Google 的
- iframe 高度固定，長表單會在自己的框框裡捲動
- 無法與您應用程式的深色模式同步
選項 2：如何用 Formfacade 自訂您的 Google Forms 表單
Formfacade 會擷取您的表單欄位，讓您在視覺化編輯器中重新設計樣式。
- 在開啟的頁面中為表單命名，點選 Embed form，再點選 Proceed。
- 點選「Preview」分頁，查看呈現出來的表單。
- 選擇 Minimal 或 Colorful 樣式，再選一個主題，例如 Persian indigo。
- 調整主色、背景和字體排版，讓它符合您的應用程式。
- 這只是預覽。只有在您點選「Apply to all forms」時才會保留設計，而這會重新設計您帳戶中所有上線中的表單，所以如果您有其他上線中的表單，請不要點選。沒有它，嵌入也能正常運作。
如何將自訂好的表單嵌入 React 或 Next.js
嵌入的是 React 元件而不是 iframe，所以它會沿用您的頁面版面，並保持響應式。
- 點選「Share」分頁
- 點選 Embed
- 點選「Embed in my React.js web app」，再點選 Next。
- 複製 npm install 指令和 React 元件程式碼片段。
- 在您的專案中執行 npm install @formfacade/embed-react。
- 把您的 iframe 區塊換成 Formfacade 嵌入元件。程式碼中已經有您表單的 URL。
您的表單會在不使用 iframe 的情況下顯示在 React 或 Next.js 應用程式中。
這種做法適合的情境
這種做法適合任何讓 Google iframe 看起來格格不入的地方：行銷網站上的候補名單登記，或 Next.js 應用程式中的意見回饋和聯絡表單。您的團隊繼續使用熟悉的 Google Forms 當後端，訪客看到的則是符合您設計的表單，包括深色模式。
常見問題
嵌入的表單支援深色模式嗎？
支援。在 Formfacade 的 Theme 分頁設定您自己的背景色和主色。因為表單是以原生 HTML 呈現而不是 iframe，它會融入您的深色版面，不會出現白色的 Google 卡片。
回應還是會送到 Google Sheets 嗎？
會，只要在 Responses 下開啟 Submit to Google Forms。Formfacade 會提交到您的 Google Forms 表單，所以回應會和以前一樣出現在表單的回應分頁和連結的 Google Sheet 中。
它可以搭配 Next.js App Router 和伺服器端渲染使用嗎？
可以。@formfacade/embed-react 元件在瀏覽器中執行，所以在 App Router 中，請在渲染它的檔案最上方加入 "use client" 指令。頁面的其他部分可以維持伺服器端渲染。
我不能直接在標準的 Google Forms 嵌入上使用 CSS 嗎？
不行。標準嵌入是來自 docs.google.com 的 iframe，跨來源限制會讓您的 CSS 進不去。唯一的原生樣式設定是 Customize theme 編輯器，只涵蓋顏色、頁首圖片和有限的字型清單。
摘要
最後更新：