Come incorporare e personalizzare Google Forms in React o Next.js senza iframe?

Gli sviluppatori che lavorano in React o Next.js e tengono i moduli in Google Forms sbattono contro lo stesso muro: il codice di embed di Google è un iframe da docs.google.com, quindi il tuo CSS e la tua modalità scura non arrivano mai al modulo. Customize theme si ferma a un'immagine di intestazione, un breve elenco di font e due colori e l'API di Google Forms non ha nessuno stile. Con Formfacade il modulo viene mostrato come HTML nativo da un pacchetto npm, quindi gli dai lo stile come al resto del tuo prodotto, modalità scura inclusa. Le risposte vengono ancora raccolte nel tuo Google Form e il tuo team continua a lavorare da Google Forms e Google Sheets.

Ecco i due modi reali per personalizzare lo stile di un Google Form in un'app React o Next.js e dove ognuno non basta.

L'embed predefinito di Google Forms è un iframe servito da docs.google.com, quindi il tuo foglio di stile non arriva mai al modulo e sembra sempre Google, non il tuo prodotto. Questa guida spiega perché esiste questo limite, confronta le opzioni reali e poi mostra come personalizzare il tuo Google Form con Formfacade e incorporarlo in React o Next.js senza iframe, modalità scura inclusa.

Perché non puoi dare stile con CSS a un Google Form incorporato

Quando incolli il codice di embed di Google Forms, ottieni un iframe che carica il modulo da docs.google.com. I browser applicano restrizioni cross-origin: il CSS e il JavaScript della tua pagina non possono entrare in un frame servito da un altro dominio. La tua classe .dark-mode e il tuo elenco di font si fermano al confine dell'iframe.
Google ti dà un solo strumento di stile, l'editor del tema. Apri il tuo modulo e clicca su Customize theme per impostare un'immagine di intestazione, lo stile del testo per titoli e domande, un colore del tema e un colore di sfondo.
Cosa non può fare:
  • Usare i font del tuo sito (scegli da un breve elenco di Google)
  • Togliere il layout a schede, gli accenti viola del focus o il piè di pagina di Google Forms
  • Seguire la modalità scura della tua app
  • Rendere il modulo a tutta larghezza e responsive dentro il tuo layout
Nemmeno l'API di Google Forms aiuta. Legge la struttura del modulo e i metadati delle risposte, ma non ha nessun endpoint per lo stile.

Opzioni per personalizzare Google Forms in un'app React o Next.js

Ci sono due modi reali per farlo. Il primo è gratis e nativo, il secondo è Formfacade.

Opzione 1: iframe nativo più l'editor del tema

Usa Customize theme per avvicinarti ai colori, poi incorpora l'iframe nel tuo componente.
Pro:
  • Gratis e ufficiale, niente in più da mantenere
  • Funziona ovunque funzioni un iframe
Contro:
  • Lo stile si ferma ai colori e all'immagine dell'intestazione; font, spaziature e layout restano di Google
  • Iframe ad altezza fissa, i moduli lunghi scorrono dentro il proprio riquadro
  • Nessuna sincronizzazione della modalità scura con la tua app

Opzione 2: Come personalizzare il tuo Google Form con Formfacade

Formfacade estrae i campi del tuo modulo e ti permette di cambiarne lo stile in un editor visivo.
  • Nella pagina che si apre, dai un nome al modulo, clicca su Embed form e poi su Proceed.
  • Clicca sulla scheda "Preview" per vedere il modulo visualizzato.
  • Scegli lo stile Minimal o Colorful e un tema come Persian indigo.
  • Regola il colore principale, lo sfondo e la tipografia per abbinarli alla tua app.
  • È solo un'anteprima. Il design viene mantenuto solo se clicchi su "Apply to all forms", che cambia lo stile di tutti i moduli pubblicati del tuo account, quindi lascia stare se hai altri moduli pubblicati. L'embed funziona anche senza.
La scheda Theme in Preview con le impostazioni Primary color, Background e Typography, con i riquadri dei colori evidenziati

Come incorporare il modulo personalizzato in React o Next.js

L'embed è un componente React, non un iframe, quindi eredita il layout della tua pagina e resta responsive.
  • Clicca sulla scheda "Share"
  • Clicca su Embed
Le schede Edit, Preview, Share e Responses, con Share evidenziata
  • Clicca su "Embed in my React.js web app" e poi 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
  • Copia il comando npm install e lo snippet del componente React.
  • Esegui npm install @formfacade/embed-react nel tuo progetto.
  • Sostituisci il blocco dell'iframe con il componente di embed di Formfacade. Il codice contiene già l'URL del tuo modulo.
La scheda Embed che mostra il comando npm install e il codice da aggiungere alla tua app React
Il tuo modulo comparirà nella tua app React o Next.js senza iframe.

Dove questa configurazione funziona bene

Questo approccio va bene ovunque un iframe di Google visibile sembrerebbe fuori posto: un'iscrizione a una lista d'attesa su un sito di marketing o un modulo di feedback e contatto dentro un'app Next.js. Tieni Google Forms come backend che il tuo team conosce già, mentre i visitatori vedono un modulo in linea con il tuo design, modalità scura inclusa.

Domande frequenti

La modalità scura funziona con il modulo incorporato?
Sì. Imposta il tuo sfondo e i tuoi colori principali nella scheda Theme di Formfacade. Dato che il modulo viene mostrato come HTML nativo invece che in un iframe, sta dentro il tuo layout scuro senza una scheda bianca di Google.
Le risposte arrivano ancora a Google Sheets?
Sì, con Submit to Google Forms attivo in Responses. Formfacade invia al tuo Google Form, quindi le risposte compaiono nella scheda delle risposte del modulo e nel foglio di Google Sheets collegato, come prima.
Funziona con l'App Router di Next.js e il rendering lato server?
Sì. Il componente @formfacade/embed-react gira nel browser, quindi nell'App Router aggiungi la direttiva "use client" in cima al file che lo mostra. Il resto della pagina può restare renderizzato lato server.
Posso usare semplicemente CSS sull'embed standard di Google Forms?
No. L'embed standard è un iframe da docs.google.com e le restrizioni cross-origin impediscono al tuo CSS di entrarci. L'unico stile nativo è l'editor Customize theme, che copre colori, immagine dell'intestazione e un elenco limitato di font.

Riepilogo

Se incorpori un Google Form in React o Next.js con il codice di Google, l'iframe blocca il tuo CSS e il modulo sembra sempre Google. Con Formfacade dai lo stile al modulo nella scheda Preview e lo incorpori con un pacchetto npm, senza iframe. Crea il tuo modulo e segui i passaggi qui sopra. Se hai domande, scrivi all'assistenza.

Ultimo aggiornamento: