Wie betten Sie Google Forms ohne iframe in React oder Next.js ein und passen es an?

Entwickler, die mit React oder Next.js bauen und ihre Formulare in Google Forms haben, stoßen auf dieselbe Wand: Der Einbettungscode von Google ist ein iframe von docs.google.com, also erreichen Ihr CSS und Ihr Dark Mode das Formular nie. Customize theme hört bei einem Header-Bild, einer kurzen Schriftliste und zwei Farben auf und die Google Forms API hat überhaupt keine Gestaltung. Mit Formfacade wird das Formular als natives HTML aus einem npm-Paket dargestellt, sodass Sie es wie den Rest Ihres Produkts gestalten, Dark Mode inklusive. Die Antworten werden weiterhin in Ihrem Google-Formular gesammelt und Ihr Team arbeitet weiter mit Google Forms und Google Sheets.

Hier sind die zwei echten Wege, ein Google-Formular in einer React- oder Next.js-App zu gestalten und wo jeder an seine Grenzen stößt.

Die Standard-Einbettung von Google Forms ist ein iframe von docs.google.com, Ihr Stylesheet erreicht das Formular also nie und es sieht immer nach Google aus, nicht nach Ihrem Produkt. Diese Anleitung erklärt, warum es diese Einschränkung gibt, vergleicht die echten Optionen und zeigt dann, wie Sie Ihr Google-Formular mit Formfacade anpassen und ohne iframe in React oder Next.js einbetten, inklusive Dark Mode.

Warum Sie ein eingebettetes Google-Formular nicht mit CSS gestalten können

Wenn Sie den Einbettungscode aus Google Forms einfügen, erhalten Sie ein iframe, das das Formular von docs.google.com lädt. Browser setzen Cross-Origin-Beschränkungen durch: Das CSS und JavaScript Ihrer Seite kann nicht in einen Frame hineinreichen, der von einer anderen Domain kommt. Ihre Klasse .dark-mode und Ihr Font-Stack enden an der Grenze des iframes.
Google gibt Ihnen ein Gestaltungswerkzeug, den Theme-Editor. Öffnen Sie Ihr Formular und klicken Sie auf Customize theme, um ein Header-Bild, den Textstil für Überschriften und Fragen, eine Theme-Farbe und eine Hintergrundfarbe festzulegen.
Was er nicht kann:
  • Die Schriften Ihrer Website übernehmen (Sie wählen aus Googles kurzer Liste)
  • Das Kartenlayout, die lila Fokus-Akzente oder die Google-Forms-Fußzeile entfernen
  • Dem Dark Mode Ihrer App folgen
  • Das Formular in voller Breite und responsiv in Ihr Layout einfügen
Die Google Forms API hilft auch nicht. Sie liest die Formularstruktur und Metadaten von Antworten, hat aber überhaupt keine Endpunkte für die Gestaltung.

Optionen, um Google Forms in einer React- oder Next.js-App anzupassen

Es gibt zwei echte Wege dafür. Der erste ist kostenlos und nativ, der zweite ist Formfacade.

Option 1: Natives iframe plus Theme-Editor

Nutzen Sie Customize theme, um die Farben anzunähern, und betten Sie dann das iframe in Ihre Komponente ein.
Vorteile:
  • Kostenlos und offiziell, nichts zusätzlich zu pflegen
  • Funktioniert überall, wo ein iframe funktioniert
Nachteile:
  • Die Gestaltung endet bei Farben und Header-Bild; Schriften, Abstände und Layout bleiben die von Google
  • iframe mit fester Höhe, lange Formulare scrollen in ihrem eigenen Kasten
  • Kein Dark Mode passend zu Ihrer App

Option 2: So passen Sie Ihr Google-Formular mit Formfacade an

