Comment intégrer et personnaliser Google Forms dans React ou Next.js sans iframe ?

Les développeurs qui travaillent en React ou Next.js et gardent leurs formulaires dans Google Forms se heurtent au même mur : le code d'intégration de Google est un iframe de docs.google.com, donc votre CSS et votre mode sombre n'atteignent jamais le formulaire. Customize theme se limite à une image d'en-tête, une courte liste de polices et deux couleurs. L'API Google Forms n'offre aucun style. Avec Formfacade, le formulaire s'affiche en HTML natif depuis un package npm, donc vous le personnalisez comme le reste de votre produit, mode sombre compris. Les réponses sont toujours collectées dans votre Google Form et votre équipe continue de travailler dans Google Forms et Google Sheets.

Voici les deux vraies façons de styliser un Google Form dans une application React ou Next.js et ce qui manque à chacune.

L'intégration Google Forms par défaut est un iframe servi depuis docs.google.com, donc votre feuille de style n'atteint jamais le formulaire et il ressemble toujours à Google, pas à votre produit. Ce guide explique pourquoi cette limite existe, compare les vraies options, puis montre comment personnaliser votre Google Form avec Formfacade et l'intégrer dans React ou Next.js sans iframe, mode sombre compris.

Pourquoi vous ne pouvez pas styliser un Google Form intégré avec du CSS

Quand vous collez le code d'intégration de Google Forms, vous obtenez un iframe qui charge le formulaire depuis docs.google.com. Les navigateurs appliquent des restrictions cross-origin : le CSS et le JavaScript de votre page ne peuvent pas atteindre l'intérieur d'un cadre servi depuis un autre domaine. Votre classe .dark-mode et votre pile de polices s'arrêtent à la limite de l'iframe.
Google vous donne un seul outil de style : l'éditeur de thème. Ouvrez votre formulaire et cliquez sur Customize theme pour définir une image d'en-tête, le style du texte des titres et des questions, une couleur de thème et une couleur d'arrière-plan.
Ce qu'il ne peut pas faire :
  • Reprendre les polices de votre site (vous choisissez dans la courte liste de Google)
  • Retirer la mise en page en cartes, les accents violets de focus ou le pied de page Google Forms
  • Suivre le mode sombre de votre application
  • Afficher le formulaire en pleine largeur et en responsive dans votre mise en page
L'API Google Forms n'aide pas non plus. Elle lit la structure du formulaire et les métadonnées des réponses, mais n'a aucun endpoint de style.

Les options pour personnaliser Google Forms dans une application React ou Next.js

Il existe deux vraies façons de le faire. La première est gratuite et native, la seconde est Formfacade.

Option 1 : l'iframe natif avec l'éditeur de thème

Utilisez Customize theme pour vous rapprocher des couleurs voulues, puis intégrez l'iframe dans votre composant.
Avantages :
  • Gratuit et officiel, rien de plus à maintenir
  • Fonctionne partout où un iframe fonctionne
Inconvénients :
  • Le style se limite aux couleurs et à l'image d'en-tête ; les polices, les espacements et la mise en page restent ceux de Google
  • Iframe de hauteur fixe, les longs formulaires défilent dans leur propre cadre
  • Pas de synchronisation du mode sombre avec votre application

Option 2 : comment personnaliser votre Google Form avec Formfacade

Formfacade extrait les champs de votre formulaire et vous permet de changer leur style dans un éditeur visuel.
  • Sur la page qui s'ouvre, nommez votre formulaire, cliquez sur Embed form puis sur Proceed.
  • Cliquez sur l'onglet "Preview" pour voir le formulaire affiché.
  • Choisissez le style Minimal ou Colorful et un thème comme Persian indigo.
  • Ajustez la couleur principale, l'arrière-plan et la typographie pour qu'ils correspondent à votre application.
  • Ce n'est qu'un aperçu. Le design n'est conservé que si vous cliquez sur "Apply to all forms", qui change le style de tous les formulaires en ligne de votre compte, alors n'y touchez pas si vous avez d'autres formulaires en ligne. L'intégration fonctionne sans cela.
L'onglet Theme dans Preview avec les réglages Primary color, Background et Typography. Les cases de couleur sont mises en évidence

Comment intégrer le formulaire personnalisé dans React ou Next.js

L'intégration est un composant React, pas un iframe, donc elle hérite de la mise en page de votre page et reste responsive.
  • Cliquez sur l'onglet "Share"
  • Cliquez sur Embed
Les onglets Edit, Preview, Share et Responses, avec Share mis en évidence
  • Cliquez sur "Embed in my React.js web app" puis sur Next.
L'onglet Embed sous Share qui demande Where do you want to embed this form?, avec Embed, Embed in my React.js web app et Next mis en évidence
  • Copiez la commande npm install et l'extrait du composant React.
  • Lancez npm install @formfacade/embed-react dans votre projet.
  • Remplacez votre bloc iframe par le composant d'intégration Formfacade. Le code contient déjà l'URL de votre formulaire.
L'onglet Embed qui affiche la commande npm install et le code à ajouter à votre application React
Votre formulaire s'affichera dans votre application React ou Next.js sans iframe.

Où cette configuration fonctionne bien

Cette approche convient partout où un iframe Google visible ferait tache : une inscription à une liste d'attente sur un site marketing ou un formulaire d'avis et de contact dans une application Next.js. Vous gardez Google Forms comme backend que votre équipe connaît déjà, tandis que les visiteurs voient un formulaire assorti à votre design, mode sombre compris.

Questions fréquentes

Le mode sombre fonctionne-t-il avec le formulaire intégré ?
Oui. Définissez vos propres couleurs d'arrière-plan et principale dans l'onglet Theme de Formfacade. Comme le formulaire s'affiche en HTML natif et non dans un iframe, il s'intègre à votre mise en page sombre sans carte Google blanche.
Les réponses vont-elles toujours dans Google Sheets ?
Oui, si Submit to Google Forms est activé sous Responses. Formfacade envoie les réponses à votre Google Form, donc elles apparaissent dans l'onglet des réponses du formulaire et dans la feuille Google Sheets liée, comme avant.
Est-ce que cela fonctionne avec l'App Router de Next.js et le rendu côté serveur ?
Oui. Le composant @formfacade/embed-react s'exécute dans le navigateur, donc dans l'App Router, ajoutez la directive "use client" en haut du fichier qui l'affiche. Le reste de votre page peut rester rendu côté serveur.
Est-ce que je peux simplement utiliser du CSS sur l'intégration Google Forms standard à la place ?
Non. L'intégration standard est un iframe de docs.google.com et les restrictions cross-origin empêchent votre CSS d'y entrer. Le seul style natif est l'éditeur Customize theme, qui couvre les couleurs, l'image d'en-tête et une liste de polices limitée.

Résumé

Si vous intégrez un Google Form dans React ou Next.js avec le code de Google, l'iframe bloque votre CSS et le formulaire ressemble toujours à Google. Avec Formfacade, vous personnalisez le formulaire dans l'onglet Preview et vous l'intégrez avec un package npm, sans iframe. Créez votre formulaire et suivez les étapes ci-dessus. Si vous avez des questions, écrivez à l'assistance.

Dernière mise à jour :