Tipos clássico, conversacional e multistep

O Syncro tem 3 tipos de formulário. Cada um tem renderização e comportamento diferentes. Escolher o tipo certo impacta a taxa de conversão — formulário longo demais em layout errado afasta lead, e form curto em layout pesado fica cansativo. Esse artigo compara os 3 e ajuda a decidir.

Comparação rápida

Clássico

Como aparece

Todos os campos empilhados verticalmente numa única página, com botão Enviar no rodapé.

Quando usar

• Forms curtos — até ~5 campos.
• Landing pages com objetivo claro (cadastro newsletter, pedido de orçamento simples).
• Botão de fundo de site (rodapé "Fale conosco").
• Casos onde o usuário já chegou decidido e só quer mandar a info.

Exemplos práticos

• Newsletter (e-mail apenas).
• "Quero receber o ebook" (nome + e-mail).
• Pedido de orçamento simples (nome + telefone + tipo de produto).

Layouts disponíveis

Selecione na aba Layout da edição:

• Esquerda: form alinhado à esquerda da viewport (header tipo wave/landing).
• Centro (default): form centralizado.
• Direita: form à direita.

Vantagens

• ✅ User vê todos os campos de uma vez — entende o esforço total.
• ✅ Mais rápido pra preencher (sem cliques de "próximo").
• ✅ Mobile e desktop: comportamento idêntico.

Limitações

• ❌ Forms longos parecem cansativos (rolagem grande).
• ❌ Sem feedback intermediário (só erro no final).

Conversacional

Como aparece

Um campo por vez em fullscreen (100dvh), com barra de progresso no topo, animação de transição entre campos, e auto-advance em campos select/radio (assim que escolhe, vai pro próximo).

Inspirado em Typeform — sensação de "conversar" com o form.

Quando usar

• Captura mobile-first — fullscreen aproveita 100% da tela, dispensa zoom/scroll.
• Pesquisas (NPS, satisfação) — pergunta foca a atenção do user.
• Forms emocionais — onde o ritmo importa (ex: agendamento terapeuta, formulário de doação).
• Quem busca taxa de conversão alta em mobile — UX delicado.

Exemplos práticos

• Pesquisa NPS pós-atendimento.
• Cadastro pra evento (nome → e-mail → "vai presencial?" → "preferência alimentar?").
• Quiz de descoberta (8 perguntas com radio).
• Diagnóstico inicial pra chatbot.

Vantagens

• ✅ Conversão 2x maior em mobile vs clássico.
• ✅ Auto-advance em select/radio: 1 clique = próximo campo.
• ✅ Foco total — sem distrações na tela.

Limitações

• ❌ User não vê quantos campos no total (a barra ajuda, mas não é tão claro).
• ❌ Mais demorado pra preencher (anim de transição entre campos).
• ❌ Não suporta cards (apenas inputs e selects).

⚠️ Atenção: layout de conversacional é fullscreen fixo — não dá pra escolher Esquerda/Centro/Direita. A configuração de Layout é ignorada pra esse tipo.

Multi-step

Como aparece

Campos divididos em etapas (steps), com:

• Barra de progresso ou dots no topo (ex: 1 / 2 / 3).
• Botões Voltar e Próximo.
• Botão Enviar apenas no último step.

Quando usar

• Forms longos — 10+ campos.
• Cadastros completos de cliente (dados pessoais → empresa → preferências).
• Múltiplas seções lógicas (ex: Step 1 "Sobre você" / Step 2 "Sobre seu negócio" / Step 3 "Como podemos ajudar").
• Quando você quer reduzir abandono percebido — user vê "estou no step 2 de 3, falta pouco".

Exemplos práticos

• Cadastro completo de fornecedor (Step 1: Dados / Step 2: Endereço / Step 3: Documentos).
• Diagnóstico de empresa (Step 1: Setor / Step 2: Tamanho / Step 3: Desafios).
• Formulário de seguro (Step 1: Pessoa / Step 2: Veículo / Step 3: Cobertura).

