O que é Construtor de formulários?

O Form Builder permite criar formulários personalizados com um editor visual. Adicione campos de texto, menus suspensos, caixas de seleção e muito mais, depois exporte o formulário como HTML ou um esquema JSON.

Escolha entre catorze tipos de campo: texto, e-mail, telefone, URL, número, data, envio de arquivo, escala de avaliação, lista suspensa, caixa de seleção, opção única, área de texto, blocos de descrição para texto introdutório e quebras de página que dividem um formulário longo em etapas. Cada campo de entrada tem rótulo, texto de ajuda opcional, marcador, indicador de obrigatório e lista de opções para suspensas e opção única. Comece a partir de um modelo pronto (contato, feedback, pesquisa, inscrição, pedido, reserva), reordene os campos com as setas para cima/baixo, pré-visualize o formulário ao vivo com uma barra de progresso entre páginas e exporte uma página HTML estilizada pronta para colar em qualquer site ou um esquema JSON para validação no backend.

Como usar

1. Etapa 1 — Clique em "Adicionar campo" para inserir um novo campo e escolher o tipo (texto, e-mail, telefone, URL, número, data, arquivo, escala de avaliação, lista suspensa, caixa de seleção, opção única ou área de texto), adicione uma quebra de página para dividir um formulário longo em etapas, ou carregue um modelo pronto para começar rápido.
2. Passo 2 — Clique em qualquer campo para definir seu rótulo, placeholder e se é obrigatório.
3. Passo 3 — Visualize o formulário em tempo real e exporte como código HTML ou esquema JSON para integrar ao seu projeto.

Quando usar

• Montar um formulário de inscrição ou confirmação rápida para incluir em um site estático.
• Prototipar o formulário antes de passar o esquema para o desenvolvedor implementar.
• Ensinar o básico de formulários HTML sem fazer o aluno digitar cada input.

Resultado

Uma professora cria um formulário de matrícula com campos para Nome do Aluno (texto obrigatório), Série (menu suspenso: 1º ao 3º ano), E-mail (validação de e-mail) e uma área de texto para Observações — depois exporta o HTML para incorporar no site da escola.

Perguntas frequentes

Para onde vão os dados quando alguém envia o formulário?

Para lugar nenhum, por padrão. O HTML exportado não tem URL de action, então o envio não vai a lugar algum e os dados nunca saem do dispositivo. Para receber as respostas, aponte o action para o seu próprio endpoint, Formspree, Google Forms ou uma função serverless.

Posso reimportar um formulário existente no editor?

Por enquanto não. A exportação é unidirecional: do editor para HTML ou JSON. Para editar depois, salve o esquema JSON e reconstrua manualmente, ou mantenha a sessão aberta até terminar as iterações.

Por que minhas opções de suspensa não aparecem?

Suspensas e radios precisam de pelo menos um item na lista de opções. Clique no campo, abra a seção de opções e digite cada escolha separada por vírgula ou nova linha. Lista vazia gera uma suspensa sem itens.

O HTML exportado vem com estilos?

Sim — agora cada exportação HTML inclui uma pequena folha de estilos embutida, então o formulário fica limpo e legível assim que você abre o arquivo: espaçamento organizado, bordas nos campos, anel de foco e um botão de envio estilizado. O CSS é mínimo e autossuficiente, então você pode mantê-lo como está ou apagar o bloco de estilos e colocar suas próprias classes de Tailwind, Bootstrap ou framework.

Qual a diferença entre a exportação HTML e JSON?

O HTML está pronto para colar e renderizar. O JSON é um esquema estruturado com tipos de campo, rótulos e regras de validação, ideal para renderizar com React, Vue ou bibliotecas como react-hook-form e Formik.

Ferramentas relacionadas