Como Criar um Construtor de Formulários

Um construtor de formulários permite às pessoas desenhar os seus próprios formulários — escolher campos, definir regras, publicar uma ligação — e depois recolhe as respostas. Por baixo, é composto por três partes: uma definição do formulário guardada como dados, um renderizador que transforma a definição num formulário funcional e um armazenamento de respostas com notificações e exportação. Antes de construir um, verifique se realmente precisa dele: se só precisa de um formulário de contacto ou de candidatura, construa esse formulário diretamente e dispense o construtor.

Precisa mesmo de um construtor?

A sua situação	Construa isto
Um ou dois formulários que raramente mudam	Os próprios formulários. Veja como adicionar um formulário de contacto.
Muitos formulários, criados por pessoas não programadoras da sua equipa	Um construtor de formulários interno
Os formulários fazem parte do seu produto (os clientes criam-nos)	Um construtor de formulários com contas, limites e incorporação
Sobretudo quer resultados de inquéritos e gráficos	Uma aplicação de inquéritos

Um construtor é um projeto maior do que um formulário, porque cada tipo de campo tem de 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

Definições de formulários

Guarde cada formulário como uma lista de campos, em dados estruturados (JSON numa coluna Postgres funciona bem). Um campo pode ter este aspeto:

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

O editor edita esta lista; o formulário público lê-a. É esse 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, estado (novo, lido, arquivado).
Ficheiros — os ficheiros carregados pertencem ao armazenamento de ficheiros, com a resposta a guardar apenas uma referência, nunca dentro da linha da base de dados.

Páginas

Lista de formulários com o número de respostas.
Editor — adicionar, reordenar e configurar campos, com uma pré-visualização em tempo real ao lado.
Definições — mensagem de confirmação ou redirecionamento, emails de notificação, datas de abertura e fecho, limite de respostas.
Formulário público no seu próprio link, e uma versão incorporável para outros sites.
Tabela de respostas com pesquisa, estado, vista de detalhe e exportação para CSV.

Decisões e compromissos

Versionamento. Alguém vai mudar «Telefone» para «Número de telemóvel» depois de 200 respostas. Se as respostas forem guardadas pelo ID do campo e cada resposta registar a versão do formulário, as respostas antigas continuam a ser mostradas corretamente. Sem isso, os seus dados baralham-se em silêncio.

A validação corre duas vezes. Verifique os campos no navegador para dar feedback rápido, e outra vez no servidor, porque qualquer pessoa pode enviar dados diretamente para o seu endpoint. A verificação do servidor é a que conta.

Carregamento de ficheiros. Traz custos de armazenamento, limites de tamanho, verificações de tipo de ficheiro e questões de privacidade (currículos, documentos de identificação, formulários médicos). Limite os tipos e os tamanhos, e torne os ficheiros carregados privados por omissão, legíveis apenas pelos donos do formulário. Veja como adicionar carregamento de ficheiros à sua aplicação.

Notificações. «Enviar-me um email quando alguém submeter» é o esperado. Exige um fornecedor de email e uma chave de API; veja como enviar emails a partir da sua aplicação.

Spam. Um formulário público será encontrado por bots. Use um campo de isco (oculto para as pessoas, preenchido pelos bots), limites de pedidos por IP, validação no servidor e, se necessário, um serviço de CAPTCHA.

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

Lógica condicional. «Mostrar este campo apenas se…» é popular e multiplica os testes. Acrescente-a depois de as bases estarem sólidas.

Um primeiro prompt que funciona

