Projete e personalize seu formulário ActiveCampaign

ActiveCampaign plans
Starter
Plus
Pro
Enterprise

Com a ActiveCampaign, você pode personalizar formulários para combinar com as cores da suo branding, adicionar imagens, alterar a fonte e muito mais.

Assista a um vídeo

Assista a este vídeo para saber como criar e personalizar seu formulário. 

Opções de personalização de formulários de acesso

As opções de personalização de um formulário estão localizadas sob a aba "Estilo" no construtor de formulários.

Para acessar esta aba para qualquer formulário:

  1. Clique em "Site" "Formulários" no menu à esquerda. 
  2. Edite ou crie um novo formulário
  3. O criador de formulários carregará. Todas as opções de edição e estilo aparecerão no painel direito. Clique na aba "Estilo" localizada no painel direito.

    Estilo

Personalize um formulário inline

Com a forma inline, você pode escolher um layout e personalizar o estilo para o formulário e enviar o botão.

Geral

A caixa "Estilo bar" permite personalizar como o formulário aparecerá para os visitantes do seu site. Abaixo está uma tabela exibindo todas as opções de estilo de formulário. 

Opções gerais de personalização Descrição
Layout Clique em qualquer opção para escolher um layout horizontal ou vertical para o formulário.
Largura máxima Use esta opção para ajustar a largura do formulário. A largura é definida como um valor de pixel. 
Fundo Altere a cor de fundo do formulário ou torne-a transparente.

Esse tipo de formulário não oferece suporte a imagens de plano de fundo. 
Fronteiras Use esta opção para adicionar uma borda ao seu formulário. As bordas são definidas como um valor de pixel. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos de borda: sólida, pontilhada, tracejada e dupla. 
Cantos Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Mostrar o branding da ActiveCampaign Use essa opção para ativar ou desativar o branding da ActiveCampaign.

 

Texto

A caixa "Texto" permite personalizar a aparência do texto do formulário. Abaixo está uma tabela exibindo todas as opções de personalização de texto.

Opções de personalização de texto Descrição
Fonte Você pode escolher entre cerca de 1.500 fontes em seu formulário para que ela corresponda à sua marca. A fonte selecionada aqui se aplicará ao bloco Cabeçalho, bloco de código HTML, campos e botão.
Cabeçalho

O Cabeçalho aparecerá inicialmente na parte superior do formulário. Você pode ajustar o seguinte para este bloco:

  • Cor
  • Tamanho do texto
  • Estilo (Negrito*, Itálico, Sublinhado)

*A capacidade de negrito de texto dependerá da fonte selecionada.

Parágrafo (código HTML)

Este bloco aparece inicialmente abaixo do Cabeçalho e age como "Parágrafo" texto em seu formulário. Você pode ajustar o seguinte para este bloco:

  • Cor (isso também alterará a cor dos cabeçalhos de campo)
  • Tamanho do texto
  • Estilo (Negrito*, Itálico, Sublinhado)

*A capacidade de negrito de texto dependerá da fonte selecionada.

 

Botão

A caixa "Botão" permite personalizar a aparência do botão de envio do formulário. Abaixo está uma tabela exibindo todas as opções de personalização de botão. 

Opções de personalização de botões Descrição
Fundo Altere a cor de fundo do botão "Enviar". 
Texto Altere a cor do texto do botão. 
Fronteira Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas como um valor de pixel. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos de borda: sólida, pontilhada, tracejada e dupla. 
Raio da borda Use esta opção para deixar as bordas do botão arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Padding Padding é o espaço ao redor do botão. Você pode usar esta opção para aumentar ou diminuir o padding. Isso é definido como um valor de pixel. 

 

Observe que você não vai poder ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.

Personalize um formulário pop-up modal

Com o formulário pop-up modal, você pode escolher um layout e personalizar o estilo para o formulário, campos de entrada e botão de envio.

Layout

Há quatro opções que você pode escolher para o seu formulário: nenhuma imagem, imagem à esquerda, imagem na parte superior ou imagem no meio.

modal_form_layout_options.png

Estilo Modal