Formfacade liest Ihre Formularfelder aus und lässt Sie sie in einem visuellen Editor neu gestalten.
  • Geben Sie Ihrem Formular auf der Seite, die sich öffnet, einen Namen, klicken Sie auf Embed form und dann auf Proceed.
  • Klicken Sie auf den Tab "Preview", um das dargestellte Formular zu sehen.
  • Wählen Sie den Stil Minimal oder Colorful und ein Theme wie Persian indigo.
  • Passen Sie Primärfarbe, Hintergrund und Typografie an Ihre App an.
  • Das ist nur eine Vorschau. Das Design bleibt nur erhalten, wenn Sie auf "Apply to all forms" klicken, was jedes live geschaltete Formular in Ihrem Konto neu gestaltet, lassen Sie es also weg, wenn Sie andere live geschaltete Formulare haben. Die Einbettung funktioniert auch ohne.
Der Tab Theme in Preview mit den Einstellungen Primary color, Background und Typography, markiert sind die Farbfelder

So betten Sie das angepasste Formular in React oder Next.js ein

Die Einbettung ist eine React-Komponente, kein iframe, sie übernimmt also Ihr Seitenlayout und bleibt responsiv.
  • Klicken Sie auf den Tab "Share"
  • Klicken Sie auf Embed
Die Tabs Edit, Preview, Share und Responses, markiert ist Share
  • Klicken Sie auf "Embed in my React.js web app" und dann 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
  • Kopieren Sie den npm-install-Befehl und das Snippet der React-Komponente.
  • Führen Sie npm install @formfacade/embed-react in Ihrem Projekt aus.
  • Ersetzen Sie Ihren iframe-Block durch die Einbettungskomponente von Formfacade. Der Code enthält bereits die URL Ihres Formulars.
Der Tab Embed mit dem npm-install-Befehl und dem Code für Ihre React-App
Ihr Formular erscheint in Ihrer React- oder Next.js-App ohne iframe.

Wo sich dieses Setup bewährt

Dieser Ansatz passt überall, wo ein sichtbares Google-iframe fehl am Platz wirken würde: eine Wartelisten-Anmeldung auf einer Marketing-Website oder ein Feedback- und Kontaktformular in einer Next.js-App. Sie behalten Google Forms als Backend, das Ihr Team schon kennt, während Besucher ein Formular sehen, das zu Ihrem Design passt, inklusive Dark Mode.

Häufige Fragen

Funktioniert Dark Mode mit dem eingebetteten Formular?
Ja. Legen Sie Ihre eigenen Hintergrund- und Primärfarben im Tab Theme in Formfacade fest. Da das Formular als natives HTML statt als iframe dargestellt wird, sitzt es in Ihrem dunklen Layout ohne weiße Google-Karte.
Gehen die Antworten weiterhin an Google Sheets?
Ja, wenn Submit to Google Forms unter Responses eingeschaltet ist. Formfacade sendet an Ihr Google-Formular, sodass die Antworten im Antwort-Tab des Formulars und im verknüpften Google Sheet erscheinen, genau wie vorher.
Funktioniert es mit dem Next.js App Router und serverseitigem Rendering?
Ja. Die Komponente @formfacade/embed-react läuft im Browser, fügen Sie im App Router also die Direktive "use client" oben in die Datei ein, die sie darstellt. Der Rest Ihrer Seite kann serverseitig gerendert bleiben.
Kann ich nicht einfach CSS auf die normale Google-Forms-Einbettung anwenden?
Nein. Die normale Einbettung ist ein iframe von docs.google.com und Cross-Origin-Beschränkungen hindern Ihr CSS daran, hineinzureichen. Die einzige native Gestaltung ist der Editor Customize theme, der Farben, Header-Bild und eine begrenzte Schriftliste abdeckt.

Zusammenfassung

Wenn Sie ein Google-Formular mit dem Code von Google in React oder Next.js einbetten, blockiert das iframe Ihr CSS und das Formular sieht immer nach Google aus. Mit Formfacade gestalten Sie das Formular im Tab Preview und betten es mit einem npm-Paket ein, ganz ohne iframe. Erstellen Sie Ihr Formular und folgen Sie den Schritten oben. Wenn Sie Fragen haben, schreiben Sie unserem Support.

Zuletzt aktualisiert: