@formfacade/embed-react NPM

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.

Installation

Download the FormFacade Plugin: Obtain the FormFacade plugin from the Google Workspace Marketplace.
Access Google Forms: Open your Google Form
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'.
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.
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

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.

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}
      />
    </div>
  );
};

export default App;