Montar o formulário

O construtor é onde você decide o que um formulário de candidatura pergunta. Você adiciona campos, agrupa-os em linhas, divide o formulário em páginas e configura cada campo. A visualização no centro mostra o formulário como quem compra o vê na sua loja.

Nota

Para abrir o construtor, acesse Forms no Sami B2B Onboarding e clique em Edit ao lado de um formulário, ou clique no nome do formulário. Somente a equipe com a função de administrador pode editar formulários.

O construtor em resumo

Área	Onde	Para que serve
Section rail	Extrema esquerda	Alterna entre Elements, Appearance, After submit, Email e Integrations. Collapse reduz a barra a ícones.
Elements panel	Esquerda	A estrutura do formulário: Header no topo, Content, cada página com seus campos e linhas, Add page e Footer no final.
Preview	Centro	O formulário como quem compra o vê. Clique em um campo, no título de uma página, no cabeçalho ou nos botões para selecioná-los.
Settings panel	Direita	Abre quando você seleciona algo e mostra as configurações do item. Clique em × (Close) para fechar.
Toolbar	Acima da visualização	A caixa Form name, o selo Active ou Draft, … (More actions), Language, os botões de visualização para computador e celular, o botão do inspetor e Preview.

O Elements panel lista todas as páginas, linhas e campos na ordem em que quem compra os encontra.

As outras seções da barra têm suas próprias páginas:

Seção	O que você define nela	Saiba mais
Appearance	Layout, largura, fonte, estilo dos campos e cores.	Personalizar o design do formulário
After submit	A mensagem de agradecimento ou uma página para a qual enviar quem comprou.	Depois que a pessoa compradora envia
Email	Quem recebe avisos sobre este formulário e a versão própria deste formulário de cada e-mail.	Editar modelos de e-mail e Escolher quem é notificado
Integrations	Para onde as respostas vão na Shopify, além de Klaviyo, webhooks, preenchimento automático de endereço e captcha.	Mapear respostas para a Shopify

Adicionar um campo

1. Abra a lista de campos

   Use a opção que estiver mais perto:

   • No Elements panel, clique em + (Add field) ao lado do nome da página ou em Add field no final da página. Dentro de uma linha, clique em Add element para adicionar o campo a essa linha.
   • Na visualização, clique em Add a field no final da página.
   • Na visualização, aponte para a borda de um campo e clique no + que aparece. A dica dele diz Add field above, Add field below, Add field to the left ou Add field to the right. Esquerda e direita colocam o novo campo ao lado deste em uma linha.

2. Encontre o campo

   Role a lista ou digite em Search fields para filtrar.

   

   Os campos são agrupados por tipo, e Add all em um bloco de endereço adiciona um endereço inteiro com um clique.

3. Adicione-o

   Clique no campo. Ele é adicionado à página e selecionado, e as configurações dele abrem à direita. Dê um rótulo a ele e configure-o (veja Configurações do campo).

Cuidado

Todo formulário mantém um campo Email e um campo salvo como o nome da empresa. O campo Email não pode ser removido nem ocultado, e Save é recusado com Map a field to Company · Name. se nenhum campo estiver salvo como o nome da empresa.

Campos que você pode adicionar

Grupo	Campo	O que quem compra recebe
Basic fields	Short text	Uma caixa de texto de uma linha.
	Long text	Uma caixa de texto para várias linhas.
	Number	Uma caixa que aceita apenas números.
	Email	Uma caixa que verifica se a resposta parece um endereço de e-mail.
	Phone	Uma caixa de número de telefone, com bandeira do país, código de discagem e verificação do número opcionais.
	Country	Uma lista de países.
	State / province	Uma lista dos estados ou das províncias do país escolhido no campo Country que vem antes dele na página. Aparece quando a pessoa escolhe um país que tem estados e é uma caixa de texto simples quando nenhum campo Country vem antes.
	Dropdown	Uma lista para escolher uma opção, ou várias com Allow multiple choices.
	Checkbox	Uma única caixa de seleção, como “Concordo com os termos”. Quando é obrigatória, a pessoa precisa marcá-la.
	Checkboxes	Uma lista de opções em que a pessoa pode marcar quantas quiser.
	Radio buttons	Uma lista para escolher uma opção, com uma opção Other opcional que a pessoa digita.
	Date and time	Um seletor de data, um horário ou ambos.
	File upload	Uma caixa de upload. Por padrão, aceita arquivos PDF, JPG, JPEG e PNG de até 10 MB.
