Export als React | NueForm Docs

NueForm kann jedes Formular als eigenständige React-Komponentendatei exportieren. Statt ein iframe einzubetten, bekommst du eine echte React-Komponente mit deinen Formulardaten, dem Renderer und allen Feldkomponenten, gebündelt in einer einzigen Datei. In deine React-App gelegt, funktioniert sie sofort.

Der React-Export ist eine Pro+-Funktion. Er erfordert einen Pro- (29 $/Monat) oder Enterprise-Tarif (99 $/Monat).

Was exportiert wird

Beim Export eines Formulars erzeugt NueForm eine einzelne TypeScript-Datei (.tsx), die Folgendes enthält:

Deine Formulardaten --- Alle Fragen, Eigenschaften, Auswahloptionen, Logiksprünge, Variablen und Theme-Einstellungen, eingebettet als Konstante.
Den Formular-Renderer --- Die komplette NueForm-Rendering-Engine, inklusive Navigation, Fortschrittsanzeige, Animation und Tastaturkürzeln.
Alle benötigten Feldkomponenten --- Nur die von deinem Formular verwendeten Feldkomponenten sind enthalten (hat dein Formular z. B. keine Bewertungsfragen, wird die Bewertungs-Feldkomponente weggelassen).
Hilfsfunktionen --- Auswertung von Logiksprüngen, Variableninterpolation und gegebenenfalls Quiz-Bewertung.

Die exportierte Datei ist eigenständig --- sie hat keine Abhängigkeit von NueForms Servern oder API. Dein Formular funktioniert komplett clientseitig.

So exportierst du

Über das Dashboard

Öffne dein Formular im NueForm-Builder.
Klicke auf den Export-Button in der oberen Werkzeugleiste.
Der Export-Dialog generiert deine Komponente.
Klicke auf Copy to Clipboard oder Download, um die Datei zu erhalten.

Über die API

bash

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-Parameter:

Parameter	Werte	Standard	Beschreibung
`lang`	`tsx`	`tsx`	Ausgabesprache (TypeScript JSX)
`obfuscate`	`true`, `false`	`true`	Codeschutz anwenden (Minifizierung)

Die exportierte Komponente verwenden

Schritt 1: Datei zum Projekt hinzufügen

Lege die heruntergeladene Datei in dein Komponenten-Verzeichnis:

text

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

Schritt 2: Peer-Dependencies installieren

Die exportierte Komponente listet ihre Peer-Dependencies auf. Installiere sie:

bash

npm install react react-dom

Manche Fragetypen benötigen zusätzliche Abhängigkeiten:

Fragetyp	Zusätzliche Abhängigkeit
`signature` / `drawing`	Keine (nutzt die native Canvas-API)
`markdown`	Ein Markdown-Renderer, falls du Markdown-Fragen verwendest

Der Export-Dialog zeigt die exakten Abhängigkeiten für dein konkretes Formular an.

Schritt 3: Importieren und rendern

tsx

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

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

Die Komponente rendert standardmäßig ein bildschirmfüllendes Formularerlebnis.

Schritt 4: Übermittlungen verarbeiten

Das exportierte Formular rendert vollständig clientseitig. Standardmäßig zeigt es nach Abschluss die Danke-Seite, sendet die Daten aber nirgendwohin. Du musst einen eigenen Übermittlungs-Handler ergänzen.

Die Komponente akzeptiert einen onSubmit-Callback:

tsx

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>
  );
}

Exportierte Formulare anpassen

Weil der Export eine ganz normale React-Komponentendatei ist, kannst du sie auf verschiedene Arten anpassen:

Theme-Überschreibungen

Das Theme des Formulars (Farben, Schriften, Größen) ist in den exportierten Daten eingebettet. Du kannst diese Werte direkt in der exportierten Datei ändern:

tsx

// 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-Anpassung

Die exportierte Komponente nutzt CSS-Klassennamen mit dem Präfix fc- (form component). Du kannst die Styles in deinem eigenen CSS überschreiben:

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;
}

