Exportar a React

NueForm puede exportar cualquier formulario como un archivo de componente React autónomo. En lugar de incrustar un iframe, obtienes un componente React real con los datos de tu formulario, el renderizador y todos los componentes de campo empaquetados en un solo archivo. Colócalo en tu aplicación React y funciona directamente.

Qué se exporta

Cuando exportas un formulario, NueForm genera un único archivo TypeScript (.tsx) que contiene:

• Los datos de tu formulario --- Todas las preguntas, propiedades, opciones, saltos lógicos, variables y configuración del tema incrustados como una constante.
• El renderizador del formulario --- El motor de renderización completo de NueForm, incluyendo navegación, seguimiento de progreso, animación y atajos de teclado.
• Todos los componentes de campo requeridos --- Solo se incluyen los componentes de campo utilizados por tu formulario (por ejemplo, si tu formulario no tiene preguntas de valoración, el componente de campo de valoración se omite).
• Funciones utilitarias --- Evaluación de saltos lógicos, interpolación de variables y puntuación de cuestionarios si aplica.

El archivo exportado es autónomo --- no tiene dependencia de los servidores o la API de NueForm. Tu formulario funciona completamente del lado del cliente.

Cómo exportar

Desde el panel de control

1. Abre tu formulario en el constructor de NueForm.
2. Haz clic en el botón Exportar en la barra de herramientas superior.
3. El modal de exportación generará tu componente.
4. Haz clic en Copiar al portapapeles o Descargar para obtener el archivo.

Desde la 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

Parámetros de consulta:

Uso del componente exportado

Paso 1: Agrega el archivo a tu proyecto

Coloca el archivo descargado en tu directorio de componentes:

src/
  components/
    CustomerFeedbackForm.tsx    <-- Tu formulario exportado
    ...

Paso 2: Instala las dependencias peer

El componente exportado lista sus dependencias peer. Instálalas:

npm install react react-dom

Algunos tipos de preguntas requieren dependencias adicionales:

El modal de exportación muestra las dependencias exactas necesarias para tu formulario específico.

Paso 3: Importa y renderiza

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

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

El componente renderiza una experiencia de formulario a pantalla completa por defecto.

Paso 4: Maneja los envíos

El formulario exportado se renderiza completamente del lado del cliente. Por defecto, muestra la pantalla de agradecimiento al completarse pero no envía datos a ningún lugar. Necesitas agregar tu propio manejador de envío.

El componente acepta un callback onSubmit:

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  const handleSubmit = async (answers: Array<{ questionId: string; value: unknown }>) => {
    // Envía las respuestas a tu 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>
  );
}

Personalización de formularios exportados

Como la exportación es un archivo de componente React estándar, puedes personalizarlo de varias maneras:

Sobreescrituras de tema

El tema del formulario (colores, fuentes, tamaños) está incrustado en los datos exportados. Puedes modificar estos valores directamente en el archivo exportado:

// Dentro del archivo exportado, encuentra la constante de datos del formulario:
const FORM_DATA = {
  themeColor: '#6366f1',        // Cambia esto
  backgroundColor: '#0a0a0a',   // Cambia esto
  textColor: '#ffffff',          // Cambia esto
  // ...
};

Personalización CSS

El componente exportado usa nombres de clases CSS con el prefijo fc- (form component). Puedes sobreescribir estilos en tu propio CSS:

/* Sobreescribir estilo del título de pregunta */
.fc-question-title {
  font-size: 2rem;
  font-weight: 700;
}

/* Sobreescribir estilo del botón */
.fc-submit-button {
  background-color: #10b981;
  border-radius: 12px;
}

Agregar lógica personalizada

Puedes modificar el archivo exportado para agregar comportamiento personalizado:

• Agregar reglas de validación más allá de lo que NueForm soporta.
• Integrar con la gestión de estado de tu aplicación (Redux, Zustand, etc.).
• Agregar seguimiento de analíticas personalizado a preguntas específicas.
• Prellenar respuestas con datos de usuario de tu aplicación.

Protección de código

Los componentes exportados incluyen protección de código por defecto (el parámetro obfuscate=true). Esto minifica nombres de variables y detalles de implementación internos mientras mantiene el componente completamente funcional.

La protección de código:

• Minifica nombres internos de variables y funciones.
• Preserva toda la funcionalidad --- el formulario funciona de manera idéntica.
• Hace que el código sea más difícil de leer e ingeniería inversa.
• No encripta ni oculta los datos del formulario (las preguntas y opciones son visibles en la constante incrustada).

Para exportar sin protección de código (para depuración más fácil), establece obfuscate=false:

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

Tipos de preguntas soportados

Los siguientes tipos de preguntas son compatibles con las exportaciones a React:

Limitaciones

• Subida de archivos --- El formulario exportado incluye la interfaz de subida de archivos, pero necesitas proporcionar tu propio endpoint de subida ya que no puede usar el almacenamiento de NueForm.
• Grabación --- La grabación de video/audio depende de las APIs del navegador y puede requerir configuración adicional para el almacenamiento.
• Pago --- Las preguntas de pago no se incluyen en las exportaciones a React ya que requieren integración con Stripe del lado del servidor.
• Funciones del lado del servidor --- Las funciones que dependen del backend de NueForm (webhooks, analíticas, almacenamiento de respuestas) no están disponibles en formularios exportados. Debes implementarlas en tu propio backend.
• Actualizaciones --- Los formularios exportados son instantáneas estáticas. Si actualizas el formulario en NueForm, necesitas re-exportar y reemplazar el archivo.

Mejores prácticas

1. Envuelve, no modifiques. Crea un componente envolvente alrededor del formulario exportado para tus personalizaciones. De esta manera, re-exportar no sobrescribe tu lógica personalizada.

2. Maneja los envíos en el servidor. Siempre envía los datos del formulario a tu propio backend para validación y almacenamiento. Nunca confíes únicamente en envíos de formularios del lado del cliente.

3. Versiona tus exportaciones. Lleva un registro de qué versión del formulario exportaste, para que puedas re-exportar y comparar cambios fácilmente.

4. Prueba después de exportar. Siempre prueba el formulario exportado en tu aplicación destino antes de desplegarlo en producción.

Relacionado

• Temas y estilos --- Personaliza la apariencia del formulario antes de exportar
• CSS personalizado --- Personalización avanzada con CSS
• Incrustar formularios --- Alternativa de incrustación vía iframe (no requiere plan Pro)