Company fields	Company name	Uma caixa de texto salva como o nome da empresa.
	Tax ID	Uma caixa de texto para o número fiscal ou de IVA da empresa. As verificações de tax ID do app leem este campo.
	Website	Uma caixa de texto para o site da empresa.
Document fields	Business license, Tax certificate, Tax registration, Reseller certificate	Uma caixa de upload. O arquivo é guardado com a candidatura como esse tipo de documento. Veja Documentos.
Static text	Heading	Um título com uma legenda opcional abaixo.
	Paragraph	Texto formatado, como instruções.
	HTML	Sua própria marcação HTML.
	Divider	Uma linha horizontal.
Address blocks	Shipping address	Dez campos em uma linha: Recipient / department, First name, Last name, Phone, Address line 1, Address line 2, City, Country, State / province e ZIP / postal code. Clique em Add all.
	Billing address	Uma caixa de seleção Same as shipping address e, depois, dez campos de cobrança (Department / attention, Billing first name e assim por diante) em uma linha que fica oculta enquanto a caixa está marcada. Clique em Add all.
Layout	Row	Uma linha vazia para colocar campos. Veja Agrupar campos em linhas.

Para adicionar um único campo de endereço em vez de um bloco inteiro, clique em Show the individual address fields em Address blocks. Os campos que um bloco de endereço adiciona não são salvos na Shopify até você mapeá-los. Veja Mapear respostas para a Shopify.

Configurações do campo

Clique em um campo na visualização ou no Elements panel. As configurações dele abrem à direita, em seções. Você só vê as seções que se aplicam àquele tipo de campo.

Seção	Configurações
Content	Label, a pergunta que quem compra lê. Placeholder, o texto claro dentro de uma caixa vazia. Help text, exibido abaixo do campo. Default, uma resposta preenchida quando o formulário abre (para um único Checkbox: Ticked by default).
Options	Para Dropdown, Checkboxes e Radio buttons. Clique em Add option ou Change para editar as opções: digite o Label de cada opção, arraste para reordenar, Add another option ou Bulk add uma opção por linha. As Customer tags são adicionadas ao cliente na Shopify quando quem escolheu aquela opção é aprovado (até 40 caracteres cada). Desative Use the label as the value para guardar algo diferente do que quem compra lê. Um Dropdown também tem Allow multiple choices. Radio buttons também têm Other option, Other label e Other placeholder.
Upload	Para File upload e campos de documento. Accepted: Only certain file types (depois liste-os em File types) ou Any file type. Max size: de 1 a 20 MB. Allow more than one file.
Phone number	Show country flag and dial code. Com ele ativado: Check the number is valid e Default country (From the buyer’s browser a menos que você escolha um).
Date and time	Asks for: Date, Time ou Date and time. Date format, Time format, Other language para o seletor de data e Limit the range com Earliest e Latest.
Validation	Required. Com ele ativado, Error message, exibida quando o campo fica vazio; digite {{ label }} para incluir o rótulo do campo. Limit characters com Min characters e Max characters, para Short text, Long text, Email, Phone e Tax ID. Deixe um limite em branco para não ter limite.
Layout	Icon, desenhado no início da caixa (não para Checkbox, Checkboxes, Radio buttons nem uploads). Hide label, com Keep the label’s space e Still show the required mark. Column width, de 1 a 12. Number of options per line, de 1 a 5, para Checkboxes e Radio buttons.
Visibility	Conditional display: mostrar, ocultar, exigir ou desativar o campo com base em respostas anteriores. Veja Mostrar, exigir ou desativar campos com regras.
Custom CSS	Custom CSS class, um nome de classe que você pode estilizar com o CSS do seu próprio tema. Somente nomes de classe simples são mantidos.

Para Dropdown, Country e State / province, o placeholder é a primeira linha da lista, Select… por padrão. Se você o esvaziar, Select… volta.

