Wie bette ich Google Forms ohne iframe in meine React-App ein?

React-Entwickler, die ein Google-Formular in ihrer App möchten, bekommen vom Einbettungscode von Google ein iframe: eine Seite in der Seite, mit dem Google-Look und eigenem Scrollbalken, die die Styles Ihrer App nicht erreichen. Mit dem Einbettungspaket von Formfacade, @formfacade/embed-react, wird das Formular als Komponente in Ihrer App angezeigt, ohne iframe. Sie bearbeiten die Fragen weiterhin im Formulareditor, eine Frage zu ändern heißt also nicht, Ihren Code zu ändern, und die Antworten werden in Ihrem Google-Formular gesammelt.

Folgen Sie den Schritten unten. Für den letzten brauchen Sie ein Formfacade-Formular, also erstellen Sie Ihr Formular, falls Sie noch keins haben.

Voraussetzungen

  • Node.js auf Ihrem System installiert.
  • Texteditor oder integrierte Entwicklungsumgebung (IDE)

Eine React-App erstellen

Wenn Sie Ihre React-Umgebung noch nicht eingerichtet haben, installieren Sie Node.js und erstellen Sie eine React-App.
Schritt 1: Klicken Sie hier, um Node.js herunterzuladen
Schritt 2: Installieren Sie NPX global, indem Sie den folgenden Befehl in Ihrem Terminal ausführen.
npm install -g npx
Schritt 3: Eine React-App erzeugen
npx create-react-app test-react-app

Formfacade/embed-react installieren

Formfacade/embed-react ist die Einbettungsbibliothek von Formfacade, mit der Sie Google Forms ohne iframe in Ihre React-App einbetten.
Öffnen Sie in Ihrem App-Verzeichnis das Terminal und installieren Sie das Paket Formfacade Embed:
npm install @formfacade/embed-react

Google Forms in eine React-App einbetten

  • Geben Sie Ihrem Formular auf der sich öffnenden Seite einen Namen, klicken Sie auf Embed form und dann auf Proceed.
  • Wählen Sie im Tab Share unter Where do you want to embed this form? die Option Embed in my React.js web app und klicken Sie auf Next.
Der Tab Embed unter Share mit der Frage Where do you want to embed this form?, markiert sind Embed, Embed in my React.js web app und Next
  • Fügen Sie die folgende Import-Anweisung hinzu, um die Formfacade Embed-Komponente in Ihre React-App zu importieren: import FormfacadeEmbed from "@formfacade/embed-react";
  • Fügen Sie den Formfacade Embed-Code in Ihre React-App ein: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Kopieren Sie diesen Code aus dem Embed-Tab, denn dort steht die URL Ihres Formulars anstelle der Punkte.
Der Tab Embed mit dem npm-install-Befehl und dem Code für Ihre React-App
Ihr Formular erscheint in Ihrer React-App ohne iframe.

Zusammenfassung

Wenn Sie ein Google-Formular mit dem Code von Google in React einbetten, bekommen Sie ein iframe mit eigenem Look und Scrollbalken. Mit Formfacade installieren Sie @formfacade/embed-react und fügen den Formfacade Embed-Code in Ihre React-App ein. Erstellen Sie Ihr Formular und führen Sie die Schritte oben aus. Wenn Sie Fragen haben, schreiben Sie dem Support.

Zuletzt aktualisiert: