Comment intégrer Google Forms dans votre application React sans iframe ?

Les développeurs React qui veulent un formulaire Google Forms dans leur application obtiennent une iframe avec le code d'intégration de Google : une page dans la page, avec l'apparence de Google et sa propre barre de défilement, que les styles de votre application ne peuvent pas atteindre. Avec le paquet d'intégration de Formfacade, @formfacade/embed-react, le formulaire s'affiche comme un composant de votre application, sans iframe. Vous continuez à modifier les questions dans l'éditeur de formulaire, donc changer une question ne veut pas dire changer votre code et les réponses sont collectées dans votre formulaire Google Forms.

Suivez les étapes ci-dessous. La dernière demande un formulaire Formfacade, alors créez votre formulaire si vous n'en avez pas encore.

Prérequis

  • Node.js installé sur votre système.
  • Un éditeur de texte ou un environnement de développement intégré (IDE)

Créer une application React

Si vous n'avez pas encore configuré votre environnement React, installez node.js et créez une application React.
Étape 1 : Cliquez ici pour télécharger node.js
Étape 2 : installez NPX globalement en lançant la commande suivante dans votre terminal.
npm install -g npx
Étape 3 : générez une application React
npx create-react-app test-react-app

Installer Formfacade/embed-react

Formfacade/embed-react est la bibliothèque d'intégration de Formfacade pour intégrer Google Forms dans votre application React sans iframe.
Dans le dossier de votre application, ouvrez le terminal et installez le paquet Formfacade Embed :
npm install @formfacade/embed-react

Intégrer Google Forms dans une application React

  • Sur la page qui s'ouvre, nommez votre formulaire, cliquez sur Embed form puis sur Proceed.
  • Dans l'onglet Share, sous Where do you want to embed this form?, sélectionnez Embed in my React.js web app et cliquez 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
  • Ajoutez l'instruction d'import ci-dessous pour importer le composant Formfacade Embed dans votre application React : import FormfacadeEmbed from "@formfacade/embed-react";
  • Ajoutez le code Formfacade Embed dans votre application React : <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Copiez ce code depuis l'onglet Embed, car il contient l'URL de votre formulaire à la place des points.
L'onglet Embed qui affiche la commande npm install et le code à ajouter à votre application React
Votre formulaire s'affichera dans votre application React sans iframe.

Résumé

Si vous intégrez un formulaire Google Forms dans React avec le code de Google, vous obtenez une iframe avec sa propre apparence et sa propre barre de défilement. Avec Formfacade, vous installez @formfacade/embed-react et vous ajoutez le code Formfacade Embed dans votre application React. Créez votre formulaire et suivez les étapes ci-dessus. Si vous avez des questions, écrivez à l'assistance.

Dernière mise à jour :