O texto estático tem menos configurações. Um Heading tem o texto em Label, além de Caption e Heading tag (Heading 1 a Heading 6). Um Paragraph tem Text, e HTML tem Markup. O Label deles é apenas o nome que você vê no Elements panel. Todo texto estático também tem Column width, Visibility e Custom CSS.

As configurações de um campo são agrupadas em seções, do que quem compra lê até quando o campo aparece.

Organizar os campos

Mover um campo

• No Elements panel: arraste um campo pela alça. Solte-o sobre outro campo para colocá-lo acima ou abaixo, sobre o nome de uma página para movê-lo para o final dela ou sobre o nome de uma linha para colocá-lo nessa linha.
• Na visualização: clique em um campo e arraste-o pela alça à esquerda da barra de ferramentas dele (Drag to move this field). Solte-o na borda superior ou inferior de outro campo para colocá-lo acima ou abaixo. Solte-o na borda esquerda ou direita para colocar os dois lado a lado em uma linha.

Definir a largura das colunas

As larguras são contadas em 12 colunas, e todo campo novo começa em 12, a largura total. Campos que se seguem dividem uma linha quando as larguras cabem, então dois campos com 6 ficam lado a lado e três com 4 formam três colunas.

• Arraste Layout › Column width nas configurações do campo, ou
• Clique em Change width na barra de ferramentas do campo selecionado na visualização. Ele alterna entre um terço, metade e a largura total.

Quando o formulário tem menos de 480 pixels de largura, por exemplo em um celular, cada campo ocupa a linha inteira.

Agrupar campos em linhas

Uma linha mantém os campos juntos e pode abri-los com um cabeçalho: um rótulo e uma descrição acima dos campos. Você pode mostrar, ocultar ou mover uma linha inteira de uma vez.

Para criar uma linha, faça uma destas coisas:

• Abra a lista de campos e clique em Row em Layout. Uma linha vazia aparece no Elements panel. Clique em Add element dentro dela para adicionar campos.
• Abra a lista de campos e clique em Select fields (exibido quando a página tem dois ou mais campos fora de linhas). Marque os campos no Elements panel e clique em Group into row.
• Adicione um campo à esquerda ou à direita de outro, ou solte um ao lado de outro na visualização.

Clique no nome da linha no Elements panel para abrir as configurações dela:

Configuração	O que faz
Label	O título da linha. Quem compra o vê acima dos campos da linha.
Hide the heading block	Oculta o rótulo e a descrição de quem compra. Eles são mantidos e voltam quando você desativa esta opção.
Description	Texto exibido abaixo do rótulo.
Icon	Um ícone ao lado do rótulo.
Conditional display	Mostra ou oculta a linha inteira com base em respostas anteriores. Veja Mostrar, exigir ou desativar campos com regras.
Ungroup row	Desfaz a linha. Os campos dela permanecem na página.

No Elements panel, o ícone de olho da linha oculta todos os campos dela e Duplicate row a copia. Para tirar um campo de uma linha, selecione o campo e clique em Remove from row.

O formulário Wholesale application usa linhas com o bloco de título oculto, porque cada seção já começa com um campo Heading.

Usar várias páginas

1. Adicione uma página

   Clique em Add page na parte inferior do Elements panel. Uma página chamada Untitled page 2 é adicionada e as configurações dela abrem. Digite um novo Page name e pressione Enter.

2. Transforme as páginas em etapas

   Clique em Content no Elements panel e ative Show step progress bar. Escolha Step labels: Name and number, Name only ou Number only.

   Quem compra passa a ver uma página por vez, com uma barra de etapas no topo. Cada página termina com um botão Continue que verifica as respostas da página antes de avançar, e a última página termina com o botão de envio. Sem a barra de etapas, todas as páginas aparecem uma após a outra em um único formulário.

3. Escolha se quem compra pode voltar

   Toda etapa depois da primeira tem um botão Back, porque Let buyers go back a step começa ativado. Para alterar, clique em Footer no Elements panel. Desative Let buyers go back a step para remover o botão ou altere Back label. Essas configurações só aparecem enquanto a barra de etapas está ativada e o formulário tem duas ou mais páginas.

