导出为 React

NueForm 可以将任何表单导出为独立的 React 组件文件。无需嵌入 iframe，您将获得一个真正的 React 组件，其中包含您的表单数据、渲染器以及所有字段组件，打包在一个文件中。将它放入您的 React 应用即可直接使用。

导出内容

导出表单时，NueForm 会生成一个 TypeScript（.tsx）文件，包含：

• 您的表单数据 --- 所有问题、属性、选项、逻辑跳转、变量和主题设置均作为常量嵌入。
• 表单渲染器 --- 完整的 NueForm 渲染引擎，包括导航、进度跟踪、动画和键盘快捷键。
• 所有必需的字段组件 --- 仅包含表单使用的字段组件（例如，如果表单没有评分问题，则不包含评分字段组件）。
• 工具函数 --- 逻辑跳转评估、变量插值，以及测验评分（如适用）。

导出的文件是完全独立的——不依赖 NueForm 的服务器或 API。您的表单完全在客户端运行。

如何导出

从仪表板导出

1. 在 NueForm 构建器中打开您的表单。
2. 点击顶部工具栏中的 导出 按钮。
3. 导出弹窗将生成您的组件。
4. 点击 复制到剪贴板 或 下载 获取文件。

通过 API 导出

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=true" \
  -H "Authorization: Bearer nf_your_api_key" \
  -o MyForm.tsx

查询参数：

使用导出的组件

步骤 1：将文件添加到项目中

将下载的文件放入组件目录：

src/
  components/
    CustomerFeedbackForm.tsx    <-- 您导出的表单
    ...

步骤 2：安装对等依赖

导出的组件会列出其对等依赖。安装它们：

npm install react react-dom

某些问题类型需要额外的依赖：

导出弹窗会显示您特定表单所需的确切依赖。

步骤 3：导入并渲染

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm />
    </div>
  );
}

组件默认渲染全屏表单体验。

步骤 4：处理提交

导出的表单完全在客户端渲染。默认情况下，完成后会显示感谢页面，但不会将数据发送到任何地方。您需要添加自己的提交处理器。

组件接受 onSubmit 回调：

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  const handleSubmit = async (answers: Array<{ questionId: string; value: unknown }>) => {
    // 将答案发送到您的后端
    await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers }),
    });
  };

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm onSubmit={handleSubmit} />
    </div>
  );
}

自定义导出的表单

由于导出的是标准 React 组件文件，您可以通过多种方式进行自定义：

主题覆盖

表单的主题（颜色、字体、尺寸）嵌入在导出的数据中。您可以直接在导出的文件中修改这些值：

// 在导出的文件中，找到表单数据常量：
const FORM_DATA = {
  themeColor: '#6366f1',        // 修改此处
  backgroundColor: '#0a0a0a',   // 修改此处
  textColor: '#ffffff',          // 修改此处
  // ...
};

CSS 自定义

导出的组件使用以 fc- 为前缀的 CSS 类名（form component）。您可以在自己的 CSS 中覆盖样式：

/* 覆盖问题标题样式 */
.fc-question-title {
  font-size: 2rem;
  font-weight: 700;
}

/* 覆盖按钮样式 */
.fc-submit-button {
  background-color: #10b981;
  border-radius: 12px;
}

添加自定义逻辑

您可以修改导出的文件以添加自定义行为：

• 添加 NueForm 不支持的验证规则。
• 与应用的状态管理集成（Redux、Zustand 等）。
• 为特定问题添加自定义分析跟踪。
• 从应用的用户数据预填答案。

代码保护

导出的组件默认包含代码保护（obfuscate=true 参数）。这会混淆变量名和内部实现细节，同时保持组件完全可用。

代码保护的作用：

• 混淆内部变量和函数名。
• 保留所有功能——表单运行完全相同。
• 使代码更难阅读和逆向工程。
• 不会加密或隐藏表单数据（问题和选项在嵌入的常量中可见）。

要导出不带代码保护的版本（便于调试），设置 obfuscate=false：

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=false" \
  -H "Authorization: Bearer nf_your_api_key"

支持的问题类型

React 导出支持以下问题类型：

限制

• 文件上传 --- 导出的表单包含文件上传界面，但由于无法使用 NueForm 的存储，您需要提供自己的上传端点。
• 录制 --- 视频/音频录制依赖浏览器 API，存储可能需要额外设置。
• 支付 --- 支付问题不包含在 React 导出中，因为它们需要服务端 Stripe 集成。
• 服务端功能 --- 依赖 NueForm 后端的功能（Webhooks、分析、响应存储）在导出的表单中不可用。您必须在自己的后端中实现这些功能。
• 更新 --- 导出的表单是静态快照。如果您在 NueForm 中更新了表单，需要重新导出并替换文件。

最佳实践

1. 包装而非修改。 围绕导出的表单创建包装组件来实现自定义。这样重新导出不会覆盖您的自定义逻辑。

2. 在服务端处理提交。 始终将表单数据发送到您自己的后端进行验证和存储。切勿仅依赖客户端的表单提交。

3. 对导出进行版本管理。 记录您导出的表单版本，以便轻松重新导出和比较更改。

4. 导出后进行测试。 部署到生产环境前，始终在目标应用中测试导出的表单。

相关文档

• 主题与样式 --- 导出前自定义表单外观
• 自定义 CSS --- 高级 CSS 自定义
• 嵌入表单 --- 通过 iframe 嵌入的替代方案（无需 Pro 套餐）