如何在 React 應用程式中不用 iframe 嵌入 Google Forms？

想在應用程式中放入 Google Forms 表單的 React 開發者，從 Google 的嵌入程式碼拿到的是 iframe：頁面中的頁面，帶著 Google 的外觀和自己的捲軸，您應用程式的樣式碰不到它。使用 Formfacade 的嵌入套件 @formfacade/embed-react，表單會以元件的形式在您的應用程式中呈現，不透過 iframe。您繼續在表單編輯器中編輯問題，所以修改問題不代表要修改程式碼，回應也會收集在您的 Google Forms 表單中。

請依照以下步驟操作。最後一步需要一個 Formfacade 表單，如果您還沒有，請先建立您的表單。

事前準備

  • 系統已安裝 Node.js。
  • 文字編輯器或整合開發環境（IDE）

建立 React 應用程式

如果您還沒設定 React 環境，請安裝 node.js 並建立 React 應用程式。
步驟 1：按這裡下載 node.js
步驟 2：在終端機執行下列指令，全域安裝 NPX。
npm install -g npx
步驟 3：產生 React 應用程式
npx create-react-app test-react-app

安裝 Formfacade/embed-react

Formfacade/embed-react 是 Formfacade 的嵌入函式庫，可不透過 iframe 將 Google Forms 表單嵌入您的 React 應用程式。
在您的應用程式目錄中開啟終端機，安裝 Formfacade Embed 套件：
npm install @formfacade/embed-react

將 Google Forms 表單嵌入 React 應用程式

  • 在開啟的頁面中為表單命名，點選 Embed form，再點選 Proceed。
  • 在 Share 分頁的 Where do you want to embed this form? 下，選擇 Embed in my React.js web app 並點選 Next。
Share 下的 Embed 分頁，詢問 Where do you want to embed this form?，標示出 Embed、Embed in my React.js web app 和 Next
  • 加入下面的 import 陳述式，將 Formfacade Embed 元件匯入您的 React 應用程式：import FormfacadeEmbed from "@formfacade/embed-react";
  • 在您的 React 應用程式中加入 Formfacade Embed 程式碼：<FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • 請從 Embed 分頁複製這段程式碼，因為裡面以您表單的網址取代了這些點。
Embed 分頁，顯示 npm install 指令和要加入 React 應用程式的程式碼
您的表單會顯示在 React 應用程式中，不透過 iframe。

摘要

如果您用 Google 的程式碼將 Google Forms 表單嵌入 React，得到的是有自己外觀和捲軸的 iframe。使用 Formfacade，您安裝 @formfacade/embed-react，然後在 React 應用程式中加入 Formfacade Embed 程式碼。建立您的表單並完成上面的步驟。如有任何問題，請寫信給支援團隊。

最後更新：