O Smart Chat Form é um projeto open source criado para transformar formulários comuns em experiências interativas, semelhantes a uma conversa de chat. Desenvolvido com JavaScript puro e Bootstrap 5, ele oferece uma jornada de preenchimento fluida, envolvente e moderna — sem precisar de dependências externas.
Em vez de exibir uma longa lista de campos, o Smart Chat Form conduz o usuário passo a passo, como se fosse uma conversa. Cada pergunta aparece em sequência, com animações suaves e respostas validadas em tempo real. O resultado é um fluxo natural, intuitivo e muito mais agradável para o usuário.
Esse tipo de abordagem conversacional já é tendência em UX/UI, pois reduz o abandono de formulários e aumenta significativamente as taxas de conversão.
Cada pergunta é configurada em um array JavaScript que define o tipo de campo, a validação e a condição de exibição. Por exemplo:
const questions = [
{
id: 1,
text: "Qual o seu nome?",
type: "text",
field: "nome",
validation: "required",
},
{
id: 2,
text: "Qual o seu CPF?",
type: "cpf",
field: "cpf",
validation: "cpf"
}
];
O script se encarrega de mostrar as mensagens, validar respostas, aplicar máscaras e salvar os dados no localStorage, garantindo que nada se perca se o navegador for fechado.
O Smart Chat Form já vem integrado à API de Localidades do IBGE, permitindo autocomplete em mais de 5.500 cidades brasileiras. A busca é otimizada com cache local e suporte a digitação sem acentos.
O formulário salva automaticamente as respostas no localStorage. O usuário pode exportar suas respostas em formato TXT ou JSON, ou simplesmente retomar o preenchimento após recarregar a página.
Todo o design pode ser personalizado editando o style.css. É possível ajustar cores, fontes, tema gradiente e até o comportamento das animações para adaptar à identidade visual da sua marca.
Em todos esses contextos, o Smart Chat Form oferece uma experiência mais humana, agradável e eficiente.
O projeto está disponível publicamente no GitHub sob licença MIT.
Você pode usar, modificar ou contribuir com novas features livremente.
Se você ainda acha que UX é só um problema do designer, sinto te informar: você está jogando contra o próprio time. Entender UX não é sobre saber usar Figma ou desenhar telas bonitas. É sobre entender como as pessoas usam aquilo que você codifica.
Se o usuário não sabe onde clicar, se perde, não entende uma mensagem de erro ou abandona um formulário… isso não é um problema só de design. É um problema seu também.
Um botão mal posicionado, um input sem máscara, uma API que responde uma mensagem técnica que o usuário nunca vai entender… tudo isso é UX ruim, vindo do desenvolvimento.
💡 “Se ninguém entende como usar, não adianta estar funcionando.”
Você não precisa ser designer. Mas se você escreve código, faz API, cria backend ou front… você precisa entender experiência de usuário. Isso é o que separa quem entrega sistema… de quem entrega solução.
O código perfeito não é o que funciona.
É o que funciona… e faz sentido pra quem usa.
Antes de mais nada, este não é um texto para dizer que programadores são mais inteligentes ou que usuários são leigos. Pelo contrário: é para lembrar que ambos os lados têm seus desafios — e que, no fim, todo sistema é feito por pessoas e para pessoas.
Quem nunca passou por isso: você entrega o sistema funcionando, validado, com mensagens claras… e no dia seguinte recebe um chamado:
“O sistema está com bug.”
Quando, na verdade, era só uma mensagem que o usuário não leu — ou não entendeu.
Isso não é burrice. É falta de UX.
Tentar usar um sistema que parece ter sido feito por um alienígena também não é fácil.
Quantos já tentaram preencher um formulário, erraram uma vírgula no CPF e tiveram que recomeçar tudo do zero? Frustrante, né?
É aqui que entra o verdadeiro herói: UX/UI. Design de interface não é sobre beleza — é sobre comunicação e usabilidade.
Se um sistema exige que o usuário pense como um programador, ele não é intuitivo. Se o desenvolvedor não se coloca no lugar do usuário, o sistema não é empático.
“Programar é construir pontes — não muros.”
Vamos trocar experiências? Seja como dev ou como usuário, comenta aqui e compartilha sua visão. 👇