Como personalizo meu formulário?

Os formulários podem ser personalizados usando as opções disponíveis na guia "Estilo". Cada formulário criado terá sua própria guia "Estilo".

Para acessar esta guia, navegue até a página de exibição geral formulários em sua conta e clique em "Editar" para o formulário com o que deseja trabalhar. Em seguida, clique na guia "Estilo" localizada no menu do lado direito.

Neste artigo, mostraremos as seguintes opções de estilo e como você pode usá-las para criar seu próprio formulário personalizado:

  • Layout
    As opções disponíveis dependem do estilo de formulário selecionado. 
  • Estilo
    Modifique a cor de fundo, a cor da fonte, a largura da borda da forma, o raio de canto e a largura do formulário.
  • Botão
    Modifique a cor de fundo, a cor do texto, a largura da borda, o raio de canto e o padding.
  • CSS personalizado 
    Alterar o tipo e o tamanho da fonte, largura e altura do campo, largura do botão e altura.
  • Desativar a marca ActiveCampaign
    Remova o logotipo da ActiveCampaign do seu formulário. Aplica-se a contas Plus, Profissional e Empresarial.

Layout

A opção de estilo Layout está disponível para os estilos de formulário em linha, flutuante e modal. Cada estilo de formulário terá suas próprias opções de layout específicas.

Formulário em linha

Com este estilo de formulário, você pode selecionar um layout horizontal ou vertical.

Formulário de caixa flutuante

Com este estilo de forma você pode selecionar entre quatro layouts diferentes: um sem imagem, um com uma imagem no canto superior esquerdo da forma, um com uma imagem na parte superior da forma, ou um com uma imagem sob o título do formulário.

Formulário de modal

Com este estilo de forma, você pode selecionar entre quatro layouts diferentes: um sem imagem, um com uma imagem no canto superior esquerdo da forma, um com uma imagem na parte superior da forma, ou um com uma imagem sob o título do formulário.

Para escolher um layout para o seu formulário, clique em qualquer uma das opções disponíveis na guia Estilo. O criador de formulários exibirá automaticamente o formulário em seu layout preferido.

Estilo

A seção Estilo permite ajustar o seguinte para cada estilo de formulário listado abaixo:

Em linha

Cor de fundo, cor da fonte, cor e largura da borda, raio de canto e largura do seu formulário

Barra flutuante

Cor de fundo e cor da fonte

Caixa flutuante

Cor de fundo, cor da fonte e largura

Modal

Cor de fundo, cor da fonte e largura

Para selecionar cores que correspondam à marca da sua empresa, digite o número hexa dessa cor no campo Fundo e/ou na cor da fonte.

Você também pode usar o seletor de cores à direita desses campos para selecionar uma cor diferente. O seletor de cores está disponível para Fundo, Cor da Fonte e Borda (somente formulários em linha).

Clique nas setas para cima ou para baixo para ajustar o raio de canto e a borda de uma formulário em linha.

Você também pode usar as setas para cima e para baixo para ajustar a largura do seu formulário (somente estilos de formulário em linha, caixa flutuante e modal).

O criador de formulários exibirá automaticamente toda e qualquer personalização que você fizer, à medida que as fizer. Nós encorajamos você a jogar com cada um desses elementos para criar um formulário que melhor se adapte à sua marca.

Botão

Esta seção permitirá que você ajuste como o botão Preencher aparece no formulário. Você poderá ajustar a cor do botão, a cor do texto, a borda, o raio de canto e o padding. Esta opção está disponível para todos os estilos de formulário.

Para selecionar cores que correspondam à marca da sua empresa, digite o número hexa dessa cor no campo Fundo e/ou na cor da fonte.

Você também pode usar o seletor de cores à direita desses campos para selecionar uma cor diferente. O seletor de cores está disponível para Fundo, Cor da Fonte e Borda.

Para ajustar a largura da borda, o raio de canto ou o padding para o botão, clique nas caretas para cima ou para baixo.

Observe que você não será capaz de ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes (veja a próxima seção).

CSS personalizado

Você pode personalizar cada um dos seguintes elementos usando a seção CSS personalizada disponível na guia Estilo:

  • Tamanho da fonte
  • Tipo de fonte
  • Largura e altura para o campo de formulário
  • Largura e altura do botão Preencher

Note que isso requer conhecimento da sintaxe CSS. Se você não está familiarizado com CSS, você pode precisar trabalhar com alguém da sua equipe que esteja. Há também vários grandes recursos lá fora onde você pode aprender CSS, como este.

Esta opção está disponível para todos os estilos de formulário.

Para saber como aplicar CSS personalizado ao seu formulário, siga estas etapas:

1. Clique no botão "Inspetor", e, em seguida, clique no elemento no formulário ao que deseja adicionar estilo personalizado. Por exemplo, você pode adicionar estilo personalizado ao botão Preencher clicando nesse botão em seu formulário.

2. Depois de clicar no elemento que deseja personalizar, ele aparecerá na caixa CSS personalizada. Em seguida, digite seu CSS personalizado na caixa sob o elemento. Na imagem abaixo, continuamos com o exemplo do botão Preencher:

Aqui está uma animação rápida ilustrando como ajustar o tamanho da fonte e o tipo de fonte para o botão Preencher de um formulário usando a ferramenta Inspector e a caixa CSS personalizada:

Desativar a marca ActiveCampaign

Você pode remover o logotipo da ActiveCampaign do seu formulário desativando a marca ActiveCampaign. Esta opção está disponível na seção Diversos.

Observe que você só pode desativar a marca se estiver no plano Plus, Profissional ou Empresarial.

Para desativar a marca da ActiveCampaign, clique no botão para que fique na posição "Desligado".

turn_off_ac_branding.gif

 
Tem mais dúvidas? Envie uma solicitação