A caixa "Modal Style" permite personalizar como o formulário aparecerá para os visitantes do seu site. Abaixo está uma tabela exibindo todas as opções de personalização modal:

Opções de personalização de estilo modal Descrição
Fundo Clique no catador de cores para alterar a cor do formulário ou adicionar uma imagem de fundo.
Fundo Clique no catador de cores para alterar a cor do formulário ou adicionar uma imagem de fundo.
Fonte Altere o tipo de fonte no formulário para combinar com suo branding. 
Largura Use esta opção para ajustar a largura do formulário. A largura é definida como um valor de pixel.
Padding Padding é o espaço em torno de seu formulário. Você pode usar esta opção para aumentar ou diminuir o padding. Isso é definido como um valor de pixel.
Raio da borda Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio da borda é definido como um valor de pixel.
Sombra Use isso para adicionar uma sombra ao seu formulário. Isso vai destacar você ainda mais. Você pode escolher entre as seguintes opções: nenhuma, leve, média e pesada.

 

Entradas

As entradas referem-se aos campos que os visitantes do site usarão para enviar suas informações pessoais a você. As opções de personalização de entrada incluem:

Opções de personalização de entrada Descrição
Fundo Clique no catador de cores para alterar a cor dos campos de entrada.
Cor da fonte Clique no selecionador de cores para alterar a cor do texto do campo de entrada. 
Raio da borda Use esta opção para tornar os cantos dos campos de entrada arredondados ou quadrados. O raio da borda é definido como um valor de pixel.

 

Botão

A caixa "Botão" permite personalizar a aparência do botão de envio do formulário. As opções de personalização de botões incluem:

Opções de personalização de botões Descrição
Fundo Altere a cor de fundo do botão enviar. 
Texto Altere a cor do texto do botão. 
Fronteira Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas como um valor de pixel. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos de borda diferentes: Sólida, Pontilhada, Traçada e Dupla. 
Raio da borda Use esta opção para deixar as bordas do botão arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Padding Use esta opção para ajustar o padding do botão. O padding é definido como um valor de pixel. 

 

Observe que você não vai poder ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.

Personalize um formulário de caixa flutuante

Com a forma de caixa flutuante, você pode escolher um layout e personalizar o estilo para o formulário, campos de entrada e botão de envio.

Layout

Há quatro opções que você pode escolher para o seu formulário: nenhuma imagem, imagem à esquerda, imagem na parte superior ou imagem no meio.

Floating_box_layout.png

Estilo de caixa

A caixa "Form Style" permite personalizar como o formulário aparecerá para os visitantes do seu site. As opções de personalização de estilo de formulário incluem:

Opções de personalização de estilo da caixa Descrição
Fundo Clique no catador de cores para alterar a cor do formulário ou adicionar uma imagem de fundo.
Cor da fonte Altere a cor do texto que aparece no formulário.
Fonte Altere o tipo de fonte no formulário para combinar com suo branding. 
Largura Use esta opção para ajustar a largura do formulário. A largura é definida como um valor de pixel. 
Padding Padding é o espaço em torno de seu formulário. Você pode usar esta opção para aumentar ou diminuir o padding. Isso é definido como um valor de pixel. 
Raio da borda Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Sombra Use isso para adicionar uma sombra ao seu formulário. Isso vai destacar você ainda mais. Você pode escolher entre as seguintes opções: nenhuma, leve, média e pesada. 

 

Entradas

As entradas referem-se aos campos que os visitantes do site usarão para enviar suas informações pessoais a você. As opções de personalização de entrada incluem:

Opções de personalização de entrada Descrição
Fundo Clique no catador de cores para alterar a cor dos campos de entrada.
Cor da fonte Clique no selecionador de cores para alterar a cor do texto do campo de entrada. 
Raio da borda Use esta opção para tornar os cantos dos campos de entrada arredondados ou quadrados. O raio da borda é definido como um valor de pixel.

 

Botão

A caixa "Botão" permite personalizar a aparência do botão de envio do formulário. As opções de personalização de botões incluem:

