--- title: "Construtor de Formulários Drag-and-Drop: Sem Código" slug: drag-and-drop-form-builder description: "Crie formulários visualmente com o construtor drag-and-drop do Instaform. 26 tipos de campo, desfazer/refazer, multi-seleção, layouts em linha e pré-visualização ao vivo. Sem programação." publishedAt: "2025-08-05" author: "Instaform Team" tags: ["construtor-de-formulários", "drag-and-drop", "no-code", "guia"] locale: pt --- Construir um formulário deveria parecer como organizar uma página, não escrever código. Você deveria poder ver o que está construindo enquanto constrói, mover coisas até o layout ficar certo e saber exatamente o que seus respondentes vão experimentar antes de uma única pessoa preencher. O construtor de formulários drag-and-drop do Instaform torna isso real. Vinte e seis tipos de campo em seis categorias. Posicionamento visual com pré-visualização instantânea. Desfazer e refazer para experimentação sem medo. Multi-seleção para operações em lote. Layouts em linha para designs multi-coluna. Tudo que você precisa para criar formulários profissionais sem tocar em uma linha de código. ## Os 26 Tipos de Campo O Instaform organiza tipos de campo em seis categorias, facilitando encontrar o campo certo para qualquer pergunta. ### Campos Básicos Os fundamentais. Esses cobrem os dados mais comuns que você vai coletar. **Texto Curto** para nomes, títulos, respostas de uma linha. **Texto Longo** para descrições, comentários, respostas detalhadas. **Email** para endereços de email com validação de formato integrada. **Telefone** para números de telefone com assistência de formato. **Número** para entrada numérica com validação opcional de mín/máx. **URL** para endereços de sites com validação de formato. Campos básicos lidam com oitenta por cento do que a maioria dos formulários precisa. Um formulário de contato são três campos básicos — Nome (Texto Curto), Email e Mensagem (Texto Longo). Um formulário de inscrição adiciona Telefone e talvez URL para um site ou perfil do LinkedIn. ### Campos de Escolha Para perguntas com opções definidas. **Dropdown** apresenta opções em um menu compacto de seleção. Melhor para listas longas (países, estados, categorias) onde mostrar todas as opções de uma vez sobrecarregaria o formulário. **Botões de Rádio** exibem todas as opções visualmente, permitindo que respondentes escaneiem e escolham. Melhor para listas curtas (2-5 opções) onde você quer todas as escolhas visíveis de uma vez. **Checkboxes** permitem múltiplas seleções de uma lista. Perguntas "Selecione todos que se aplicam" — interesses, serviços necessários, recursos usados. **Sim/Não** é um campo de escolha binária — mais simples que botões de rádio quando a pergunta é verdadeiramente binária. "Você é um cliente existente?" Sim ou Não. Limpo e sem ambiguidade. Campos de escolha combinam naturalmente com [lógica condicional](/blog/conditional-logic-guide). Uma seleção de dropdown pode acionar diferentes conjuntos de campos para diferentes tipos de respondentes, criando formulários dinâmicos que se adaptam em tempo real. ### Campos de Data e Hora Para coletar datas, horários e dados temporais. **Seletor de Data** apresenta um calendário para selecionar uma data. Data preferida de entrega, data do evento, data de nascimento, prazo do projeto. **Seletor de Hora** coleta um horário específico. Horário preferido para ligação, horário do compromisso, horário de início do evento. **Data-Hora** combina ambos em um único campo para agendamento preciso. Campos de Data e Hora são essenciais para formulários de inscrição, formulários de reserva e qualquer fluxo de trabalho que envolva agendamento. Eles produzem dados estruturados que podem ser processados programaticamente — diferente de abordagens "escreva a data no campo de texto" que produzem formatos inconsistentes. ### Campos Especiais Campos construídos para tipos específicos de dados. **Upload de Arquivo** permite que respondentes anexem documentos, imagens ou outros arquivos. Currículos, capturas de tela, arquivos de design, documentos de apoio. Veja o [guia de upload de arquivo](/blog/file-upload-fields-guide) para opções detalhadas de configuração. **Assinatura** captura uma assinatura desenhada ou digitada diretamente no formulário. Contratos, acordos, formulários de consentimento, documentos de autorização. A assinatura é salva como imagem e anexada ao envio. **Avaliação** fornece uma escala de avaliação baseada em estrelas ou pontos. Avaliações de produto, avaliações de serviço, avaliações de qualidade. Número configurável de estrelas e precisão opcional de meia estrela. **Campos de satisfação** — Escala de Emoji, Slider, NPS (0-10) e Polegar Para Cima/Baixo — são especializados para medir sentimento. Veja o guia completo de [campos de satisfação](/blog/satisfaction-fields-nps-ratings) para saber quando usar cada tipo. ### Campos de Layout Para estruturar e organizar o formulário visualmente. **Quebra de Seção** cria uma divisão visual entre grupos de campos. Uma linha horizontal com um título opcional. Use seções para dividir formulários longos em grupos lógicos — Informações Pessoais, Detalhes Profissionais, Preferências. **Quebra de Página** divide o formulário em múltiplas páginas. Em vez de um formulário longo rolável, respondentes navegam por páginas com botões Próximo e Voltar. Quebras de página são essenciais para formulários longos (mais de 10-15 campos) para prevenir fadiga de rolagem. **Layout em Linha** posiciona múltiplos campos lado a lado em uma única linha. Dois campos curtos (Nome e Sobrenome) em uma linha economizam espaço vertical e parecem naturais. Três campos (Cidade, Estado, CEP) em uma linha imitam o layout que as pessoas esperam de formulários de endereço. Layouts em linha tornam formulários mais compactos e visualmente organizados. ### Campos Ocultos Campos que existem na estrutura de dados do formulário mas não são visíveis para os respondentes. **Campo Oculto** armazena um valor sem exibir um campo. Use campos ocultos para capturar metadados — a URL de referência, um ID de campanha, uma tag de origem, um número de versão. O respondente nunca vê o campo, mas o valor é incluído em cada envio. Campos ocultos são especialmente úteis com a [ação Definir Valor da lógica condicional](/blog/conditional-logic-guide). Com base nas respostas dos respondentes, você pode automaticamente definir valores de campos ocultos para taguear, categorizar ou rotear envios sem nenhuma interação visível. ## Drag-and-Drop em Ação ### Adicionando Campos A paleta de campos fica na barra lateral. Clique ou arraste um tipo de campo para adicioná-lo ao seu formulário. Novos campos aparecem no final por padrão, mas você pode soltá-los em qualquer lugar — entre campos existentes, no topo ou dentro de um layout em linha. Cada campo aparece na área de trabalho com uma representação visual próxima do que os respondentes verão. Um campo de texto parece um campo de texto. Um dropdown parece um dropdown. Um campo de avaliação mostra estrelas. A área de trabalho é uma pré-visualização ao vivo, não um diagrama abstrato. ### Reordenando Campos Pegue qualquer campo e arraste para uma nova posição. A área de trabalho mostra um indicador de destino — uma linha colorida — onde o campo vai cair. Solte, e o campo se move. O formulário atualiza instantaneamente. Reordenar é fluido e visual. Você não seleciona um campo e clica "Mover Para Cima" ou "Mover Para Baixo". Você pega e coloca onde quer. Essa objetividade faz a edição de formulários parecer como arranjar objetos físicos em vez de configurar software. ### Configurando Campos Clique em um campo na área de trabalho para abrir seu painel de configuração. Todo tipo de campo tem configurações específicas ao seu propósito: - **Rótulo e descrição** — o que o respondente vê. - **Placeholder** — texto cinza dentro do campo que desaparece no foco. - **Obrigatório/opcional** — se o campo precisa ser preenchido. - **Validação** — regras de formato, valores mín/máx, limites de caracteres. - **Texto de ajuda** — contexto adicional exibido perto do campo. Mudanças de configuração aparecem na área de trabalho em tempo real. Digite um novo rótulo, e a área de trabalho atualiza. Ative "Obrigatório", e o asterisco aparece. Esse ciclo de feedback imediato significa que você está sempre olhando o estado atual do seu formulário. ### Duplicando Campos Selecione um campo e duplique para criar uma cópia idêntica. A cópia aparece diretamente abaixo do original com todas as configurações preservadas. Isso é mais rápido que adicionar um novo campo e reconfigurá-lo do zero. Duplicação é particularmente útil para estruturas repetitivas. Construindo um formulário com cinco perguntas de avaliação similares? Configure a primeira completamente — rótulo, escala, texto de ajuda, lógica condicional — depois duplique quatro vezes e mude apenas o rótulo de cada cópia. ## Desfazer e Refazer Erros acontecem. Você deleta o campo errado. Move um campo para a posição errada. Muda uma configuração e se arrepende imediatamente. Desfazer (Ctrl+Z / Cmd+Z) reverte a última ação. Refazer (Ctrl+Shift+Z / Cmd+Shift+Z) reaplica. O Instaform armazena até cinquenta entradas de desfazer, te dando um buffer de histórico profundo para sua sessão de edição. Essa profundidade importa porque construir formulários é iterativo — você pode tentar três arranjos de campo diferentes antes de decidir pelo certo, e precisa da capacidade de voltar atrás por todos eles. O sistema de desfazer/refazer cobre toda ação do construtor: adicionar campos, deletar campos, mover campos, mudar configurações, duplicar campos e modificar lógica condicional. Nada que você faz no construtor é permanente até você escolher salvar. ## Multi-Seleção Quando você precisa operar em múltiplos campos de uma vez, multi-seleção economiza tempo. Segure Shift ou Ctrl/Cmd e clique em múltiplos campos para selecioná-los como grupo. Campos selecionados ficam visualmente destacados na área de trabalho. Com múltiplos campos selecionados, você pode: - **Deletar** todos de uma vez. Remover uma seção de cinco campos leva uma ação em vez de cinco. - **Mover** como grupo. Reordene uma seção inteira arrastando o grupo para uma nova posição. - **Duplicar** juntos. Crie uma cópia de uma seção multi-campo instantaneamente. Multi-seleção é um recurso avançado para formulários complexos. Um formulário de trinta campos com cinco seções é muito mais fácil de reestruturar quando você pode selecionar, mover e duplicar seções inteiras em vez de campos individuais. ## Layouts em Linha para Formulários Multi-Coluna Por padrão, cada campo ocupa uma linha completa. Para formulários onde isso cria comprimento vertical desnecessário, layouts em linha permitem posicionar campos lado a lado. Padrões comuns de layout em linha: **Informações pessoais em duas colunas.** Nome e Sobrenome em uma linha. Email e Telefone em outra. Quatro campos em duas linhas em vez de quatro linhas. **Endereço em três colunas.** Cidade, Estado e CEP em uma linha. Isso combina com o modelo mental que as pessoas têm para endereços e economiza duas linhas de espaço vertical. **Colunas mistas.** Uma área de texto "Descrição" de largura total abaixo de uma linha de dois dropdowns "Categoria" e "Prioridade" em duas colunas. Misture e combine configurações de coluna para criar exatamente o layout que você precisa. Layouts em linha são particularmente eficazes no desktop, onde espaço horizontal é abundante. No mobile, o Instaform automaticamente empilha campos de linha verticalmente, garantindo que o formulário continue utilizável em telas pequenas sem nenhuma configuração adicional. ## Modo de Pré-visualização Antes de compartilhar seu formulário, pré-visualize exatamente como os respondentes vão vê-lo. O modo de pré-visualização remove a interface do construtor — a barra lateral, os painéis de configuração, as alças dos campos — e mostra o formulário em sua aparência de produção. Pré-visualize seu formulário tanto em viewports desktop quanto mobile. Um formulário que fica ótimo no desktop pode ter problemas de layout no mobile, especialmente se você está usando layouts em linha, rótulos longos ou conteúdo largo. A pré-visualização captura esses problemas antes dos respondentes encontrarem. Use o modo de pré-visualização para testar [lógica condicional](/blog/conditional-logic-guide) inserindo valores e observando campos aparecer, desaparecer, se tornar obrigatórios ou se auto-preencher. Percorra cada ramificação do seu formulário para verificar que a lógica funciona como pretendido. ## Do Construtor ao Formulário ao Vivo Uma vez que seu formulário está construído, o caminho para publicação é curto. Aplique seu [tema de marca](/blog/custom-themes-branding) para consistência visual. Escolha seu [método de incorporação](/blog/form-embed-options) — iframe, script ou popup — com base em onde o formulário vai ficar. Compartilhe o link ou cole o código de incorporação. O construtor drag-and-drop cuida da criação. O sistema de temas cuida da identidade visual. As opções de incorporação cuidam da distribuição. Juntos, te levam de ideia a formulário ao vivo sem escrever uma única linha de código.