Come incorporare Google Forms nella tua app React senza iframe?

Gli sviluppatori React che vogliono un modulo di Google Forms nella loro app ottengono un iframe dal codice di incorporamento di Google: una pagina dentro la pagina, con l'aspetto di Google e la sua barra di scorrimento, che gli stili della tua app non possono raggiungere. Con il pacchetto di incorporamento di Formfacade, @formfacade/embed-react, il modulo viene mostrato come un componente nella tua app, senza iframe. Continui a modificare le domande nell'editor del modulo, quindi cambiare una domanda non significa cambiare il tuo codice, e le risposte vengono raccolte nel tuo Google Form.

Segui i passaggi qui sotto. L'ultimo richiede un modulo Formfacade, quindi crea il tuo modulo se non ne hai ancora uno.

Prerequisiti

  • Node.js installato sul tuo computer.
  • Editor di testo o ambiente di sviluppo integrato (IDE)

Crea un'app React

Se non hai ancora configurato il tuo ambiente React, installa node.js e crea un'app React.
Passo 1: clicca qui per scaricare node.js
Passo 2: installa NPX a livello globale eseguendo questo comando nel tuo terminale.
npm install -g npx
Passo 3: genera un'app React
npx create-react-app test-react-app

Installa Formfacade/embed-react

Formfacade/embed-react è la libreria di incorporamento di Formfacade per incorporare Google Forms nella tua app React senza iframe.
Nella cartella della tua app, apri il terminale e installa il pacchetto Formfacade Embed:
npm install @formfacade/embed-react

Incorpora Google Forms nell'app React

  • Nella pagina che si apre, dai un nome al tuo modulo, clicca su Embed form e clicca su Proceed.
  • Nella scheda Share, sotto Where do you want to embed this form?, seleziona Embed in my React.js web app e clicca su Next.
La scheda Embed in Share che chiede Where do you want to embed this form?, con Embed, Embed in my React.js web app e Next evidenziati
  • Includi l'istruzione import qui sotto per importare il componente Formfacade Embed nella tua app React: import FormfacadeEmbed from "@formfacade/embed-react";
  • Aggiungi il codice di Formfacade Embed nella tua app React: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Copia questo codice dalla scheda Embed, perché contiene l'URL del tuo modulo al posto dei puntini.
La scheda Embed che mostra il comando npm install e il codice da aggiungere alla tua app React
Il tuo modulo apparirà nella tua app React senza iframe.

Riepilogo

Se incorpori un modulo di Google Forms in React con il codice di Google, ottieni un iframe con un aspetto e una barra di scorrimento propri. Con Formfacade, installi @formfacade/embed-react e aggiungi il codice di Formfacade Embed nella tua app React. Crea il tuo modulo e completa i passaggi qui sopra. Se hai domande, scrivi all'assistenza.

Ultimo aggiornamento: