Como Criar um Construtor de Formulários

Um construtor de formulários permite que as pessoas desenhem os próprios formulários — escolham campos, definam regras, publiquem um link — e depois reúne as respostas. Por baixo dos panos, são três coisas: uma definição de formulário guardada como dados, um renderizador que transforma a definição em um formulário funcional e um armazenamento de respostas com notificações e exportação. Antes de construir um, verifique se você realmente precisa disso: se você só precisa de um formulário de contato ou de inscrição, crie esse formulário diretamente e pule o construtor.

Você precisa mesmo de um construtor?

Sua situação	Crie isto
Um ou dois formulários que raramente mudam	Os próprios formulários. Veja como adicionar um formulário de contato.
Muitos formulários, criados por pessoas não desenvolvedoras da sua equipe	Um construtor de formulários interno
Os formulários fazem parte do seu produto (clientes criam os próprios)	Um construtor com contas, limites e incorporação
Você quer principalmente resultados de pesquisa e gráficos	Um app de pesquisa

Um construtor é um projeto bem maior que um formulário, porque cada tipo de campo precisa funcionar no editor, no formulário público, na validação, no armazenamento, nas notificações e na exportação.

O que um construtor de formulários precisa ter

Definições de formulário

Guarde cada formulário como uma lista de campos, salva como dados estruturados (JSON em uma coluna Postgres funciona bem). Um campo pode ter a seguinte forma:

id — um ID estável que nunca muda, mesmo que o rótulo mude
tipo — texto, e-mail, número, texto longo, seleção única, caixa de seleção, data, arquivo
rótulo e texto de ajuda
obrigatório, mín / máx, tipos de arquivo permitidos
opções para campos de seleção
ordem e, opcionalmente, uma condição (“mostrar apenas se o campo X for Y”)

O editor altera essa lista; o formulário público a lê. Esse é todo o truque: nenhum código novo por formulário.

Respostas

Respostas — formulário, versão do formulário, data de envio, respostas indexadas pelo ID do campo, status (novo, lido, arquivado).
Arquivos — os arquivos enviados pertencem ao armazenamento de arquivos, com a resposta guardando apenas uma referência, nunca dentro da linha do banco de dados.

Páginas

Lista de formulários com a contagem de respostas.
Editor — adicionar, reordenar e configurar campos, com uma prévia ao vivo ao lado.
Configurações — mensagem de confirmação ou redirecionamento, e-mails de notificação, datas de abertura e fechamento, limite de respostas.
Formulário público em um link próprio, e uma versão incorporável para outros sites.
Tabela de respostas com busca, status, visualização detalhada e exportação em CSV.

Decisões e trade-offs

Versionamento. Alguém vai renomear “Telefone” para “Número de celular” depois de 200 respostas. Se as respostas forem guardadas pelo ID do campo e cada resposta registrar a versão do formulário, as respostas antigas continuam sendo exibidas corretamente. Sem isso, seus dados se misturam silenciosamente.

A validação roda duas vezes. Verifique os campos no navegador para um retorno rápido e, de novo, no servidor, porque qualquer pessoa pode enviar dados diretamente para o seu endpoint. A verificação do servidor é a que vale.

Uploads de arquivos. Eles trazem custos de armazenamento, limites de tamanho, verificações de tipo de arquivo e questões de privacidade (currículos, documentos de identidade, formulários médicos). Limite os tipos e tamanhos, e torne os arquivos enviados privados por padrão, legíveis apenas pelos donos do formulário. Veja como adicionar uploads de arquivos ao seu app.

Notificações. “Me envie um e-mail quando alguém enviar” é algo esperado. Isso exige um provedor de e-mail e uma chave de API; veja como enviar e-mails pelo seu app.

Spam. Um formulário público será encontrado por robôs. Use um campo de armadilha (oculto para as pessoas, preenchido pelos robôs), limites de requisições por IP, validação no servidor e, se necessário, um serviço de CAPTCHA.

Incorporação. Uma incorporação por iframe é a forma mais simples e segura de colocar um formulário no site de outra pessoa. Uma incorporação por script parece mais nativa, mas é mais difícil de construir e de proteger.

Lógica condicional. “Mostrar este campo somente se…” é popular e multiplica os testes. Adicione depois que o básico estiver sólido.

Um primeiro prompt que funciona

