Criar formulário de contato

Depois de adicionar um formulário de contato, você pode personalizar a aparência dele. Este guia mostrará como alterar o estilo, as cores e o layout dos formulários do seu site.

O bloco de formulário inclui diferentes estilos de design de formulários que você pode escolher:

1. Selecione Visualização em lista na parte superior à esquerda do editor. É o ícone que são três linhas horizontais, uma sobre a outra.
2. Localize o bloco de formulário e clique nele:

3. Nas configurações do bloco na barra lateral direita, clique na guia Estilos (representada por um ícone de círculo preto e branco):

4. Selecione um estilo
   • Padrão: mostra os nomes dos campos fora dos campos de entrada sem animação.
   • Animado: mostra os nomes dos campos dentro dos campos de entrada e uma breve animação, além de destacar o campo em que o visitante clica.
   • Delineado: mostra sempre os nomes dos campos dentro dos campos de entrada, uma breve animação e um delineado ao redor das configurações do bloco de formulário.
5. Clique no botão Salvar na parte superior da tela.

O texto de espaço reservado é um exemplo que pode aparecer em um campo de formulário antes de o visitante clicar nele e, em seguida, desaparece quando ele clica para começar a digitar seu próprio texto. Pode ser útil mostrar aos seus visitantes um exemplo do tipo de conteúdo que você espera que eles digitem no formulário.

Para adicionar texto de espaço reservado a um formulário de contato:

1. Clique em qualquer campo do formulário.
2. Abra as configurações de bloco na barra lateral.
3. Role para baixo até a configuração de Texto de espaço reservado.
4. Digite seu texto de espaço reservado na caixa exibida. Ele aparecerá no campo do formulário.
5. Clique no botão Salvar na parte superior da tela.

Por padrão, os campos em um formulário preencherão a largura do contêiner do formulário. Você pode alterar a largura de campos individuais seguindo estas etapas:

1. Clique em qualquer campo do formulário.
2. Abra as configurações de bloco na barra lateral.
3. Role para baixo até a configuração Largura e defina a largura como 25%, 50%, 75% ou 100%.
   • Se você quiser que dois campos apareçam lado a lado, defina cada um como 50%. Quando há espaço, vários campos podem aparecer em uma linha.
4. Clique no botão Salvar na parte superior da tela.

Você pode optar por editar como a cor e o texto são exibidos para cada campo de formulário ou pode defini-los de forma que cada campo use todas as mesmas configurações de cor e texto.

Quando você clicar em um campo de formulário individual, as configurações de bloco incluirão o botão de alternância Sincronizar estilo de campos. Se essa opção estiver definida como ATIVADA, as alterações feitas neste campo afetarão todos os campos. Clique nele para a posição DESATIVADA se quiser alterar as configurações apenas para esse campo:

Você pode sincronizar as seguintes alterações em todos os campos para garantir uma experiência visual consistente em todo o formulário:

• Cor: defina as cores de:
  • Texto do rótulo: o texto que aparece acima do campo do formulário.
  • Texto do campo: o texto de espaço reservado (opcional) e de entrada em um campo.
  • Fundo do campo: o plano de fundo da seção de entrada de um campo de formulário.
  • Borda: a borda ao redor do campo do formulário.
• Estilos do campo de entrada: defina o tamanho do texto, a altura da linha e os estilos de borda para o campo.
• Estilos da etiqueta: defina o tamanho do texto e a altura da linha para as etiquetas de campo.

Para ajustar as cores do formulário, siga estas etapas:

1. Abra a Visualização em lista e localize o bloco de formulário e os campos individuais dentro dele:

2. Com o bloco geral Formulário selecionado, abra as configurações do bloco na barra lateral e clique na guia Estilos (o ícone de círculo preto e branco).
3. Usando as configurações de cor, você pode controlar a cor do texto no formulário, a cor do plano de fundo e a cor dos links usados no formulário:

4. Em seguida, clique em um campo de formulário individual e abra novamente as configurações de bloco.
5. Aqui, você pode controlar as seguintes cores para cada campo de formulário individual:
   • Texto do rótulo: o texto que aparece acima do campo do formulário.
   • Texto do campo: o texto de espaço reservado (opcional) e de entrada em um campo.
   • Fundo do campo: o plano de fundo da seção de entrada de um campo de formulário.
   • Borda: a borda ao redor do campo do formulário.
6. Ative a opção “Sincronizar estilos de campo” para aplicar as alterações a todos os campos ou desative-a para controlar cada campo individualmente.
7. Clique no botão Salvar na parte superior da tela.