Como configurar steps

1. Crie o form com tipo Multi-step.
2. No builder, sidebar mostra seção Etapas com botão + Adicionar etapa.
3. Cada step tem:

• ID (gerado automaticamente).
• Título (ex: "Sobre você", "Sua empresa", "Vamos finalizar").

4. Pra cada campo, no painel de config, escolha Pertence à etapa: dropdown de steps cadastrados.
5. Reordene steps arrastando.
6. Salve.

Vantagens

• ✅ Quebra forms longos em pedaços digestíveis.
• ✅ Validação por step (não deixa avançar se algum required estiver vazio).
• ✅ Progresso visual reduz abandono percebido.

Limitações

• ❌ Mais cliques (Próximo / Voltar).
• ❌ Conditional logic não pula step inteiro (só campos individuais).
• ❌ Layout: igual ao clássico (Esquerda/Centro/Direita).

Decidindo o tipo certo

Regra prática

Mobile vs desktop

• Maior parte do tráfego é mobile? → Conversacional.
• B2B, desktop dominante? → Clássico ou Multi-step (Multi-step se longo).

Tipo de perguntas

• Apenas inputs simples (texto/e-mail/tel)? → Clássico fica leve.
• Muitos selects/radios? → Conversacional brilha (auto-advance).
• Mistura de tipos + uploads? → Multi-step organiza bem.

Lógica condicional em cada tipo

A lógica condicional (mostrar campo só se outro tem valor X) funciona nos 3 tipos, mas o comportamento muda:

• Clássico: campo aparece/desaparece inline (sem reload).
• Conversacional: campo é pulado na sequência se condicional não bate (transição automática pro próximo válido).
• Multi-step: campo aparece/desaparece dentro do step atual. Não pula step inteiro.

Pra entender lógica condicional, veja o artigo Mapear campos para leads.

Limitações compartilhadas

Tipos de campo suportados (todos os 3 tipos)

11 tipos disponíveis: text (texto curto), textarea (texto longo), email, tel (telefone com bandeira), number, select (dropdown), checkbox, radio, file (upload), heading (título visual), divider (separador).

Conversacional NÃO suporta

• Heading e divider ficam visualmente estranhos (são campos visuais, não inputs).
• File upload funciona mas a UX é menos polida (recomendamos clássico/multistep pra forms com upload).

Multi-step requer

• Pelo menos 1 step criado antes de adicionar campos. Se nenhum step existe, builder cria 1 step "Etapa 1" automaticamente.
• Cada campo precisa estar em algum step. Campos sem step ficam órfãos (não aparecem no public).

SDK e tipos

⚠️ Importante: o SDK de embed (<script> no seu site) só renderiza o tipo classic. Conversacional e multistep só funcionam via link hospedado (/f/{slug}) por causa da complexidade de transições/slides.

Se você quer embed inline ou popup no seu site, escolha clássico. Se quer formulário conversacional/multistep, use link hospedado (botão "Acesse o formulário" no site → abre /f/{slug} em outra aba ou redireciona).

Veja Embedar no site via SDK pra detalhes.

Mudar tipo após criar

Sim, é possível. Edite o form → aba Geral → muda o select de tipo. Mas:

• ⚠️ Classic → Multi-step: cria 1 step default, todos os campos viram órfãos (precisam ser re-mapeados pros steps no builder).
• ⚠️ Multi-step → Classic: campos perdem step_id mas continuam funcionando. Steps cadastrados são ignorados.
• ⚠️ Conversational → Classic: fluxo idêntico, sem perda.

💡 Dica: se vai mudar pra multistep, antes anote em qual step cada campo deve estar. Depois da mudança, abra o builder e mova um por um.

Próximos passos

• Pra montar os campos do form, veja Mapear campos para leads.
• Pra entender layout/cor, veja Personalizar cores e logo.

Artigos relacionados

• Criar formulário
• Mapear campos para leads
• Embedar no site via SDK
• Personalizar cores e logo