Crie uma aplicação web de construtor de formulários para a minha equipa. Os utilizadores autenticados criam formulários num editor com pré-visualização em tempo real. Tipos de campo: texto curto, texto longo, email, número, data, seleção única, caixas de verificação e carregamento de ficheiro. Cada campo tem um ID estável, rótulo, texto de ajuda, indicação de obrigatório e regras específicas do tipo (mín./máx., opções, tipos de ficheiro permitidos e um limite de 10 MB). Guarde a definição do formulário como JSON com um número de versão que aumenta a cada publicação. Cada formulário tem uma ligação pública e um código de incorporação por iframe. Valide as respostas no servidor contra a versão publicada, guarde as respostas indexadas pelo ID do campo com a versão do formulário e coloque os ficheiros carregados em armazenamento privado. Adicione um campo de isco oculto e um limite de pedidos por IP. Os donos do formulário veem uma tabela de respostas com estado (novo, lido, arquivado), uma vista de detalhe e exportação para CSV. Guarde tudo numa base de dados. Deixe a lógica condicional e as notificações por email para mais tarde.

Passos de construção

Editor e definição. Construa um formulário com todos os tipos de campo e veja o JSON guardado com o agente. Está limpo e estável?
Formulário público. Preencha-o num telemóvel. Verifique as mensagens de validação e o ecrã de confirmação.
Validação no servidor. Peça ao agente para enviar uma resposta que viole as regras diretamente para o servidor, sem passar pela página. Deve ser rejeitada.
Versionamento. Renomeie e reordene campos depois de algumas respostas. As respostas antigas devem continuar a mostrar as respostas certas.
Carregamentos. Experimente um ficheiro demasiado grande e um do tipo errado. Confirme que um desconhecido não consegue abrir um ficheiro carregado adivinhando o link.
Tabela de respostas e exportação. Verifique a exportação para CSV com vírgulas, quebras de linha e caracteres acentuados nas respostas.
Notificações, incorporação, lógica. Acrescente-as uma de cada vez.

Erros comuns

Guardar as respostas pelo rótulo. Os rótulos mudam. Use IDs de campo estáveis.
Validação apenas no navegador. É uma comodidade, não uma proteção.
Ficheiros carregados públicos. Os formulários recolhem muitas vezes documentos que as pessoas não querem expor.
Sem proteção contra spam. Um formulário público pode encher-se de lixo em poucos dias.
Construir um construtor para um único formulário. Construa o formulário.
Respostas ilimitadas num produto público. Se os clientes criam formulários, defina limites por plano, ou um formulário popular pode fazer disparar a sua conta de alojamento.

Quando um produto pronto é a melhor escolha

As ferramentas de formulários alojadas são excelentes e baratas para a maioria das necessidades. Já resolveram a incorporação, o spam, os pagamentos, as integrações e a acessibilidade em dezenas de tipos de campo. Se a sua equipa só precisa de formulários, use uma delas — veja alternativas ao Typeform e alternativas ao Google Forms.

Construa o seu próprio quando as respostas precisam de viver ao lado dos seus próprios dados (alimentar um CRM ou um portal de clientes que gere), quando precisa de fluxos de trabalho depois da submissão que as ferramentas não conseguem fazer, quando a localização ou a propriedade dos dados é um requisito, ou quando os formulários são uma funcionalidade de um produto que vende.

Construir com a Mythex

Na Mythex descreve o construtor no chat e testa o editor e o formulário público lado a lado na pré-visualização em tempo real. A Mythex adiciona uma base de dados dedicada para as definições de formulários e as respostas, e ativa automaticamente o armazenamento de ficheiros quando a aplicação precisa de carregamentos (limitado a 1 GB no plano Free). As notificações por email passam por um fornecedor que liga com a sua própria chave. Publique a aplicação numa ligação mythex.ai, ou no seu próprio domínio no plano Pro, e as ligações dos formulários públicos funcionam a partir daí.

Perguntas

Como é que um construtor de formulários guarda os formulários?

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

Como devem ser guardadas as respostas aos formulários?

Guarde cada resposta com uma referência à versão do formulário em que foi feita e com as respostas indexadas pelo ID do campo. Assim, se mais tarde renomear ou reordenar um campo, as respostas antigas não deixam de funcionar.

Como evito spam num formulário público?

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

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

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