Eigene Logik ergänzen

Du kannst die exportierte Datei anpassen, um eigenes Verhalten hinzuzufügen:

Validierungsregeln ergänzen, die über NueForms Möglichkeiten hinausgehen.
Ans State-Management deiner App anbinden (Redux, Zustand usw.).
Eigenes Analytics-Tracking für bestimmte Fragen einbauen.
Antworten mit Nutzerdaten deiner App vorbefüllen.

Wenn du die exportierte Datei änderst, überschreiben spätere Re-Exporte deine Änderungen. Wickle die exportierte Komponente besser in eine eigene Komponente ein, statt sie direkt zu bearbeiten, oder pflege deine Anpassungen in einer separaten Datei.

Codeschutz

Exportierte Komponenten enthalten standardmäßig Codeschutz (der Parameter obfuscate=true). Dabei werden Variablennamen und interne Implementierungsdetails minifiziert, während die Komponente voll funktionsfähig bleibt.

Der Codeschutz:

Minifiziert interne Variablen- und Funktionsnamen.
Erhält die gesamte Funktionalität --- das Formular verhält sich identisch.
Erschwert das Lesen und Reverse-Engineering des Codes.
Verschlüsselt oder versteckt die Formulardaten nicht (Fragen und Auswahloptionen sind in der eingebetteten Konstante sichtbar).

Um ohne Codeschutz zu exportieren (für einfacheres Debugging), setze obfuscate=false:

bash

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

Unterstützte Fragetypen

Die folgenden Fragetypen werden in React-Exporten unterstützt:

Fragetyp	Unterstützt
`short_text`	Ja
`long_text`	Ja
`email`	Ja
`phone`	Ja
`number`	Ja
`url` / `website`	Ja
`multiple_choice`	Ja
`dropdown`	Ja
`yes_no`	Ja
`rating`	Ja
`opinion_scale`	Ja
`nps`	Ja
`date`	Ja
`legal`	Ja
`statement`	Ja
`ranking`	Ja
`picture_choice`	Ja
`matrix`	Ja
`signature`	Ja
`file_upload`	Ja
`markdown`	Ja
`summary`	Ja
`question_group`	Ja
`multi_question_page`	Ja
`welcome_screen`	Ja
`end_screen`	Ja
`drawing`	Ja

Einschränkungen

Datei-Uploads --- Das exportierte Formular enthält die Upload-Oberfläche, aber du musst einen eigenen Upload-Endpunkt bereitstellen, da NueForms Speicher nicht genutzt werden kann.
Aufnahmen --- Video-/Audioaufnahmen hängen von Browser-APIs ab und erfordern möglicherweise zusätzliche Einrichtung für die Speicherung.
Zahlungen --- Zahlungsfragen sind in React-Exporten nicht enthalten, da sie eine serverseitige Stripe-Integration benötigen.
Serverseitige Funktionen --- Funktionen, die von NueForms Backend abhängen (Webhooks, Analytics, Antwortspeicherung), stehen in exportierten Formularen nicht zur Verfügung. Diese musst du in deinem eigenen Backend umsetzen.
Updates --- Exportierte Formulare sind statische Snapshots. Wenn du das Formular in NueForm aktualisierst, musst du neu exportieren und die Datei ersetzen.

Best Practices

Einwickeln statt bearbeiten. Erstelle eine Wrapper-Komponente um das exportierte Formular für deine Anpassungen. So überschreibt ein erneuter Export deine eigene Logik nicht.
Übermittlungen serverseitig verarbeiten. Sende Formulardaten immer an dein eigenes Backend zur Validierung und Speicherung. Vertraue niemals rein clientseitigen Formularübermittlungen.
Versioniere deine Exporte. Halte fest, welche Version des Formulars du exportiert hast, damit du einfach neu exportieren und Änderungen vergleichen kannst.
Nach dem Export testen. Teste das exportierte Formular immer in deiner Zielanwendung, bevor du es in die Produktion bringst.