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

You can use the Formfacade addon to embed the Google Forms on your react app without an iframe.

Pre-requisites

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

Step 1:

Open your form in Google Forms > click on the addon icon > click Formfacade


Step 2:

Formfacade addon menu options will be displayed > click Embed in a webpage


Step 3:

Embed wizard will be displayed > select Embed in my React.js web app, click Next


Step 4:

Inlcude the import statement below to import the Formfacade Embed component in your React app

import FormfacadeEmbed from "@formfacade/embed-react";


Step 5:

Add the Formfacade Embed code in your react app.

<FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />


Made with formfacade