Criar um formulário padrão

Este guia percorre o formulário inteiro, na ordem em que o editor o apresenta.

1. Abra o editor Customize

   Acesse Quote settings. Na página Request a Quote, encontre o card Customize e clique em Customize. O editor é aberto em tela cheia.

2. Abra a aba Quote form

   O editor tem quatro abas: Button & widget, Quote form, Quote cart page e Success message. Abra Quote form.

3. Comece por um modelo

   Form template mostra o modelo em que seu formulário se baseia, com uma breve descrição de para quem ele serve.

   Clique em Change. Um seletor é aberto, com o título Choose a form template e a observação “Select a starting point. The form fields will change only after you confirm.” São três:

   Modelo	Como o app o descreve	Marcação
   Simple quote form	"Best for most stores. Includes login autofill, contact details, company, quantity, request message, and file upload."	Fast setup · 7 fields
   Detailed quote form	"For custom orders, delivery, installation, or project-based quotes. Includes login autofill guidance."	More details · 14 fields
   B2B customer form	"For wholesale or business buyers who need company, shipping, billing, and payment term information"	B2B

   Escolha aquele cuja descrição corresponde ao trabalho que você cota e clique em Use this template para confirmar. Cancel mantém seu formulário atual. Faça isso agora, antes de começar a editar os campos.

   

   Comece por um modelo em vez de um formulário vazio.

   Cuidado

   Escolher outro modelo substitui a lista de campos atual. As seções e os campos na tela são trocados pelos do novo modelo, então qualquer seção que você adicionou, qualquer campo que renomeou e qualquer coisa que removeu vai junto. Escolha o modelo primeiro e personalize depois.

4. Decida se o formulário aparece nas páginas de produto

   Em Product page form display (“Show the quote form directly on product pages”), marque Enable product page form display se quiser que as pessoas clientes preencham o formulário sem sair do produto.

   Ao marcá-la, aparece Form position on product page, uma lista suspensa com três opções:

   Posição	Onde o formulário fica
   Below Add to Cart button	No alto da página, logo abaixo dos botões de compra: a opção mais visível.
   Below product description	Depois do texto de vendas, para quem já o leu.
   Below product information	No fim do bloco de informações do produto.

   

   Desative esta configuração se preferir que as pessoas clientes montem primeiro um carrinho de cotação.

5. Percorra o Form builder

   O Form builder (“Manage sections, rows, fields, and validation with the visual form builder”) reúne suas perguntas, agrupadas em seções. Quais seções existem depende do modelo que você acabou de escolher:

   Modelo	Seções no construtor
   Simple quote form	Contact information · Extra info
   Detailed quote form	Contact information · Shipping address · Extra info
   B2B customer form	Contact information · Company information · Shipping address · Billing address · Payment terms · Extra info

   Três coisas que você pode fazer com uma seção:

   • Ativá-la ou desativá-la. Abra as configurações da seção e marque ou desmarque Enable. Uma seção desativada não aparece para a pessoa cliente, por mais campos que tenha.
   • Renomeá-la. O mesmo painel de configurações tem um Label: altere-o para como quem compra de você o chamaria.
   • Movê-la. Arraste a seção pela alça para reordenar o formulário.

   Expanda uma seção com a seta para ver os campos dela e use Add element para adicionar outro campo a essa seção.

   Os campos de contato e de endereço estão em Campos de informações do cliente; empresa, cobrança e condições de pagamento estão em Criar um formulário B2B.

   Nota

   Controles do construtor desativados com uma linha de cadeado (“🔐 This feature is available on …”) significam que o recurso está em um plano superior. Nada está quebrado: abra Pricing plans no app para ver o que o seu inclui.

6. Edite um campo

   Clique em qualquer campo do construtor e as configurações dele são abertas, com o nome do campo e “Customize how this field appears on the form.” no topo.

   Configuração	O que faz
   Label	O texto que a pessoa cliente lê. É a configuração que mais se altera.
   Hide label	Mantém o campo, mas remove o rótulo acima dele.
   Placeholder	O texto de exemplo em cinza dentro da caixa vazia. Use-o para o formato que você quer: "e.g. 500 units" é melhor do que uma caixa em branco.
   Help text	Uma linha abaixo do campo, para o que for longo demais para um placeholder.
   Type	Que tipo de campo é e o que a pessoa cliente pode digitar nele.
   Required	O formulário não é enviado sem ele. Peça o menor número possível de campos obrigatórios.
   Options / Add option	As opções de uma lista de seleção, de um grupo de botões de opção ou de um grupo de caixas de seleção.
   Choose default value	Com o que o campo começa quando o formulário é carregado.
   Limit characters	Ativa Min characters e Max characters.
   Column width	Quanto da linha o campo ocupa, para que dois campos curtos fiquem lado a lado.
   Custom HTML class	Um nome de classe para o seu próprio CSS. Consulte Adicionar CSS personalizado.
   Remove	Exclui o campo. Está disponível apenas nos seus próprios campos: os campos de contato e endereço nativos são protegidos e não têm Remove.

   

   Clique em cada elemento e configure mais detalhes (se necessário)

   Termine com Save changes no painel do campo ou com Cancel para descartar a edição.

   Cuidado

   Limit characters é validado enquanto você digita: Min characters e Max characters devem ser, cada um, um número inteiro igual ou maior que 0, e o mínimo não pode ser maior que o máximo. Se errar, o editor bloqueia o salvamento.