Clique no nome de uma página no Elements panel para ver as configurações dela:

Configuração	O que faz
Page name	O nome da página no construtor e na barra de etapas.
Hide the heading block	Faz a página começar no primeiro campo. O título e a descrição são mantidos para depois.
Heading e Description	Exibidos no topo da página.
Continue button label	O texto do botão Continue da página. Não aparece na última página.
Icon	Substitui o número desta etapa na barra de etapas. Exibido apenas com a barra de etapas ativada.
Header and footer	Use custom header e Use custom footer dão a esta etapa o próprio texto de cabeçalho e uma nota. Enquanto quem compra pode voltar, o rodapé personalizado também tem Show Back button on this step. Exibido apenas com a barra de etapas ativada.
Visibility	Mostra ou oculta a página inteira com base em respostas de páginas anteriores.
Delete page	Exclui a página e os campos dela. Um formulário precisa de pelo menos uma página, e a página que contém o campo Email não pode ser excluída até você mover esse campo.

Cabeçalho e rodapé

Clique em Header no topo do Elements panel ou no título na visualização:

• Show store logo e, depois, Upload image: um arquivo .jpg, .png ou .svg de até 1 MB, com cerca de 200×60 pixels.
• Heading e Subheading no topo do formulário.
• Show this block para mostrar ou ocultar o cabeçalho inteiro.

Clique em Footer na parte inferior do Elements panel ou nos botões na visualização:

• Submit label, o texto do botão de envio.
• Reset button e Reset label, um botão que limpa o formulário.
• Full-width buttons ou Alignment: Left, Center ou Right.
• Note, texto exibido junto aos botões, e Put the note above the buttons.

Ocultar, copiar ou remover um campo

• Hide this block (o ícone de olho no Elements panel ou na barra de ferramentas do campo) tira o campo do formulário para quem compra, mas o mantém, com as configurações, no construtor. O campo sai da visualização e fica acinzentado no Elements panel. Clique no olho dele ali para trazê-lo de volta.
• Duplicate field coloca uma cópia logo depois do campo e a seleciona.
• Remove field (na barra de ferramentas ou na parte inferior do painel de configurações) exclui o campo quando você salva.

Visualizar o formulário

• Desktop preview e Mobile preview alternam a largura da visualização.
• O botão do inspetor (o ícone de alvo) alterna entre editar e testar. O inspetor está ativado quando o construtor abre, e o botão exibe Deactivate inspector: clicar seleciona itens para editar, e as regras não são executadas, então um campo que uma regra ocultaria continua aparecendo. Clique nele para desativar o inspetor e preencher a visualização como quem compra: as regras são executadas, e Continue e o botão de envio verificam suas respostas. Nada é enviado. Clique nele de novo (Activate inspector) para voltar a editar. O atalho é ⌘ Shift I no Mac ou Ctrl Shift I no Windows.
• Language mostra o formulário em um idioma para o qual você o traduziu. Textos ainda não traduzidos aparecem em inglês. Para traduzir, escolha Translate this form em … (More actions), que abre Translate.
• Preview (o ícone de olho) abre a página do formulário na sua loja em uma nova guia. Funciona depois que o formulário é salvo e publicado.

Salvar as alterações

Clique em Save na barra de salvamento. Uma mensagem Form saved aparece e, se o formulário estiver Active, quem compra recebe a nova versão imediatamente. Discard descarta tudo o que foi feito desde o último salvamento.

Se algo precisar ser corrigido, o salvamento é recusado e um banner no topo da visualização lista cada problema, como Enter a form name ou dois campos salvos no mesmo campo da Shopify. Quando uma linha termina com um botão de seta, clique nele para ir direto ao campo ou à configuração.

Próximos passos

• Mostrar, exigir ou desativar campos com regras: faça uma pergunta só quando uma resposta anterior pedir.
• Mapear respostas para a Shopify: escolha onde cada resposta é salva na aprovação.
• Personalizar o design do formulário: combine o formulário com a aparência da sua loja.
• Criar e publicar um formulário: publique o formulário e confira-o na sua loja.