Searching for

Personalizar visual

A plataforma Pipz permite personalizar o seu formulário da forma como você quiser para conseguir impulsionar as suas taxas de conversão e sair da fórmula pronta de cores e estilos do mercado.

Personalizar o visual de um formulário

  1. Navegue Settings > Forms > Web form ou Contact form
  2. Na lista, selecione o formulário desejado
  3. Clique na aba Design para acessar as opções de customização

Nas opções de cores do formulário, clique na caixa à esquerda para abrir o seletor de cores e escolher a cor desejada.

Global layout

As opções de Global layout possibilitam a customização das características gerais do formulário, como cor de fundo, fontes, bordas e margens internas entre os elementos:

  • Background color: cor de fundo do formulário. Deixe vazio para deixá-lo transparente;
  • Border color: cor da borda externa do formulário. Deixe vazio para deixá-la transparente;
  • Border width: espessura da borda externa do formulário. O valor 0 (zero) retira a borda;
  • Margins: o valor em pixels das margens internas de topo, direita, baixo e esquerda, respectivamente;
  • Border radius: o valor em pixels para adicionar cantos arredondados à borda externa;
  • Font type: a família de fontes que será utilizada em todo o formulário.

Input layout

As opções de Input layout dão a possiblidade de personalizar o visual dos campos de digitação do formulário:

  • Label hidden: habilita ou desabilita a exibição do nome dos campos;
  • Label color: cor do texto do nome dos campos exibidos no formulário;
  • Label size: tamanho do texto contendo o nome dos campos;
  • Input font size: tamanho do conteúdo preenchido pelo usuário no formulário;
  • Color: cor do conteúdo preenchido pelo usuário no formulário;
  • Border color: cor da borda externa de todos os campos do formulário;
  • Focus color: cor da borda externa do campo atualmente selecionado;
  • Input border width: espessura da borda externa dos campos do formulário;
  • Input border radius: o valor em pixels para adicionar cantos arredondados à borda externa;
  • Input height: altura em pixels do campo que será preenchido pelo usuário;
  • Vertical space: valor em pixels do espaço vertical entre os campos.

Title, subtitle e footer

As opções Title, Subtitle e Footer possibilitam a adição de um conteúdo em texto no seu formulário. As configurações visuais do título, subtítulo ou rodapé, respectivamente, possuem oções de customização semelhantes:

  • Visible: habilita ou desabilita a exibição do conteúdo;
  • Content: o texto que será exibido em cada uma das opções;
  • Color: cor da fonte do conteúdo exibido em cada uma das opções;
  • Font size: tamanho do texto de cada conteúdo;
  • Text align: alinhamento do texto, podendo ser Left, Center ou Right (esquerda, centro ou direita);
  • Vertical space: valor em pixels do espaço vertical entre o conteúdo e os demais elementos;
  • Bold: habilita ou desabilita o Negrito na formatação do texto.

Button

A opção Button oferece opções de customização ao botão de envio dos dados do formulário ao sistema:

  • Button block: habilita ou desabilita a opção de expandir o botão até a largura total do formulário;
  • Content: o texto que será exibido no botão de enviar dados;
  • Font color: cor do texto do botão de envio de dados;
  • Background color: cor de fundo principal do botão, exibida normalmente;
  • Hover color: cor de fundo exibida quando o usuário descansa o cursor em cima do botão;
  • Disabled color: cor de fundo quando o botão está desabilitado;
  • Border color: cor da borda do botão de envio de dados;
  • Border width: espessura da borda externa do botão;
  • Border radius: valor em pixels para aplicar efeito arredondado às bordas do botão;
  • Font size: tamanho da fonte do texto dentro do botão;
  • Button alignment: alinhamento do botão, podendo ser Left, Center ou Right (esquerda, centro ou direita);
  • Button height: altura em pixels do botão de envio;
  • Vertical space: valor em pixels do espaço vertical entre o botão e os demais elementos;

Depois de realizar todas as alterações visuais no seu formulário, clique no Botão de Salvar Botão de Salvar para salvar todas as alterações realizadas.

Próximos passos