7. Coloque os campos na ordem desejada

   Os campos são reordenados por arrastar. Segure um campo pela alça de arrasto na extremidade esquerda da linha e solte onde quiser. As seções têm a própria alça de arrasto e se movem da mesma forma.

   A ordem importa mais do que parece: um formulário que pede o CEP de entrega antes de pedir o nome parece um banco de dados, não uma conversa.

   

   Arraste e solte o elemento para alterar a posição/ordem dele no formulário de cotação

8. Adicione suas próprias perguntas

   Extra info começa com o que o seu modelo coloca ali, e isso varia conforme o modelo. O Simple quote form vem com Quantity e Upload files; o Detailed quote form, com Project detail e Delivery service; o B2B customer form, com Message.

   Use Add element para adicionar qualquer outra coisa de que precise: prazo de entrega, data de entrega, referência do projeto.

   Se um grupo de perguntas pertence ao mesmo assunto e não cabe em uma seção existente, use Add section para criar uma nova.

   Perigo

   Um campo não é opcional: o formulário precisa ter um elemento cujo name contenha a palavra email. O app bloqueia o salvamento e avisa: Add an element whose name contains “email”. Otherwise, customers won’t receive the quote email. Sem ele, nada do que você cota chega à pessoa cliente.

   

   Clique em Add element para adicionar mais campos personalizados ao formulário de cotação

   

9. Defina o estilo do formulário

   Style mostra o predefinido que seu formulário está usando, com um botão Change que abre os demais. Os predefinidos são Material filled, Classic, Flat, Flat round, Classic round, Line, Line round e Material outlined, cada um mostrado como uma pequena imagem do campo, então escolha pelo visual, não pelo nome.

   Ao lado está Match theme styling if possible. Marque-a e o formulário usa as fontes e os campos do seu próprio tema, o que costuma ser o caminho mais curto para um formulário que não parece colado. O app observa que “Theme styling applies on your storefront and is not shown in this preview”, então avalie essa opção na loja virtual, não aqui.

   Customize text define Font style, Title bar font size e Title bar font weight. Customize form color define as cores individuais: Title bar color, Title bar background, Color, Background color, Border color, Button color, Button background color, Button border e Quote popup primary color.

   

   Detalhes completos: Combinar com o estilo do seu tema.

10. Releia o formulário na Preview

    O painel Preview fica ao lado do editor e é redesenhado enquanto você trabalha. Dois controles da barra de ferramentas valem a pena antes de salvar:

    • O botão de estado do cliente, que alterna a prévia entre Guest e Logged-in: eles veem formulários diferentes.
    • O alternador de desktop e celular, porque um formulário longo é outra coisa em um celular.

11. Salve e teste você mesmo

    Altere qualquer coisa e a barra de salvamento da Shopify aparece com Save e Discard changes. Clique em Save. Se um campo ainda tiver erro de validação, o editor recusa e diz “Please resolve validation errors before saving.”: corrija o campo indicado e salve de novo.

    Depois acesse a sua loja virtual e envie uma solicitação de teste de verdade. Confirme que ela chega em Quote list com tudo o que você esperava.

    

    O formulário na loja virtual, com Quote form appearance definido como Multiple step.

Nota

O modelo define seu ponto de partida, não o seu limite. Tudo o que o modelo traz pode ser editado ou removido, e tudo o que ele deixa de fora pode ser adicionado com Add element ou Add section. Só lembre que trocar de modelo depois é recomeçar, e não editar: a lista de campos que você montou é substituída.

Cuidado

Sempre envie você mesmo uma solicitação de teste antes de publicar. É a única forma de confirmar que os campos, o e-mail e o registro da cotação estão alinhados.

Onde ficam as demais configurações

A aba Quote form trata apenas das perguntas. Várias coisas que as pessoas procuram aqui estão nas outras abas do mesmo editor:

O que você quer	Aba	O que você vai encontrar
O formulário em uma página ou em etapas	Quote cart page	Quote form appearance ("Controls how the quote form looks on the quote cart page"), definido como Multiple step ou Single page.
O que as linhas de produtos mostram	Quote cart page	Product list columns ("The product details shown as columns in the customer's quote cart"). Consulte Grupo de produtos da cotação.
Permitir que as pessoas clientes agrupem produtos	Quote cart page	Enable Quote Sections ("Lets customers group the products in their quote cart into named sections"). Consulte Grupo de produtos da cotação.
O texto e a posição do botão	Button & widget	Texto do botão, ação ao clicar, posição do botão e quem pode vê-lo.
O que acontece depois do envio	Success message	O texto de agradecimento e Redirect to custom URL.

Nota

O próprio editor avisa sobre isso se você tentar mudar de aba no meio de uma edição: “Save your changes before switching tabs to avoid losing them.”

Próximos passos

• Campos de informações do cliente: ajuste o que você pede
• Grupo de produtos da cotação: colunas de produtos e seções de cotação na página do carrinho de cotação
• Adicionar reCAPTCHA: proteja o formulário contra spam
• Criar um formulário B2B: o modelo para quem compra no atacado