embed-react v1.0.0

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.dev/embed-react

   For more detailed information, please visit FAQ: How do I embed a Google Form in the React App without the need for an Iframe?

Usage

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

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

• formFacadeURL: URL of the Formfacade embedded Google Form. This is a required field.
• onSubmitForm: Callback function triggered on form submission. Default behavior: Shows an alert for form submission.
• prefillForm: Function to prefill form data. It's optional.

Example

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

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


const App = () => {

  const prefillForm = () => {
    // To get the entry ID for the input fields, please visit https://formfacade.com/website/does-formfacade-support-pre-filled-survey-links-like-native-google-forms-on-1FAIpQLSfGvg22V7Lzyw_5AEbKBSpklS_TMw6tKxcQiDqlC9KvfBVTgQ.html
    return {
      'entry.1297600622': '@formfacade.dev/embed-react',
      'entry.813617742': `${new Date()}`
    };
  };

  const onSubmitForm = () => {
    alert('Form submitted');
  }

  return (
    <div className="App">
      <header>
        <h1
          style={{
            textAlign: "center",
            fontSize: "2rem",
            fontWeight: "bold",
          }}
        >
          Formfacade Embed React
        </h1>
      </header>
      <FormfacadeEmbed
        formFacadeURL={FORMFACADE_URL}
        prefillForm={prefillForm}
        onSubmitForm={onSubmitForm}
      />
    </div>
  );
};

export default App;

Support

For support, email support@formfacade.com