Com o ActiveCampaign, você pode personalizar formulários para combinar com as cores da sua marca, adicionar imagens, alterar a fonte e muito mais.
Saiba mais sobre os tipos de formulários que você pode criar com o ActiveCampaign.
Neste artigo:
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:
1. Clique em "Site" no menu esquerdo da sua conta.
2. Clique na opção "Formulários" no menu site.
3. Localize o formulário com o qual deseja trabalhar e clique no botão "Editar".
4. O construtor 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 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. As opções de personalização de estilo de formulário incluem:
| 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ólido, Pontilhado, Tracejado e Duplo. |
| 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. 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ólido, Pontilhado, Tracejado e Duplo. |
| 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. As opções de personalização de estilo modal incluem:
| 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. |
| 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: Nenhum, Leve, Médio e Pesado. |
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ólido, Pontilhado, Tracejado e Duplo. |
| 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: Nenhum, Leve, Médio e Pesado. |
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ólido, Pontilhado, Tracejado e Duplo. |
| 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ólido, Pontilhado, Tracejado e Duplo. |
| 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.
1. Na página 'Visualização geral' de formulários, clique no botão "Editar" para obter o formulário com o qual deseja trabalhar.
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 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 o CSS, consulte este Tutorial CSS w3schools.com.
Para usar a opção CSS personalizada:
1. No construtor de formulários, clique na guia "Estilo".
2. Role para baixo até ver a caixa "Custom CSS".
3. Clique no botão "Inspetor" e clique no elemento de formulário que deseja modificar.
4. 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
1. No construtor de formulários, clique na guia "Estilo".
2. Role para baixo até ver a caixa "Diversos".
3. Clique no alternador de marca CA para configurá-lo na posição "Off".
Esta configuração será salva automaticamente.