Guia · 6 min de leitura
Formulários de pedido com total ao vivo: como criar um
Atualizado 2026-09-17
Resumo
Um formulário de pedido com total ao vivo usa campos numéricos para quantidade e preço por item, um campo calculado que os soma enquanto a pessoa digita, e uma formatação clara para que o total corrente pareça dinheiro, não apenas um número.
Um formulário de pedido sem um total corrente visível faz as pessoas fazerem conta de cabeça ou esperarem por um e-mail de confirmação para descobrir quanto estão pagando. Um total ao vivo elimina essa incerteza e pega erros de digitação (um zero a mais em um campo de quantidade) antes do envio, não depois. Este guia cobre a estrutura: campos, a fórmula e pequenos detalhes que tornam o total confiável.
Estruture os campos primeiro
Cada item pedível precisa de um campo de quantidade (número) e, se o preço variar, um campo de preço ou um valor fixo que você referencia diretamente na fórmula. Mantenha quantidade e preço como campos separados em vez de um único campo de texto combinado, já que um campo calculado precisa de entradas numéricas limpas para funcionar.
Para um catálogo fixo de itens, um campo de seleção por item com o preço embutido na opção, mais um campo de quantidade, costuma ser mais simples do que pedir que as pessoas digitem os preços elas mesmas.
Construa o total calculado
Um campo calculado pode referenciar cada campo de quantidade e preço em uma fórmula e atualizar o total ao vivo enquanto alguém preenche o formulário, antes mesmo de chegar ao envio. Para vários itens de linha, a fórmula soma a quantidade de cada item multiplicada pelo seu preço, e depois soma tudo.
Se você cobra imposto ou uma taxa fixa de frete, adicione-os como uma etapa própria na fórmula, em vez de misturá-los silenciosamente em uma única linha, para que o detalhamento continue legível caso você precise explicar um total a um cliente.
Mostre um detalhamento, não só um número
Um total único sem contexto parece arbitrário. Sempre que possível, mostre subtotal, imposto e frete como valores calculados separados, mesmo que só o total final fique em destaque, para que o número se explique sozinho, em vez de algo em que o cliente precise confiar cegamente.
Reduza erros de digitação
Campos numéricos devem impor limites sensatos, como um mínimo de 0 e um máximo razoável para quantidade, para que um erro de digitação não gere silenciosamente um total 100 vezes maior do que deveria. Campos obrigatórios em tudo que alimenta o total evitam que uma quantidade em branco quebre o cálculo.
O que acontece depois do envio
Um formulário de pedido não é, por si só, um processador de pagamentos; normalmente ele coleta os detalhes do pedido e o total, e depois redireciona para o checkout ou envia os detalhes para quem vai atender o pedido (por notificação de e-mail ou um webhook para outro sistema). Defina expectativas na mensagem de sucesso para que as pessoas saibam o que acontece a seguir, seja uma fatura, um link de pagamento ou uma ligação de confirmação.
No YeetForm, campos calculados atualizam totais ao vivo enquanto alguém preenche quantidades e preços, usando uma fórmula que referencia os outros campos diretamente, e um webhook pode encaminhar o pedido concluído para outro sistema assim que ele for enviado.