Opções de personalização de botões Descrição
Fundo Altere a cor de fundo do botão enviar. 
Texto Altere a cor do texto do botão. 
Fronteira Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas como um valor de pixel. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos de borda diferentes: Sólida, Pontilhada, Traçada e Dupla. 
Raio da borda Use esta opção para deixar as bordas do botão arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Padding Use esta opção para ajustar o padding do botão. O padding é definido como um valor de pixel. 

 

Observe que você não vai poder ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.

Personalize um formulário de barra flutuante

Com a forma de barra flutuante, você pode personalizar o estilo de formulário e enviar o botão. As opções de layout não estão disponíveis com este tipo de formulário.

Estilo bar

A caixa "Estilo bar" permite personalizar como o formulário aparecerá para os visitantes do seu site. As opções de personalização do estilo da barra incluem:

Opções de personalização de estilo de barra Descrição
Fundo Altere a cor de fundo do seu formulário.

As imagens de fundo não são suportadas por este tipo de formulário.
Cor da fonte Altere a cor do texto que aparece no formulário.
Fonte Altere o tipo de fonte no formulário para combinar com suo branding. 

 

Botão

A caixa "Botão" permite personalizar a aparência do botão de envio do formulário. As opções de personalização de botões incluem:

Opções de personalização de botões Descrição
Fundo Altere a cor de fundo do botão enviar. 
Texto Altere a cor do texto do botão. 
Fronteira Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas como um valor de pixel. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos de borda diferentes: Sólida, Pontilhada, Traçada e Dupla. 
Raio da borda Use esta opção para deixar as bordas do botão arredondados ou quadrados. O raio da borda é definido como um valor de pixel. 
Padding Use esta opção para ajustar o padding do botão. O padding é definido como um valor de pixel. 

 

Observe que você não vai poder ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.

Alterar o texto do botão "Enviar"

Você pode alterar o texto do botão "Enviar" para qualquer formulário.

  1. Na página Formulários, clique no botão "Editar" do formulário que você quer atualizar.
  2. Clique no botão "Enviar" no construtor de formulários.
  3. O menu direito exibirá a etiqueta do botão e um campo. Digite o texto que você quer usar para o botão.

    Botão

O novo texto do botão será salvo automaticamente.

Personalização avançada

Cada tipo de formulário na ActiveCampaign tem uma opção CSS personalizada disponível. Este é para usuários avançados que estão familiarizados com CSS e estão confortáveis em usá-lo. A opção CSS personalizada está localizada sob a aba "Estilo" para cada forma e pode ser usada para adicionar mais modificações a qualquer elemento de formulário. Por exemplo, você pode usar esta opção para:

  • Ajuste a largura e a altura dos campos de entrada
  • Ajuste a largura e a altura do botão de envio
  • Ajuste o tamanho da fonte
  • Ajuste o tipo de fonte para elementos singulares. Por exemplo, você pode usar isso para tornar a fonte de texto do botão diferente do resto do formulário

Se você quiser saber mais sobre como usar CSS, consulte este Tutorial CSS de w3schools.com.

Para usar a opção CSS personalizada:

  1. No Construtor de formulários, clique na aba "Estilo".
  2. Role para baixo até ver a caixa "CSS personalizado".
  3. Clique no botão "Inspetor" e, em seguida, clique no elemento de formulário que você quer modificar.
  4. Depois de clicar no elemento que quer personalizar, ele aparecerá na caixa CSS personalizada. Digite o CSS nesta caixa.

O CSS adicionado ao elemento de formulário economizará automaticamente.

Desativar o branding ActiveCampaign

Se você estiver em um plano Plus, Professional ou Enterprise, você pode remover o branding da ActiveCampaign do seu formulário. Os usuários do plano Lite não podem desligar o branding.

Para desativar o branding da ActiveCampaign:

  1. No Construtor de formulários, clique na aba "Estilo".
  2. Role para baixo até a parte inferior da seção Geral.
  3. Clique na opção branding da AC para defini-la como "Desativada".

Esta configuração será salva automaticamente.

Esse artigo foi útil?
Usuários que acharam isso útil: 10 de 71