Hoe sluit je Google Forms in je React-app in zonder iframe?

React-ontwikkelaars die een Google-formulier in hun app willen, krijgen van de insluitcode van Google een iframe: een pagina in de pagina, met de look van Google en een eigen scrollbalk, waar de stijlen van je app niet bij kunnen. Met het insluitpakket van Formfacade, @formfacade/embed-react, wordt het formulier als component in je app weergegeven, zonder iframe. Je bewerkt de vragen gewoon in de formuliereditor, dus een vraag wijzigen betekent niet dat je je code moet wijzigen, en de antwoorden worden in je Google-formulier verzameld.

Volg de stappen hieronder. Voor de laatste heb je een Formfacade-formulier nodig, dus maak je formulier als je er nog geen hebt.

Vereisten

  • Node.js geïnstalleerd op je systeem.
  • Teksteditor of geïntegreerde ontwikkelomgeving (IDE)

Een React-app maken

Heb je je React-omgeving nog niet ingericht, installeer dan Node.js en maak een React-app.
Stap 1: Klik hier om Node.js te downloaden
Stap 2: Installeer NPX globaal door de volgende opdracht in je terminal uit te voeren.
npm install -g npx
Stap 3: Een React-app genereren
npx create-react-app test-react-app

Formfacade/embed-react installeren

Formfacade/embed-react is de insluitbibliotheek van Formfacade om Google Forms zonder iframe in je React-app in te sluiten.
Open in de map van je app de terminal en installeer het pakket Formfacade Embed:
npm install @formfacade/embed-react

Google Forms in een React-app insluiten

  • Geef je formulier op de pagina die opent een naam, klik op Embed form en klik op Proceed.
  • Kies op het tabblad Share onder Where do you want to embed this form? de optie 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
  • Voeg de import-instructie hieronder toe om de Formfacade Embed-component in je React-app te importeren: import FormfacadeEmbed from "@formfacade/embed-react";
  • Voeg de Formfacade Embed-code toe aan je React-app: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Kopieer deze code uit het Embed-tabblad, want daar staat de url van je formulier in plaats van de puntjes.
Het tabblad Embed met het npm install-commando en de code voor je React-app
Je formulier verschijnt in je React-app zonder iframe.

Samenvatting

Als je een Google-formulier met de code van Google in React insluit, krijg je een iframe met een eigen look en scrollbalk. Met Formfacade installeer je @formfacade/embed-react en voeg je de Formfacade Embed-code toe aan je React-app. Maak je formulier en volg de stappen hierboven. Heb je vragen, schrijf dan naar support.

Laatst bijgewerkt: