Hoe sluit je Google Forms zonder iframe in en pas je het aan in React of Next.js?

Developers die in React of Next.js bouwen en hun formulieren in Google Forms hebben, lopen tegen dezelfde muur aan: de insluitcode van Google is een iframe van docs.google.com, dus je CSS en je dark mode bereiken het formulier nooit. Customize theme stopt bij een headerafbeelding, een korte lijst lettertypen en twee kleuren en de Google Forms API heeft helemaal geen opmaak. Met Formfacade wordt het formulier als native HTML getoond vanuit een npm-pakket, zodat je het opmaakt zoals de rest van je product, dark mode inbegrepen. De antwoorden worden nog steeds in je Google-formulier verzameld en je team blijft werken vanuit Google Forms en Google Sheets.

Hieronder staan de twee echte manieren om een Google-formulier op te maken in een React- of Next.js-app en waar elke manier tekortschiet.

De standaard insluiting van Google Forms is een iframe van docs.google.com, dus je stylesheet bereikt het formulier nooit en het ziet er altijd uit als Google, niet als jouw product. Deze gids legt uit waarom die beperking bestaat, vergelijkt de echte opties en laat dan zien hoe je je Google-formulier aanpast met Formfacade en zonder iframe insluit in React of Next.js, inclusief dark mode.

Waarom je een ingesloten Google-formulier niet met CSS kunt opmaken

Als je de insluitcode uit Google Forms plakt, krijg je een iframe dat het formulier laadt van docs.google.com. Browsers handhaven cross-origin-beperkingen: de CSS en JavaScript van je pagina kunnen niet in een frame komen dat van een ander domein komt. Je class .dark-mode en je font stack stoppen bij de grens van het iframe.
Google geeft je één opmaaktool, de thema-editor. Open je formulier en klik op Customize theme om een headerafbeelding, de tekststijl voor koppen en vragen, een themakleur en een achtergrondkleur in te stellen.
Wat hij niet kan:
  • De lettertypen van je site overnemen (je kiest uit de korte lijst van Google)
  • De kaartlay-out, de paarse focusaccenten of de footer van Google Forms weghalen
  • De dark mode van je app volgen
  • Het formulier volle breedte en responsive maken binnen je lay-out
De Google Forms API helpt ook niet. Die leest de structuur van het formulier en metadata van antwoorden, maar heeft helemaal geen endpoints voor opmaak.

Opties om Google Forms aan te passen in een React- of Next.js-app

Er zijn twee echte manieren om dit te doen. De eerste is gratis en native, de tweede is Formfacade.

Optie 1: Native iframe plus de thema-editor

Gebruik Customize theme om de kleuren in de buurt te krijgen en sluit daarna het iframe in je component in.
Voordelen:
  • Gratis en officieel, niets extra om bij te houden
  • Werkt overal waar een iframe werkt
Nadelen:
  • Opmaak stopt bij kleuren en headerafbeelding; lettertypen, witruimte en lay-out blijven van Google
  • Iframe met vaste hoogte, lange formulieren scrollen in hun eigen vak
  • Geen dark mode die meegaat met je app

Optie 2: Zo pas je je Google-formulier aan met Formfacade

Formfacade haalt je formuliervelden op en laat je ze opnieuw opmaken in een visuele editor.
  • Geef je formulier een naam op de pagina die opent, klik op Embed form en klik op Proceed.
  • Klik op het tabblad "Preview" om het getoonde formulier te zien.
  • Kies de stijl Minimal of Colorful en kies een thema zoals Persian indigo.
  • Pas de primaire kleur, de achtergrond en de typografie aan je app aan.
  • Dit is alleen een voorbeeld. Het ontwerp blijft alleen bewaard als je op "Apply to all forms" klikt en dat geeft elk live formulier in je account een nieuwe opmaak. Laat het dus staan als je andere live formulieren hebt. De insluiting werkt ook zonder.
Het tabblad Theme in Preview met de instellingen Primary color, Background en Typography, met de kleurvakjes gemarkeerd

Zo sluit je het aangepaste formulier in React of Next.js in

De insluiting is een React-component, geen iframe, dus het neemt je paginalay-out over en blijft responsive.
  • Klik op het tabblad "Share"
  • Klik op Embed
De tabbladen Edit, Preview, Share en Responses, met Share gemarkeerd
  • Klik op "Embed in my React.js web app" en klik op Next.
Het tabblad Embed onder Share met de vraag Where do you want to embed this form?, met Embed, Embed in my React.js web app en Next gemarkeerd
  • Kopieer het npm install-commando en het snippet van de React-component.
  • Voer npm install @formfacade/embed-react uit in je project.
  • Vervang je iframe-blok door de insluitcomponent van Formfacade. De code bevat al de URL van je formulier.
Het tabblad Embed met het npm install-commando en de code voor je React-app
Je formulier verschijnt in je React- of Next.js-app zonder iframe.

Waar deze opzet goed werkt

Deze aanpak past overal waar een zichtbaar Google-iframe misplaatst zou ogen: een aanmelding voor een wachtlijst op een marketingsite of een feedback- en contactformulier in een Next.js-app. Je houdt Google Forms als de backend die je team al kent, terwijl bezoekers een formulier zien dat bij je ontwerp past, inclusief dark mode.

Veelgestelde vragen

Werkt dark mode met het ingesloten formulier?
Ja. Stel je eigen achtergrond- en primaire kleuren in op het tabblad Theme in Formfacade. Omdat het formulier als native HTML wordt getoond in plaats van als iframe, past het in je donkere lay-out zonder witte Google-kaart.
Gaan de antwoorden nog steeds naar Google Sheets?
Ja, als Submit to Google Forms aanstaat onder Responses. Formfacade verzendt naar je Google-formulier, dus de antwoorden verschijnen op het tabblad met antwoorden van het formulier en in de gekoppelde Google Sheet, net als voorheen.
Werkt het met de Next.js App Router en server-side rendering?
Ja. De component @formfacade/embed-react draait in de browser, dus zet in de App Router de directive "use client" bovenaan het bestand dat hem rendert. De rest van je pagina kan server-side gerenderd blijven.
Kan ik niet gewoon CSS gebruiken op de standaard insluiting van Google Forms?
Nee. De standaard insluiting is een iframe van docs.google.com en cross-origin-beperkingen houden je CSS buiten. De enige native opmaak is de editor Customize theme, die kleuren, een headerafbeelding en een beperkte lijst lettertypen dekt.

Samenvatting

Sluit je een Google-formulier in React of Next.js in met de code van Google, dan houdt het iframe je CSS tegen en ziet het formulier er altijd uit als Google. Met Formfacade maak je het formulier op in het tabblad Preview en sluit je het in met een npm-pakket, zonder iframe. Maak je formulier en volg de stappen hierboven. Heb je vragen, schrijf dan naar support.

Laatst bijgewerkt: