Formulários: aparência e layout
O visual do formulário é definido no próprio editor: cores, fonte, bordas, tipo de layout, logo e imagem de fundo. Cada ajuste aparece na hora no formulário da direita, que é o mesmo que o visitante vai ver.
# Onde fica
Módulo Marketing → Formulários → Editar no cartão do formulário.
- Cores, fonte, medidas e layout: aba Estilo.
- Logo e imagem de fundo: aba Config.
# Cores
Cada cor tem um seletor e um campo para digitar o código (ex.: #6366f1).
| Campo | O que pinta |
|---|---|
| Fundo da página | A área em volta do formulário, na página pública. |
| Fundo do formulário | O cartão onde ficam os campos. |
| Cor do texto | Rótulos e texto digitado. |
| Cor do botão | O botão de envio e o ícone da mensagem de sucesso. |
| Texto do botão | A cor do texto dentro do botão. |
| Cor da borda | A borda dos campos. |
Em Fundo da página e Fundo do formulário existe a caixa Transparente (embed inline). Marque as duas quando o formulário for incorporado no seu site e você quiser que ele assuma o fundo da sua página. No editor, o fundo da página transparente aparece como um quadriculado.
# Fonte e medidas
| Campo | Opções |
|---|---|
| Fonte | Inter, Arial, Georgia, Helvetica, Verdana, Trebuchet MS, Times New Roman, Courier New, Roboto, Open Sans, Lato, Montserrat e Poppins. |
| Tamanho da fonte | De 10 a 24 px. |
| Peso da fonte | De 300 (fino) a 800 (bem grosso). |
| Borda radius | Arredondamento dos cantos, de 0 a 24 px. Vale para o cartão, os campos e o botão. |
| Borda largura | Espessura da borda dos campos, de 0 a 4 px. |
| Padding | Espaço interno do cartão, de 8 a 64 px. |
| Largura máx | Largura máxima do formulário, de 280 a 800 px. |
| Sombra | Nenhuma, Pequena, Média, Grande ou Extra grande. |
| Estilo do input | Contornado (borda em volta), Preenchido (fundo levemente tingido com a cor da borda, sem contorno) ou Sublinhado (só a linha de baixo). |
| Alinhamento | Esquerda, Centro ou Direita. Com Centro, o formulário também fica centralizado na altura da página pública. |
# Tipo de layout
Em Tipo de layout, no fim da aba Estilo:
| Opção | Como fica a página pública |
|---|---|
| Centralizado | O formulário no meio da página, sobre o Fundo da página ou sobre a imagem de fundo. |
| Split esquerda | A tela dividida ao meio: formulário à esquerda, imagem à direita. |
| Split direita | Imagem à esquerda, formulário à direita. |
Nos layouts Split, a metade da imagem usa a Imagem de fundo. Sem imagem, essa metade fica com a cor do Fundo da página, e o editor avisa: “Adicione uma imagem de fundo na aba Config para melhor efeito visual”. Em telas estreitas, como a do celular, a imagem some e o formulário ocupa a largura toda.
# Colocar o logo
- Abra a aba Config.
- Em Logo do formulário, arraste uma imagem para a área tracejada ou clique nela para escolher o arquivo.
- Ajuste Tamanho da logo (de 24 a 200 px de altura) e Alinhamento da logo (Esquerda, Centro ou Direita).
O logo aparece acima dos campos. Para tirar, clique no X sobre a miniatura.
# Colocar a imagem de fundo
- Na aba Config, vá até Imagem de fundo.
- Arraste uma imagem para a área tracejada ou clique nela para escolher o arquivo.
No layout Centralizado, a imagem cobre a página inteira, atrás do formulário. Nos layouts Split, ocupa a metade ao lado do formulário. Para tirar, clique no X sobre a miniatura.
# Como fica incorporado no seu site
Quando o formulário é colocado dentro de outra página pelo código de incorporação, algumas regras mudam:
- os layouts Split não se aplicam: o formulário aparece sozinho, alinhado ao topo;
- a Imagem de fundo não é exibida;
- o Fundo da página só fica transparente se a caixa Transparente (embed inline) estiver marcada; senão, vale a cor escolhida;
- com o Código de incorporação copiado do editor, a altura acompanha o conteúdo, inclusive depois que a mensagem de sucesso substitui os campos.
No link direto do formulário, um Fundo da página transparente aparece em cinza claro, porque não há outra página por trás.
# Regras e limites
- O estilo é de cada formulário. Para reaproveitar um visual, use Duplicar no cartão: a cópia leva o estilo e o logo, mas não leva a imagem de fundo.
- Logo e imagem de fundo aceitam arquivos de imagem.
- As mudanças só chegam ao formulário publicado depois de Salvar.