Exportar para React

O NueForm pode exportar qualquer formulário como um arquivo de componente React autocontido. Em vez de incorporar um iframe, você recebe um componente React de verdade, com os dados do seu formulário, o renderizador e todos os componentes de campo empacotados em um único arquivo. Coloque-o no seu app React e ele funciona imediatamente.

O Que É Exportado

Quando você exporta um formulário, o NueForm gera um único arquivo TypeScript (.tsx) que contém:

• Os dados do seu formulário --- Todas as perguntas, propriedades, opções, saltos de lógica, variáveis e configurações de tema incorporados como uma constante.
• O renderizador do formulário --- O mecanismo completo de renderização do NueForm, incluindo navegação, acompanhamento de progresso, animação e atalhos de teclado.
• Todos os componentes de campo necessários --- Apenas os componentes de campo usados pelo seu formulário são incluídos (por exemplo, se o seu formulário não tem perguntas de avaliação, o componente de campo de avaliação é omitido).
• Funções utilitárias --- Avaliação de saltos de lógica, interpolação de variáveis e pontuação de questionário, se aplicável.

O arquivo exportado é autocontido --- ele não tem nenhuma dependência dos servidores ou da API do NueForm. Seu formulário funciona inteiramente no lado do cliente.

Como Exportar

Pelo Painel

1. Abra seu formulário no construtor do NueForm.
2. Clique no botão Export na barra de ferramentas superior.
3. O modal de exportação vai gerar o seu componente.
4. Clique em Copy to Clipboard ou Download para obter o arquivo.

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

Usando o Componente Exportado

Etapa 1: Adicione o Arquivo ao Seu Projeto

Coloque o arquivo baixado no seu diretório de componentes:

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

Etapa 2: Instale as Dependências Peer

O componente exportado lista suas dependências peer. Instale-as:

npm install react react-dom

Alguns tipos de pergunta exigem dependências adicionais:

O modal de exportação mostra as dependências exatas necessárias para o seu formulário específico.

Etapa 3: Importe e Renderize

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

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

O componente renderiza uma experiência de formulário em tela cheia por padrão.

Etapa 4: Trate os Envios

O formulário exportado renderiza inteiramente no lado do cliente. Por padrão, ele mostra a tela de agradecimento ao ser concluído, mas não envia dados para lugar nenhum. Você precisa adicionar seu próprio manipulador de envio.

O componente aceita um callback onSubmit:

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

Personalizando Formulários Exportados

Como a exportação é um arquivo de componente React padrão, você pode personalizá-lo de várias maneiras:

Substituições de Tema

O tema do formulário (cores, fontes, tamanhos) é incorporado nos dados exportados. Você pode modificar esses valores diretamente no arquivo exportado:

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

Personalização de CSS

O componente exportado usa nomes de classe CSS com o prefixo fc- (form component). Você pode sobrescrever os estilos no seu próprio 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;
}

Adicionando Lógica Personalizada

Você pode modificar o arquivo exportado para adicionar comportamento personalizado:

• Adicione regras de validação além do que o NueForm suporta.
• Integre com o gerenciamento de estado do seu app (Redux, Zustand etc.).
• Adicione rastreamento de analytics personalizado a perguntas específicas.
• Preencha respostas automaticamente com os dados de usuário do seu app.

Proteção de Código

Os componentes exportados incluem proteção de código por padrão (o parâmetro obfuscate=true). Isso minifica os nomes de variáveis e os detalhes internos de implementação, mantendo o componente totalmente funcional.

A proteção de código:

• Minifica os nomes internos de variáveis e funções.
• Preserva toda a funcionalidade --- o formulário funciona de forma idêntica.
• Torna o código mais difícil de ler e de submeter a engenharia reversa.
• Não criptografa nem esconde os dados do formulário (as perguntas e opções ficam visíveis na constante incorporada).

Para exportar sem proteção de código (para facilitar a depuração), defina 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 Pergunta Suportados

Os seguintes tipos de pergunta são suportados nas exportações para React:

Limitações

• Uploads de arquivo --- O formulário exportado inclui a interface de upload de arquivo, mas você precisa fornecer seu próprio endpoint de upload, já que ele não pode usar o armazenamento do NueForm.
• Gravação --- A gravação de vídeo/áudio depende de APIs do navegador e pode exigir configuração adicional para armazenamento.
• Pagamento --- Perguntas de pagamento não são incluídas nas exportações para React, pois exigem integração com o Stripe no lado do servidor.
• Recursos do lado do servidor --- Recursos que dependem do backend do NueForm (webhooks, analytics, armazenamento de respostas) não estão disponíveis em formulários exportados. Você deve implementá-los no seu próprio backend.
• Atualizações --- Formulários exportados são snapshots estáticos. Se você atualizar o formulário no NueForm, precisa exportar novamente e substituir o arquivo.

Boas Práticas

1. Encapsule, não modifique. Crie um componente wrapper em volta do formulário exportado para as suas personalizações. Assim, reexportar não sobrescreve sua lógica personalizada.

2. Trate os envios no lado do servidor. Sempre envie os dados do formulário para o seu próprio backend para validação e armazenamento. Nunca confie em envios de formulário processados apenas no lado do cliente.

3. Versione suas exportações. Registre qual versão do formulário você exportou, para poder reexportar e comparar alterações com facilidade.

4. Teste após exportar. Sempre teste o formulário exportado na aplicação de destino antes de fazer o deploy em produção.

Relacionado

• Temas e Estilos --- Personalize a aparência do formulário antes de exportar
• CSS Personalizado --- Personalização avançada de CSS
• Incorporar Formulários --- Incorporação alternativa via iframe (não exige plano Pro)