Gerador de formulário de pedido: versões web e papel
Gerador de formulário de pedido
Gerador de formulário de pedido: formulário HTML e modelo para imprimir
Liste seus produtos e preços e receba um formulário de pedido de dois jeitos: HTML para copiar, com total ao vivo, que envia para o seu próprio serviço de formulários, e uma folha de papel para imprimir.
Adicione cada produto com o seu preço, escolha quais dados do cliente coletar e cole o endereço do seu serviço de formulários. Você recebe o HTML de um formulário de pedido com campos de quantidade e total atualizado na hora, pronto para colocar no seu site, além de uma folha de pedido em papel feita a partir da mesma lista, para feiras, eventos e pedidos por telefone.
O que o formulário gerado envia
Campo no formulário
Enviado ao seu serviço como
Observações
Campo de quantidade por produto
qty_<product> = número
type=number, mínimo 0, números inteiros
Nome do cliente
Obrigatório
E-mail
type=email, verificado pelo navegador
Telefone (opcional)
type=tel
Endereço de entrega (opcional)
Textarea
Observações (opcional)
Textarea
Total do pedido
Não enviado
O elemento output é só para exibição; recalcule do seu lado
Muitos pequenos vendedores não precisam de uma loja virtual completa. Uma padaria recebendo encomendas de fim de ano, um sítio vendendo cestas de produtos ou um clube vendendo uniformes só precisam de uma lista, uma quantidade ao lado de cada item e os dados de contato do comprador. Este gerador escreve exatamente isso em HTML simples, então funciona em qualquer criador de sites que aceite código personalizado.
Digite o nome de cada produto e o seu preço. Adicione ou remova linhas conforme precisar.
Defina o símbolo da moeda e marque os campos opcionais do cliente que você quer.
Cole o endereço para onde o formulário deve enviar os dados. Ele vem do seu serviço de formulários ou do seu próprio servidor.
Teste a prévia: mude as quantidades e veja o total se atualizar.
Copie o HTML para o seu site, ou clique em Imprimir formulário em papel para ter uma folha que os clientes preenchem à mão.
Trate o total na página como uma referência para o cliente. Calcule o valor real você mesmo a partir das quantidades recebidas.
Mantenha os nomes dos produtos curtos e únicos: eles viram parte dos nomes dos campos que o seu serviço recebe.
Faça um envio de teste para você mesmo antes de divulgar a página e confira o e-mail ou a planilha que chega.
Se você precisa receber o pagamento no momento do pedido, só o formulário não basta; combine-o com um link de pagamento ou um checkout de verdade.
Na folha impressa, deixe as colunas Qtd. e total da linha em branco e acrescente seu telefone para dúvidas.
Perguntas frequentes
Para onde vai o pedido quando alguém envia?
Para o endereço no atributo action do formulário, enviado com method post. Esse endereço precisa pertencer a algo que aceite envios de formulário, como um serviço de backend de formulários ou um script no seu próprio servidor. Esta página não recebe nem guarda pedidos.
Por que o total não está nos dados enviados?
O total fica em um elemento output, e o conteúdo de um elemento output não é enviado com o formulário. Isso é proposital aqui: um visitante poderia editar um número no navegador, então o vendedor deve sempre calcular o valor a partir das quantidades.
O total funciona sem JavaScript?
O formulário continua sendo enviado sem scripts, mas o total atualizado é calculado por um pequeno script incluído no código. Se os scripts estiverem desativados, o total simplesmente fica em zero.
Qual a diferença para um formulário de agendamento?
Um formulário de pedido coleta produtos e quantidades. Um formulário de agendamento coleta uma data, um horário e um serviço. Para horários marcados, use o nosso gerador de formulário de agendamento.
Posso estilizar o formulário para combinar com o meu site?
Sim. O código usa um pequeno bloco de estilo com nomes de classe simples que começam com of-, então você pode mudar cores, fontes e espaçamentos sem afetar o resto da página.
Escolhendo um serviço de formulários
Uma página web estática não consegue enviar e-mail sozinha. O formulário precisa de um lugar para onde enviar os dados: um serviço de backend de formulários que encaminha os envios para o seu e-mail ou uma planilha, o recurso de formulários do seu criador de sites ou um pequeno script no seu próprio servidor.
Seja qual for, copie o endereço de envio exato que ele fornece para o campo de serviço acima. Se ele pedir nomes de campo específicos, renomeie os campos no código para combinar.
Folhas de pedido em papel ainda valem a pena
Em uma barraca ou em um evento da escola, uma prancheta com uma folha de pedido impressa é mais rápida do que pedir às pessoas que abram um site. Imprimir a partir da mesma lista de produtos mantém os preços do papel e da web idênticos.
Junte as folhas e, no fim do dia, digite você mesmo os pedidos no formulário web, para que tudo chegue em um só lugar.
Recalcule o total onde o pedido chega
Seu serviço recebe quantidades, não um total confiável. Este pequeno exemplo em JavaScript, do lado do servidor, calcula o preço de um pedido a partir da sua própria tabela de preços e ignora qualquer coisa desconhecida.
Calcular o preço de um pedido a partir das quantidades enviadas
Os preços ficam do seu lado, então um visitante que edite a página não consegue mudar quanto deve.
Monte seu formulário de pedido
Título do formulário
Símbolo da moeda
Endereço do serviço de formulários (para onde os pedidos são enviados)
Produtos e preços
Produto {n}
Preço {n}
Remover produto {n}
Adicionar produto
Campos opcionais do cliente
Endereço de entrega
Observações
Prévia
Quantidade de {v}
Total
A prévia não envia nada. Seu formulário envia para o endereço de serviço que você informou.