How to embed Google Forms in your React app without an iframe?

React developers who want a Google Form in their app get an iframe from Google's embed code: a page inside the page, with Google's look and its own scroll bar, that your app's styles can't reach. With Formfacade's embed package, @formfacade/embed-react, the form renders as a component in your app, without an iframe. You keep editing the questions in the form editor, so changing a question doesn't mean changing your code, and the responses are collected in your Google Form.

Follow the steps below. The last one needs a Formfacade form, so create your form if you don't have one yet.

Pre-requisites

  • Node.js installed on your system.
  • Text Editor or Integrated Development Environment (IDE)

Create a React app

If you haven't setup your React environment, install the node.js and create a react app.
Step 1: Click here to download node.js
Step 2: Install NPX globally by running the following command on your terminal.
npm install -g npx
Step 3: Generate a react app
npx create-react-app test-react-app

Install Formfacade/embed-react

Formfacade/embed-react is the Formfacade embed library to embed Google Forms in your React app without an iframe.
In your app directory, open the terminal and install the Formfacade Embed package:
npm install @formfacade/embed-react

Embed Google Forms in React app

  • On the page that opens, name your form, click Embed form and click Proceed.
  • On the Share tab, under Where do you want to embed this form?, select Embed in my React.js web app and click Next.
The Embed tab under Share asking Where do you want to embed this form?, with Embed, Embed in my React.js web app and Next marked
  • Include the import statement below to import the Formfacade Embed component in your React app: import FormfacadeEmbed from "@formfacade/embed-react";
  • Add the Formfacade Embed code in your react app: <FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
  • Copy this code from the Embed tab, as it has your form's url in place of the dots.
The Embed tab showing the npm install command and the code to add to your React app
Your form will show in your React app without an iframe.

Summary

If you embed a Google Form in React with Google's code, you get an iframe with its own look and scroll bar. With Formfacade, you install @formfacade/embed-react and add the Formfacade Embed code in your react app. Create your form and complete the steps above. If you have any questions, write to support.

Last updated: