Customize the UI and embed Google Forms in React native using Formfacade.

Description

Embed Google Forms into your React Native app with a professional UI while removing the Google Form branding using Formfacade.

Features

• Tailored UI for seamless integration with Light and Dark backgrounds
• Easily implement callback functions upon form submission
• Experience hassle-free fullscreen mode for immersive engagement
• Cross-platform support

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-native

6. Install React Native WebView: Install the React Native WebView, which is a prerequisite for embedding the form:

npm install react-native-webview

7. Link Native Dependencies: After installing the WebView, navigate to the iOS directory and install the required pods:

cd ios
pod install

For more detailed information, please visit FAQ: How do I embed a Google Form in the Mobile (React Native)

Usage

import FormfacadeWebview from "@formfacade/embed-react-native";

<FormfacadeEmbed
    formFacadeURL={FORMFACADE_FORM_URL}
    onSubmitForm={onSubmitForm}
    onGoBack={onGoBack}
    fullScreen={true}
    headerBackgroundColor={"#5E33FB"}
    headerTextColor={"#FFFFFF"}
    headerTitle={"Formfacade Integration"}
/>

| Prop | Type | Default Value | Required/Optional | | --------------------- | --------- | ----------------- | ------------------- | | formFacadeURL | String | Required | Required | | onSubmitForm | Function | () => Alert.alert('Form Submitted'); | Optional | | onGoBack | Function | () => Alert.alert('Go Back') | Optional | | fullScreen | Boolean | true | Optional | | headerTitle | String | "" | Optional | | headerBackgroundColor | String | #5E33FB | Optional | | headerTextColor | String | #ffffff | Optional | | prefillForm | Function | Not specified | Optional | | includeCart | Boolean | false | Optional |

• 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.
• onGoBack: Callback function for navigating back. Default behavior: Shows an alert to go back.
• fullScreen: Set to true to display a header with a back button.
• headerBackgroundColor: Background color for the header. Default: #5E33FB.
• headerTextColor: Color of the header icons. Default: #ffffff.
• prefillForm: Function to prefill form data. It's optional. Example
• includeCart: If your form has an add-to-cart feature, set to true.

Example

Basic

import {
    StyleSheet,
    Alert,
    SafeAreaView
} from "react-native";
import FormfacadeEmbed from "@formfacade/embed-react-native";

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

const PRIMARY = "#5E33FB";
const WHITE = "#FFFFFF";

const FormfacadeSupportForm = () => {

    const onSubmitForm = () => {
        // REPLACE WITH YOUR CODE:
        Alert.alert(
            'Form Submitted',
            'Your form has been submitted successfully.',
            [
                {
                    text: 'Ok',
                    onPress: () => {},
                    style: 'cancel',
                },
            ],
            { cancelable: false },
        );
    };

    const onGoBack = () => {
        // REPLACE WITH YOUR CODE:
        Alert.alert(
            'Triggered Back Button',
            'You have pressed back button.',
            [
                {
                    text: 'Ok',
                    onPress: () => {},
                    style: 'cancel',
                },
            ],
            { cancelable: false },
        );
    }


    return (
         <>
            <SafeAreaView style={styles.topBarSafeareaView} />
            <SafeAreaView style={styles.container}>
                <FormfacadeEmbed
                    formFacadeURL={FORMFACADE_URL}
                    onSubmitForm={onSubmitForm}
                    onGoBack={onGoBack}
                    fullScreen={true}
                    headerBackgroundColor={PRIMARY}
                    headerTextColor={WHITE}
                    headerTitle="Formfacade Integration"
                />
            </SafeAreaView>
        </>
    );
}

const styles = StyleSheet.create({
    topBarSafeareaView: {
        flex: 0, 
        backgroundColor: PRIMARY
    },
    container: {
        flex: 1
    }
});


export default FormfacadeSupportForm;

Prefill

import {
  StyleSheet,
  Alert,
  SafeAreaView
} from "react-native";
import FormfacadeEmbed from "@formfacade/embed-react-native";

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

const FormfacadeSupportForm = () => {

  const onSubmitForm = () => {
    // REPLACE WITH YOUR CODE:
    Alert.alert(
      'Form Submitted',
      'Your form has been submitted successfully.',
      [
        {
          text: 'Ok',
          onPress: () => { },
          style: 'cancel',
        },
      ],
      { cancelable: false },
    );
  };

  const onGoBack = () => {
    // REPLACE WITH YOUR CODE:
    Alert.alert(
      'Triggered Back Button',
      'You have pressed back button.',
      [
        {
          text: 'Ok',
          onPress: () => { },
          style: 'cancel',
        },
      ],
      { cancelable: false },
    );
  };

  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/embed-react-native',
      'entry.813617742': `${new Date()}`
    };
  };


  return (
    <>
      <SafeAreaView style={styles.topBarSafeareaView} />
      <SafeAreaView style={styles.container}>
        <FormfacadeEmbed
          formFacadeURL={FORMFACADE_URL}
          onSubmitForm={onSubmitForm}
          onGoBack={onGoBack}
          prefillForm={prefillForm}
          fullScreen={false}
        />
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  topBarSafeareaView: {
    flex: 0,
    backgroundColor: '#5E33FB'
  },
  container: {
    flex: 1
  }
});

export default FormfacadeSupportForm;

Support

For support, email [email protected]