Crie um app web construtor de formulários para minha equipe. Usuários logados criam formulários em um editor com prévia ao vivo. Tipos de campo: texto curto, texto longo, e-mail, número, data, seleção única, caixas de seleção e upload de arquivo. Cada campo tem um ID estável, rótulo, texto de ajuda, marcação de obrigatório e regras específicas do tipo (mín/máx, opções, tipos de arquivo permitidos e um limite de 10 MB). Guarde a definição do formulário em JSON com um número de versão que aumenta a cada publicação. Cada formulário recebe um link público e um código de incorporação por iframe. Valide as respostas no servidor conforme a versão publicada, guarde as respostas indexadas pelo ID do campo com a versão do formulário e coloque os arquivos enviados em um armazenamento privado. Adicione um campo de armadilha oculto e um limite de requisições por IP. Os donos do formulário veem uma tabela de respostas com status (novo, lido, arquivado), uma visualização detalhada e exportação em CSV. Guarde tudo em um banco de dados. Deixe lógica condicional e notificações por e-mail para depois.

Etapas de construção

Editor e definição. Crie um formulário com todos os tipos de campo e observe o JSON salvo com o agente. Ele está limpo e estável?
Formulário público. Preencha-o em um celular. Verifique as mensagens de validação e a tela de confirmação.
Validação no servidor. Peça ao agente para enviar uma resposta que quebre as regras direto ao servidor, sem passar pela página. Ela deve ser rejeitada.
Versionamento. Renomeie e reordene campos depois de algumas respostas. As respostas antigas devem continuar mostrando as respostas certas.
Uploads. Tente um arquivo grande demais e outro do tipo errado. Confirme que um estranho não consegue abrir um arquivo enviado apenas adivinhando o link.
Tabela de respostas e exportação. Verifique a exportação em CSV com vírgulas, quebras de linha e acentos nas respostas.
Notificações, incorporações e lógica. Adicione um de cada vez.

Erros comuns

Guardar respostas pelo rótulo. Rótulos mudam. Use IDs de campo estáveis.
Validação apenas no navegador. Ela é uma conveniência, não uma proteção.
Arquivos enviados públicos. Formulários costumam coletar documentos que as pessoas não querem expor.
Sem proteção contra spam. Um formulário público pode se encher de lixo em poucos dias.
Construir um construtor para um único formulário. Crie o formulário.
Envios ilimitados em um produto público. Se clientes criam formulários, defina limites por plano, ou um formulário popular pode elevar sua conta de hospedagem.

Quando um produto pronto é a melhor escolha

Ferramentas de formulário hospedadas são excelentes e baratas para a maioria das necessidades. Elas já resolveram incorporação, spam, pagamentos, integrações e acessibilidade em dezenas de tipos de campo. Se sua equipe só precisa de formulários, use uma delas — veja alternativas ao Typeform e alternativas ao Google Forms.

Crie o seu próprio quando as respostas precisarem ficar junto com os seus próprios dados (alimentando um CRM ou um portal de clientes que você administra), quando você precisar de fluxos de trabalho após o envio que as ferramentas não fazem, quando a localização ou a propriedade dos dados for um requisito, ou quando formulários forem um recurso de um produto que você vende.

Construindo com a Mythex

Na Mythex você descreve o construtor no chat e testa o editor e o formulário público lado a lado na prévia ao vivo. A Mythex adiciona um banco de dados dedicado para definições de formulários e respostas, e ativa o armazenamento de arquivos automaticamente quando seu app precisa de uploads (limitado a 1 GB no plano Free). As notificações por e-mail passam por um provedor que você conecta com a sua própria chave. Publique o app em um link mythex.ai, ou no seu próprio domínio no Pro, e os links dos formulários públicos funcionam a partir daí.

Perguntas

Como um construtor de formulários armazena os formulários?

Normalmente como uma definição de formulário: uma lista de campos, cada um com tipo, rótulo, regras de validação e ordem, salva como dados estruturados, como JSON. A mesma definição alimenta o editor e o formulário público, então adicionar um campo não exige código novo.

Como as respostas dos formulários devem ser armazenadas?

Salve cada resposta com uma referência à versão do formulário em que foi enviada e as respostas indexadas pelo ID do campo. Assim, renomear ou reordenar um campo depois não quebra as respostas antigas.

Como evitar spam em um formulário público?

Combine um campo oculto de armadilha (honeypot), limite de requisições por endereço IP, validação no servidor e, se o spam continuar, um serviço de CAPTCHA. Nunca dependa apenas de verificações feitas no navegador.

Preciso de um construtor completo ou apenas de um formulário?

Se você precisa de um ou dois formulários fixos, crie esses formulários diretamente — é bem mais simples. Um construtor compensa quando pessoas não técnicas precisam criar e alterar muitos formulários sem pedir ajuda a um desenvolvedor.