Customize the UI and embed Google Forms in React without the need for an Iframe.

Description

Use Formfacade to integrate Google Forms into your React app with a user interface that complements your website and gets rid of the Google Forms branding.

Features

• Tailored UI for seamless integration with Light and Dark backgrounds
• Easily implement callback functions upon form submission
• Embed scripts instead of iframes to make them easier to load and UI-friendly.

Table of Contents

• Installation
• Usage
• Example
• Support

Installation

1. Download the FormFacade Plugin: Obtain the FormFacade plugin from the Google Workspace Marketplace.

2. Access Google Forms: Open your Google Form

3. Add the FormFacade Add-on:

   • Click on the 'Add-ons' button in Google Forms.
   • Choose 'Formfacade' from the list of available add-ons.
   • Select 'Embed in a web page'.

4. Embedding the Form:

   • Upon clicking 'Embed', a dialog will appear asking, “Where do you want to embed this form?”
   • Choose "Embed in React App" for integration.
   • Retrieve the 'formfacadeURL' from this selection.

5. Integrate with React App: Use the following npm command to install the required package for embedding the form within your React application:

npm i @formfacade/embed-react

For more detailed information, please visit How to embed Google Forms in your React app without an iframe?

Usage

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

<FormfacadeEmbed
    formFacadeURL={formFacadeURL}
    onSubmitForm={onSubmitForm}
/>

| Prop | Type | Default Value | Required/Optional | | --------------------- | --------- | ----------------- | ------------------- | | formFacadeURL | String | Required | Required | | onSubmitForm | Function | () => console.log('Form Submitted'); | Optional | | prefillForm | Function | Not specified | Optional | | onFormLoad | Function | () => console.log('Form loaded'); | Optional | | flush | Boolean | false | Optional |

• formFacadeURL: URL of the Formfacade embedded Google Form. This is a required field.
• onSubmitForm: Callback function triggered on form submission.
• prefillForm: Function to prefill form data. It's optional.
• onFormLoad: Function that can be invoked when a form is loaded. It's optional.
• flush: Disables autosave.

Example

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

const FORMFACADE_URL = "https://formfacade.com/include/109671923741510513923/form/1FAIpQLSetAzIt89c0hBCWhI1AzUWRXDQ0VV1JAUph6i_3dvNpT-ZpqA/classic.js?div=ff-compose";


const App = () => {

  const prefillForm = () => {
    // Optional: Refer to the provided link to find the entry IDs for prefilling input fields: 
    // https://formfacade.com/website/does-formfacade-support-pre-filled-survey-links-like-native-google-forms-on-1FAIpQLSfGvg22V7Lzyw_5AEbKBSpklS_TMw6tKxcQiDqlC9KvfBVTgQ.html
    
    return {
      'entry.1297600622': '@formfacade/embed-react',
      'entry.813617742': `${new Date()}`
    };
  };

  const onSubmitForm = () => {
    // Add your specific form submission handling code below.
    console.log("----FORM SUBMITTED----");
  };

  const onFormLoad = () => {
    console.log("----FORM LOADED----");
  };



  return (
    <div className="App">
      <FormfacadeEmbed
        formFacadeURL={FORMFACADE_URL}

        // Optional: Callback function triggered on form submission. Remove if not required.
        onSubmitForm={onSubmitForm}

        // Optional: Function that can be invoked when a form is loaded. Remove if not required.
        onFormLoad={onFormLoad}
    
        // Optional: Use prefillForm to prefill form fields. See prefillForm function for details. Remove if not required.
        prefillForm={prefillForm}

        // Optional
        flush={true}
      />
    </div>
  );
};

export default App;

Support

For support, email [email protected]