Personalizar o design do formulário

As configurações de Appearance do Sami B2B Onboarding mudam a aparência de todo o formulário: fonte, tamanho, largura, estilo dos campos e cores. Elas valem para um formulário, então cada um deles pode ter a própria aparência, e nunca alteram o seu tema.

Abra as configurações de Appearance

1. Abra o formulário

   Acesse Forms e clique em Edit ao lado do formulário. O construtor abre.

2. Abra Appearance

   Na barra à esquerda, clique em Appearance. O painel lista todas as configurações abaixo, e a visualização no centro muda conforme você as altera.

   

   Cada configuração de Appearance altera a visualização imediatamente.

3. Salve

   Quando o formulário estiver como você quer, clique em Save na barra de salvamento. Se o formulário estiver publicado, quem compra vê a nova aparência na próxima vez que o abrir.

Configurações de Appearance

Configuração	O que altera	Padrão
Font	A fonte de todo o formulário. Abre o painel Select font.	Theme default
Font size scale	O tamanho de todo o texto do formulário, de 80% a 130% do tamanho do seu tema, em passos de 5%.	100%
Width	A maior largura do formulário, em px (320 a 1200) ou % do espaço em que ele fica (30 a 100). O formulário é centralizado e se estreita em telas pequenas.	640 px
Layout	Default coloca os campos direto na página. Boxed coloca o formulário em um card próprio, com espaçamento interno e borda.	Default
Style	A aparência de cada caixa de campo. Veja Estilos de campo.	Classic
Field spacing	O espaço entre os campos: Comfortable ou Compact.	Comfortable
Color scheme	As cores de fundo, de texto e de botão do formulário. Veja Cores.	Default
CSS class	Adiciona ao formulário um nome de classe seu, para que estilos do seu tema possam usá-lo como alvo, por exemplo wholesale-form.	Vazio

Quando você alterna Width entre px e %, ela recomeça em 640 px ou 100%.

Escolha uma fonte

1. Abra a lista de fontes

   Em Appearance, clique na caixa Font. O painel Select font abre.

2. Encontre uma fonte

   Digite em Search ou role a lista. A lista tem dois grupos:

   • System fonts: Theme default, a fonte que o seu tema já usa, depois System UI, Helvetica, Arial, Georgia, Times New Roman e Monospace. Nada extra é carregado para elas.
   • Other fonts: quase 1.000 fontes web. Cada uma é exibida na própria fonte. Elas são carregadas do Google Fonts na sua loja virtual, o que pode deixar o carregamento da página um pouco mais lento.

3. Escolha a fonte e o peso

   Clique em uma fonte. A visualização muda imediatamente. Se a fonte tiver vários pesos, escolha um na lista Weight na parte inferior do painel, por exemplo Regular, Bold ou Italic. Clique em Done.

   A nota abaixo de Font confirma o que você escolheu, por exemplo Bold. Loads from Google Fonts on the storefront.

Estilos de campo

Clique na caixa Style para ver os oito estilos, cada um desenhado como um campo Company name de exemplo. Clique em um para aplicá-lo a todos os campos do formulário.

Estilo	Como o campo é
Material filled	Uma caixa cinza com o rótulo dentro dela, na parte de cima.
Material outlined	Uma caixa com borda e o rótulo sobre a borda superior.
Classic	Uma caixa cinza suave com uma leve sombra e cantos arredondados. O padrão.
Classic rounded	Classic, com caixas de uma linha totalmente redondas.
Flat	Uma caixa cinza com cantos retos e sem sombra.
Flat rounded	Flat, com caixas de uma linha totalmente redondas.
Line	Apenas uma linha abaixo da resposta.
Line rounded	Tem a mesma aparência de Line: um sublinhado não tem cantos para arredondar.

Nos estilos arredondados, as caixas que comportam várias linhas, como Long text, mantêm os cantos levemente arredondados em vez de totalmente redondos.

Cada card mostra como um campo fica nesse estilo.

Cores

A linha Color scheme mostra dez esquemas prontos: Default, Forest Light, Cool Ocean, Matcha Calm, Warm Sand, Blush, Slate, Charcoal, Forest Dark e Midnight. Cada amostra mostra as cores de fundo, de texto e de botão. Clique em uma para usá-la.

• Default usa as cores da própria página, para que o formulário combine com o seu tema. Para alterar essas cores, altere as configurações do seu tema.
• Qualquer outro esquema pinta o fundo do próprio formulário atrás dele. Os botões e os marcadores de etapa usam a cor de botão do esquema.

Crie suas próprias cores

1. Abra o esquema

   Abaixo das amostras, clique em Edit scheme. O painel Editing abre para o esquema que você escolheu, por exemplo Editing Warm Sand.

2. Altere as cores

   Clique em uma cor para abrir o seletor de cores. Arraste no quadrado e nas faixas de cor, digite um código hexadecimal ou use o conta-gotas para escolher uma cor da sua tela, se o navegador oferecer. As cores que você pode definir:

   Cor	O que ela pinta
   Background	O fundo atrás do formulário.
   Text	Rótulos, títulos e respostas.
   Solid button background	Os botões principais, como Submit application, e os marcadores de etapa.
   Solid button label	O texto desses botões.
   Outline button	A borda dos botões com contorno, como Back.

   Background, Text e Outline button podem exibir Theme color, o que significa que o formulário usa a cor do seu tema ali.

   Assim que você altera uma cor, o esquema passa a ser Custom e uma amostra Custom é adicionada à linha. Essas cores valem apenas para este formulário. Os esquemas de cores do seu próprio tema não mudam.

   

   Altere qualquer cor e o formulário ganha um esquema Custom próprio.

3. Feche ou redefina

   Feche o painel para manter suas cores. Para voltar às cores do seu tema, clique em Remove color scheme na parte inferior do painel: o formulário volta para Default.

Adicione seu logotipo

O logotipo fica no cabeçalho do formulário, acima do título.

1. Abra o cabeçalho

   Na barra, clique em Elements e depois em Header no topo da lista.

2. Envie o logotipo

   Ative Show store logo, depois clique em Upload image e escolha o arquivo. Ele deve ser uma imagem .jpg, .png ou .svg de até 1 MB. Um tamanho de cerca de 200×60 px é o que fica melhor.

   Para alterá-lo depois, clique em Replace image. Para removê-lo, clique em Remove.

3. Salve

   Clique em Save na barra de salvamento.

Confira o design

A visualização no construtor desenha o seu formulário com o mesmo código que a sua loja virtual usa, então o layout, o estilo dos campos, o espaçamento e o esquema que você vê são os que quem compra recebe.

• Use os botões Desktop preview e Mobile preview acima da visualização para conferir os dois tamanhos de tela.
• As configurações que você deixa por conta do tema, Theme default para a fonte e Default para as cores, usam a fonte e as cores do seu tema na loja virtual. Para vê-las, clique em Preview (o botão de olho) na barra de ferramentas. Ele abre a página do formulário na sua loja em uma nova guia, como foi salva pela última vez.

Próximos passos

• Montar o formulário: defina a largura, o rótulo e o placeholder de cada campo.
• Depois que a pessoa compradora envia: escreva a tela de agradecimento que quem compra vê depois deste formulário.
• Adicionar um formulário à sua loja: coloque o formulário pronto em uma página, em uma seção do tema ou em qualquer lugar com HTML.