Este artigo mostra como personalizar seus formulários da ActiveCampaign. Você aprenderá a mudar cores, fontes e layouts para corresponder à sua marca. Ele também abrange opções avançadas, como CSS personalizado e remoção do branding da ActiveCampaign.
Tome nota
O uso de HTML e CSS com seu formulário é recomendado para usuários avançados; você deve estar confortável com esses idiomas. Se você não estiver familiarizado com HTML ou CSS, recomendamos trabalhar com um membro da equipe que esteja familiarizado com esses idiomas ou você possa trabalhar com um de nossos Consultores Certificados.
Nossa equipe de suporte não é capaz de ajudá-lo a criar ou solucionar problemas qualquer HTML ou CSS que você adicionar ao seu formulário.
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 do formulário |
Altere a cor de fundo do formulário ou torne-a transparente. Você pode selecionar cores do Seu Kit de Marca (se usar), cores padrão ou cores personalizadas. Esse tipo de formulário não oferece suporte a imagens de plano de fundo. |
| Fundo |
Isso se refere à página em que o formulário aparece ao usar a opção de integração "Link". Você pode usar isso para ajustar a cor de fundo da página de formulário. Você pode selecionar cores do Seu Kit de Marca (se usar), cores padrão ou cores personalizadas. Os planos de fundo da página não aparecem ao incorporar um formulário. |
| 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. |
| Espaçamento | Espaçamento refere-se ao espaço em torno de seu formulário. Você pode usar esta opção para aumentar ou diminuir o espaçamento. Isso é definido como um valor de pixel. |
| 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. Esta opção não está disponível com o plano Starter. |
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. |
| Espaçamento | Espaçamento é o espaço ao redor do botão. Você pode usar esta opção para aumentar ou diminuir o espaçamento. 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. |
| Espaçamento | Espaçamento é o espaço em torno de seu formulário. Você pode usar esta opção para aumentar ou diminuir o espaçamento. 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. |
| Espaçamento | Use esta opção para ajustar o espaçamento do botão. O espaçamento é 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 "Estilo de formulário" permite personalizar a aparência do formulário para corresponder aos 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. |
| Espaçamento | Espaçamento é o espaço em torno de seu formulário. Você pode usar esta opção para aumentar ou diminuir o espaçamento. 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. |
| Espaçamento | Use esta opção para ajustar o espaçamento do botão. O espaçamento é 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. |
| Espaçamento | Use esta opção para ajustar o espaçamento do botão. O espaçamento é 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
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 Starter 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.