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:
- Clique em "Site" "Formulários" no menu à esquerda.
- Edite ou crie um novo formulário.
- 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.
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:
*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:
*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.
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.
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.
- Na página Formulários, clique no botão "Editar" do formulário que você quer atualizar.
- Clique no botão "Enviar" no construtor de formulários.
- O menu direito exibirá a etiqueta do botão e um campo. Digite o texto que você quer usar para 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:
- No Construtor de formulários, clique na aba "Estilo".
- Role para baixo até ver a caixa "CSS personalizado".
- Clique no botão "Inspetor" e, em seguida, clique no elemento de formulário que você quer modificar.
- 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:
- No Construtor de formulários, clique na aba "Estilo".
- Role para baixo até a parte inferior da seção Geral.
- Clique na opção branding da AC para defini-la como "Desativada".
Esta configuração será salva automaticamente.