Personalize os formulários para contato do seu site de acordo com a sua marca.

Use os estilos de site para editar o visual dos blocos de formulário no seu site. Você pode alterar as fontes e as cores do texto e dos botões do formulário, bem como o estilo e a forma de outros elementos dele, como os campos de texto e as caixas de seleção.

Todos os blocos de formulário no seu site seguem essas configurações de estilo; por isso, essa uma ótima forma de padronizar os formulários.

A maior parte deste guia é voltada para as opções de estilo dos formulários disponíveis apenas nos sites da versão 7.1 . Se o seu site estiver na versão 7.0, confira Ajuste o estilo do bloco de formulário na versão 7.0.

Assistir a um vídeo

Abra as configurações de estilo do bloco de formulário

Para abrir as configurações de estilo do bloco de formulário:

1. Abra o painel "Páginas" e clique em uma página com um bloco de formulário para poder conferir a prévia do site conforme você faz as alterações.
2. Abra o painel "Estilos do site" e clique em > ao lado de "Fontes".
3. Clique em Trocar para escolher um pacote pronto de formulários.
4. Clique em Efeitos para personalizar o campo do formulário e as animações do botão de envio. 
5. Clique em Opções de campo para personalizar os estilos da caixa de seleção, do botão de rádio e do campo de pesquisa.
6. Clique em Fontes para personalizar os estilos do texto do bloco de formulário.
7. Clique em Cores para personalizar os estilos das cores do bloco de formulário.
8. Clique em Espaçamento do formulário para personalizar a quantidade de espaço em branco no formulário.
9. Após as alterações, clique em Salvar.

Essas configurações de estilo afetam todos os blocos de formulário do site. Não é possível fazer diferentes configurações de estilo em diferentes blocos de formulário além das cores, que podem variar se esses blocos estiverem em seções com temas de cores diferentes.

Outros tipos de formulário, como bloco de newsletter, formulário da página de entrada e formulário de produto, têm as próprias configurações de estilo. Saiba mais sobre os outros tipos de formulário em "Adicionando um formulário ao seu site".

Escolha e personalize um pacote de formulários

Os pacotes de formulários são estilos prontos de formulários que você pode escolher como ponto de partida. Atenção: se você fizer alterações nas configurações após selecionar um pacote de formulários e depois mudar para outro pacote, as alterações no primeiro pacote não serão salvas.

Cada pacote de formulários inclui predefinições para as opções de estilo que aparecem no painel Formulários:

• Formato do campo - define o formato dos campos do formulário. Escolha entre Quadrado, Retângulo arredondado, Pílula ou Cantos personalizados.
• Preenchimento do campo - ative esta opção para adicionar uma cor ao fundo do campo do formulário. Com esta opção desativada, os campos do formulário seguem a cor do bloco do formulário.
• Margem - escolha Nenhum para não ter borda; ou Todos para fazer a borda aparecer em todos os lados. Dependendo das outras configurações, Nenhum não estará disponível. Se a forma estiver como Quadrado, você também pode escolher Inferior para ter uma borda apenas na parte inferior do campo, como um sublinhado.
• Espessura da margem - defina a espessura das linhas da margem ao redor dos campos do formulário. Esta opção não aparece se você selecionar Nenhum na margem.
• Espaçamento - escolha o tamanho do espaçamento que deve aparecer ao redor do texto no campo. Escolha P, M ou G; ou clique em … para fazer um espaçamento personalizado.
• Opções de campo: personalize a aparência dos elementos Caixa de seleção, Botão de opção e Pesquisa para determinados campos.

Depois de selecionar um pacote de formulários, você poderá personalizar ainda mais essas configurações de estilo no painel Formulários.

Alterar fontes

No painel de estilo Formulários, clique em Fonte para alterar a fonte de cada campo:

• Título - o texto acima de cada campo
• Entrada - o texto que seus visitantes informam em cada campo
• Descrição - o texto abaixo de cada campo
• Legenda - o texto abaixo da descrição, como “Nome” e “Sobrenome” nos campos de nome
• Placeholder - o texto que você pode mostrar em cada campo
• Opção - o texto para as opções nos campos de caixa de seleção, rádio e pesquisa
• Título da pesquisa - o texto da pergunta da pesquisa
• Selecionar menu suspenso - o texto do menu suspenso

O texto do botão Enviar segue os estilos de botão principal, secundário ou terciário do seu site, dependendo do que você selecionar na aba "Design" do bloco de formulário.

Mensagem pós-envio

Se você adicionar uma mensagem pós-envio, o texto seguirá as seguintes opções de estilo nos estilos gerais do seu site:

• Fonte - configurações do parágrafo no painel Fontes
• Tamanho - controle deslizante do Parágrafo 2 na seção Parágrafos do painel Fontes
• Cor - a cor do Parágrafo (médio) no tema escolhido para a seção; ou Parágrafo (médio) no fundo se você ativou um plano de fundo no bloco.

Alterar cores

Como padrão, os blocos de formulário usam as cores da paleta do site. No painel de estilo Formulários, clique em Cores e ative a opção Usar cores do tema para personalizar manualmente as cores dos elementos dos blocos de formulário com base no tema de cores da seção.

Se o ajuste incluir Plano de fundo, ele será aplicado apenas aos blocos de formulário com a cor de fundo ativada ou aos blocos de formulário configurados para abrir em uma lightbox. Os ajustes sem No fundo valem nos blocos de formulário sem cor de fundo ou sem o lightbox ativado.

Ajuste o estilo do bloco de formulário na versão 7.0

Na versão 7.0, os estilos do bloco de formulário geralmente seguem o texto principal do template e os ajustes do botão, mas as opções variam dependendo do template, e alguns rótulos nos campos de formulário têm tamanho fixo. Por exemplo: não é possível alterar o tamanho dos rótulos "Nome" e "Sobrenome" que aparecem nos campos "Nome". Também pode não ser possível alterar a cor do texto do placeholder nos campos.

O estilo do formulário em lightbox é fixo; não é possível alterar a maioria das configurações da fonte ou da cor. Saiba mais sobre como editar o estilo do site em "Fazendo alterações no estilo".