自定义UI并嵌入回放中的Google表格而无需Iframe.

说明

使用Formfacade将Google表格集成到您的React应用程序中,并配有用户界面来补充您的网站并摆脱Google表格品牌.

特征

• 适合与光明和黑暗背景无缝融合的用户界面
• 在提交表单时容易执行召回功能
• 嵌入脚本取而代之为iframe,以方便装入并方便UI.

目录

• 安装
• 使用量
• 示例
• 支助

安装

1. 下载窗体外观插件 : 从中获取窗体外观插件 谷歌工作空间市场。 。 。 .

2. 访问 Google 表格 : 打开您的谷歌表单

3. 添加窗体加载:

   • 点击谷歌表格中的“ ad-ons” 按钮 .
   • 从可用的添加列表中选择“ Formfacade ” .
   • 选择“ 在网页中嵌入” .

4. 嵌入表单中 :

   • 点击“ Embed” 时, 将会出现一个对话框, 问“ 您要嵌入此表单吗 ? ”
   • 选择"Embed in React App"进行整合.
   • 从此选择获取“ 格式化 ” .

5. 与 React App 整合 : 使用以下 npm 命令安装将窗体嵌入到您的 React 应用程序中所需的软件包 :

npm i @formfacade/embed-react

详情请访问 如何将Google表单嵌入到您的 React app 中而不用 Iframe ?

使用量

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

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

• 窗体结构: Formfacade嵌入式谷歌表格的URL. 这是一个需要的领域.
• 提交表格: 在表单提交时触发的回调函数.
• 预填表: 要预先填充窗体数据的函数。 选取之.
• 格式记录: 当一个窗体被装入时可以引用的函数。 选取之.
• 冲出: 禁用自动保存.

示例

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;

支助

支持, 电子邮件 支持@ formfacade.com