Com o ActiveCampaign, você pode personalizar formulários para combinar com as cores da sua marca, adicionar imagens, alterar a fonte e muito mais.
Assistir ao 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 guia "Estilo" no construtor de formulários.
Para acessar esta guia para qualquer formulário:
- Clique em "Site" > "Formulários" no menu à esquerda.
- Edite ou crie um novo formulário.
- O construtor de formulários carregará. Todas as opções de edição e estilo aparecerão no painel direito. Clique na guia "Estilo" localizada no painel direito.
Personalize uma forma inline
Com a forma inline, você pode escolher um layout e personalizar o estilo para o formulário e enviar o botão.
Layout
Clique em qualquer opção para escolher um layout horizontal ou vertical para o formulário.
Estilo de forma
A caixa "Form Style" 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 de personalização de estilo de formulário | Descrição |
|---|---|
| Fundo | Altere a cor de fundo do formulário ou torne-a transparente. 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 sua marca. |
| Fronteira | 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 diferentes: Sólida, Pontilhada, Traçada e Dupla. |
| Raio de canto | Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio de canto é definido como um valor de pixel. |
| Largura | Use esta opção para ajustar a largura do formulário. A largura é definida como um valor de pixel. |
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 diferentes: Sólida, Pontilhada, Traçada e Dupla. |
| Raio de canto | Use esta opção para deixar os cantos do botão arredondados ou quadrados. O raio de canto é 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 será capaz de ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.
Personalize uma forma 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 sua marca. |
| 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 sua forma. Você pode usar esta opção para aumentar ou diminuir o padding. Isso é definido como um valor de pixel. |
| Raio de canto | Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio de canto é definido como um valor de pixel. |
| Sombra | Use isso para adicionar uma sombra ao seu formulário. Fazer isso vai ajudá-lo a se destacar. 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 escolhidor de cores para alterar a cor do texto do campo de entrada. |
| Raio de canto | Use esta opção para tornar os cantos dos campos de entrada arredondados ou quadrados. O raio de canto é 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 de canto | Use esta opção para deixar os cantos do botão arredondados ou quadrados. O raio de canto é 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 será capaz de ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.
Personalize uma forma 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 sua marca. |
| 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 sua forma. Você pode usar esta opção para aumentar ou diminuir o padding. Isso é definido como um valor de pixel. |
| Raio de canto | Use esta opção para tornar os cantos do seu formulário arredondados ou quadrados. O raio de canto é definido como um valor de pixel. |
| Sombra | Use isso para adicionar uma sombra ao seu formulário. Fazer isso vai ajudá-lo a se destacar. 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 escolhidor de cores para alterar a cor do texto do campo de entrada. |
| Raio de canto | Use esta opção para tornar os cantos dos campos de entrada arredondados ou quadrados. O raio de canto é 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 de canto | Use esta opção para deixar os cantos do botão arredondados ou quadrados. O raio de canto é 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 será capaz de ajustar a altura ou largura do botão aqui. Você precisará usar CSS personalizado para fazer esses ajustes.
Personalize uma forma 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 sua marca. |
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 de canto | Use esta opção para deixar os cantos do botão arredondados ou quadrados. O raio de canto é 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 será capaz de 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ê deseja 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ê deseja usar para o botão.
O novo texto do botão será salvo automaticamente.
Personalização avançada
Cada tipo de formulário no 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 guia "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 guia "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ê deseja modificar.
- Depois de clicar no elemento que deseja personalizar, ele aparecerá na caixa CSS personalizada. Digite o CSS nesta caixa.
O CSS adicionado ao elemento de formulário economizará automaticamente.
Desativar a marca ActiveCampaign
Se você estiver em um plano Plus, Professional ou Enterprise, você pode remover a marca ActiveCampaign do seu formulário. Os usuários do plano Lite não são capazes de desligar a marca.
Desativar a marca ActiveCampaign
- No Construtor de formulários, clique na guia "Estilo".
- Role para baixo até ver a caixa "Diversos".
- Clique na alternância de identidade visual AC para defini-la para a posição "Off".
Esta configuração será salva automaticamente.