Personalizar seu formulário para que ele combine com a sua marca e esquema de cores. Um formulário claro e convidativo incentiva os visitantes do site a preenchê-lo. Você pode alterar a aparência geral do formulário ou clicar em um campo de formulário individual para alterar seu design.
Saiba como:
Personalizando formulários do site
Escolha entre um design predefinido com cores e temas semelhantes ou personalize o design do seu formulário para que fique como você deseja.
Para personalizar os formulários do seu site:
- Vá para o Editor e clique em um formulário.
- Clique no ícone Design
na barra superior.
- Selecione um design entre os designs predefinidos. Clique em uma opção para ver a alteração do formulário na página. O conteúdo do formulário permanece o mesmo.
- (Opcional) Clique em Personalizar design para personalizar ainda mais o formulário do site.
- Personalize seu formulário ao alterar o design dos campos, botão de envio e background do formulário.
Primeiro escolha qual parte do formulário você deseja personalizar:
- Campos: atualize o design de todos os campos do formulário.
Nota: essa opção altera todos os campos do formulário. Clique em um campo individual para personalizar apenas esse campo. - Botão enviar: personalize o design do botão de envio do formulário.
- Background do formulário: personalize o background do formulário (espaço ao redor dos campos do formulário).
Em seguida, personalize o elemento usando as seguintes opções de design:
- Cor e opacidade: personalize a cor do background do elemento. Clique na caixa de cores para selecionar a cor do background e arraste o slider para aumentar ou diminuir a opacidade.
- Borda: adicione e personalize a borda do elemento. Clique na caixa de cores para selecionar a cor da borda e arraste o slider para aumentar ou diminuir a opacidade. Escolha o estilo da borda em Estilo da borda.
- Cantos: arredonde os cantos do elemento. Insira um valor em cada canto ou clique no ícone de cadeado para alterar todos os valores de uma vez.
- Sombra: adicione uma sombra ao elemento.
- Clique na alavanca Ativar sombra para ativá-la.
- Personalize sua sombra usando as opções:
- Ângulo: selecione o ângulo da sombra.
- Distância: arraste o slider para aumentar ou diminuir a distância da sombra.
- Tamanho: arraste o slider para aumentar ou diminuir o tamanho da sombra.
- Borrado: arraste o slider para aumentar ou diminuir o borrado da sombra.
- Texto: para campos de entrada e botão de envio, você pode alterar a cor e a fonte do texto.
- Campos:
- Título do campo: altere a cor, a opacidade e o texto do título acima do campo do formulário.
- Texto do campo de entrada: altere a cor, a opacidade e a fonte do texto da variante que vai dentro do campo do formulário.
- Botão enviar:
- Normal: clique na aba Normal para alterar o design do botão no formulário.
- Ao passar o mouse: clique na aba Ao passar o mouse para alterar o design do botão quando os visitantes passam o mouse sobre ele.
Personalizando campos individuais do formulário
Se você quiser fazer alterações de design apenas em campos específicos do seu formulário (ex.: Nome e Número de telefone), você pode selecionar um campo individual para fazer o design.
Para personalizar campos individuais do formulário:
- Vá para o Editor e clique em um formulário.
- Clique no campo que você deseja personalizar dentro do formulário (ex.: Aniversário).
- Clique no ícone Design acima do campo do formulário.
- Escolha um design predefinido para o campo do formulário. Dependendo do campo selecionado, você verá opções diferentes. Por exemplo, os campos de texto permitem que você personalize a cor do texto e o background, enquanto os campos de seleção de data (ex.: Aniversário) permitem que você selecione diferentes designs de calendário.
- (Opcional) Clique em Personalizar design para personalizar o campo ainda mais.
- Personalize o campo do formulário usando as opções disponíveis.
Personalize o campo do formulário. Alguns campos têm mais de uma aba (ex.: Normal e Ao passar o mouse). Clique entre as abas para personalizá-las.
- Cor e opacidade: personalize a cor do background do campo. Clique na caixa de cores para selecionar a cor do background e arraste o slider para aumentar ou diminuir a opacidade.
- Borda: adicione e personalize a borda do campo. Clique na caixa de cores para selecionar a cor da borda e arraste o slider para aumentar ou diminuir a opacidade. Escolha o estilo da borda em Estilo da borda.
- Cantos: arredonde os cantos do campo. Insira um valor em cada canto ou clique no ícone de cadeado para alterar todos os valores de uma vez.
- Sombra: adicione uma sombra ao campo.
- Clique na alavanca Ativar sombra para ativá-la.
- Personalize sua sombra usando as opções:
- Ângulo: selecione o ângulo da sombra.
- Distância: arraste o slider para aumentar ou diminuir a distância da sombra.
- Tamanho: arraste o slider para aumentar ou diminuir o tamanho da sombra.
- Borrado: arraste o slider para aumentar ou diminuir o borrado da sombra.
- Texto: altere a cor, fonte e o tamanho do texto no campo.
