Exporter vers React

NueForm can export any form as a self-contained React component file. Instead of embedding an iframe, you get a real React component with your form data, renderer, and all field components bundled into a single file. Drop it into your React app and it works out of the box.

What Gets Exported

When you export a form, NueForm generates a single TypeScript (.tsx) file that contains:

• Your form data --- All questions, properties, choices, logic jumps, variables, and theme settings embedded as a constant.
• The form renderer --- The complete NueForm rendering engine, including navigation, progress tracking, animation, and keyboard shortcuts.
• All required field components --- Only the field components used by your form are included (e.g., if your form has no rating questions, the rating field component is omitted).
• Utility functions --- Logic jump evaluation, variable interpolation, and quiz scoring if applicable.

The exported file is self-contained --- it has no dependency on NueForm's servers or API. Your form works entirely client-side.

How to Export

From the Dashboard

1. Open your form in the NueForm builder.
2. Click the Export button in the top toolbar.
3. The export modal will generate your component.
4. Click Copy to Clipboard or Download to get the file.

From the 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

Query parameters:

Using the Exported Component

Step 1: Add the File to Your Project

Place the downloaded file in your components directory:

src/
  components/
    CustomerFeedbackForm.tsx    <-- Your exported form
    ...

Step 2: Install Peer Dependencies

The exported component lists its peer dependencies. Install them:

npm install react react-dom

Some question types require additional dependencies:

The export modal shows the exact dependencies needed for your specific form.

Step 3: Import and Render

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

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

The component renders a full-screen form experience by default.

Step 4: Handle Submissions

The exported form renders entirely client-side. By default, it shows the thank-you screen on completion but does not send data anywhere. You need to add your own submission handler.

The component accepts an onSubmit callback:

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  const handleSubmit = async (answers: Array<{ questionId: string; value: unknown }>) => {
    // Send answers to your backend
    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>
  );
}

Customizing Exported Forms

Because the export is a standard React component file, you can customize it in several ways:

Theme Overrides

The form's theme (colors, fonts, sizes) is embedded in the exported data. You can modify these values directly in the exported file:

// Inside the exported file, find the form data constant:
const FORM_DATA = {
  themeColor: '#6366f1',        // Change this
  backgroundColor: '#0a0a0a',   // Change this
  textColor: '#ffffff',          // Change this
  // ...
};

CSS Customization

The exported component uses CSS class names prefixed with fc- (form component). You can override styles in your own CSS:

/* Override question title styling */
.fc-question-title {
  font-size: 2rem;
  font-weight: 700;
}

/* Override button styling */
.fc-submit-button {
  background-color: #10b981;
  border-radius: 12px;
}

Adding Custom Logic

You can modify the exported file to add custom behavior:

• Add validation rules beyond what NueForm supports.
• Integrate with your app's state management (Redux, Zustand, etc.).
• Add custom analytics tracking to specific questions.
• Pre-fill answers from your app's user data.

Code Protection

Exported components include code protection by default (the obfuscate=true parameter). This minifies variable names and internal implementation details while keeping the component fully functional.

Code protection:

• Minifies internal variable and function names.
• Preserves all functionality --- the form works identically.
• Makes the code harder to read and reverse-engineer.
• Does not encrypt or hide the form data (questions and choices are visible in the embedded constant).

To export without code protection (for easier debugging), set obfuscate=false:

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

Supported Question Types

The following question types are supported in React exports:

Limitations

• File uploads --- The exported form includes the file upload UI, but you need to provide your own upload endpoint since it cannot use NueForm's storage.
• Recording --- Video/audio recording depends on browser APIs and may require additional setup for storage.
• Payment --- Payment questions are not included in React exports as they require server-side Stripe integration.
• Server-side features --- Features that depend on NueForm's backend (webhooks, analytics, response storage) are not available in exported forms. You must implement these in your own backend.
• Updates --- Exported forms are static snapshots. If you update the form in NueForm, you need to re-export and replace the file.

Meilleures pratiques

1. Wrap, do not modify. Create a wrapper component around the exported form for your customizations. This way, re-exporting does not overwrite your custom logic.

2. Handle submissions server-side. Always send form data to your own backend for validation and storage. Never trust client-side-only form submissions.

3. Version your exports. Keep track of which version of the form you exported, so you can easily re-export and compare changes.

4. Test after export. Always test the exported form in your target application before deploying to production.

Voir aussi

• Themes & Styling --- Customize the form's appearance before exporting
• Custom CSS --- Advanced CSS customization
• Embed Forms --- Alternative embedding via iframe (no Pro plan required)