Este artigo mostra como personalizar seus formulários do ActiveCampaign. Você vai aprender a mudar cores, fontes e layouts para combinar com a sua marca. Também aborda opções avançadas, como CSS personalizado e remoção do branding da ActiveCampaign.
Observação
O uso de HTML e CSS com seu formulário é recomendado para usuários avançados; você deve ter familiaridade com essas linguagens. Se você não tem familiaridade com HTML ou CSS, recomendamos trabalhar com um membro da equipe que conheça essas linguagens, ou você pode trabalhar com um de nossos [/nt]Consultores Certificados.
Nossa equipe de suporte não pode ajudar com a criação ou solução de problemas de HTML ou CSS que você adicionar ao seu formulário.
Assista a um vídeo
Assista a este vídeo para aprender a criar e personalizar seu formulário.
Acessar opções de personalização do formulário
As opções de personalização do formulário estão na aba "Estilo" do criador de formulário.
Para acessar esta guia em qualquer formulário:
- Clique em Website > Formulários no menu à esquerda.
- Clique no botão "Editar formulário" ou crie um novo formulário.
- O criador de formulários será carregado. Todas as opções de edição e estilo aparecerão no painel direito. Clique na aba "Estilo" localizada no painel direito.
Escolha um layout
Você pode escolher um layout para formulários inline, modal e de caixa flutuante. As opções de layout não estão disponíveis para formulários de barra flutuante.
Opções de layout de formulário inline
Há duas opções de layout para o seu formulário inline: horizontal ou vertical:
Opções de layout de formulário modal e caixa flutuante
Há quatro opções disponíveis para o seu formulário modal ou de caixa flutuante: sem imagem, imagem à esquerda, imagem no topo ou imagem no meio:
Personalizar um formulário
As opções de estilo em "Layout" permitem personalizar como o formulário será exibido para os visitantes do seu site. Abaixo estão as tabelas com todas as opções de personalização:
Geral
| Opções gerais de personalização | Descrição |
|---|---|
| Largura máxima | Use esta opção para ajustar a largura do seu formulário. A largura é definida em pixels. |
| Espaçamento | O espaçamento é o espaço ao redor do seu formulário. Use essa opção para aumentar ou diminuir o espaçamento. Esse valor é definido em pixels. |
| Plano de fundo do formulário | Clique no seletor de cores para alterar a cor do seu formulário ou adicionar uma imagem de fundo. |
| Plano de fundo da página | Clique no seletor de cores para alterar a cor do formulário ou adicionar uma imagem de fundo. |
| Cor das bordas | Clique no seletor de cores para alterar a cor das bordas do formulário. |
| Borda e contorno |
Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas em pixels. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos diferentes de borda: Sólida, Pontilhada, Tracejada e Dupla. Clique em "Personalizado" para escolher uma largura e um estilo diferentes para cada borda do formulário. |
| Bordas e cantos | Use essa opção para deixar os cantos do seu formulário arredondados ou quadrados. O raio do canto é definido em pixels. |
Entradas
Inputs são os campos que os visitantes do site usarão para enviar informações pessoais para você. As opções de personalização de entrada incluem:
| Opções de personalização de entrada | Descrição |
|---|---|
| Plano de fundo do campo | Clique no seletor de cores para alterar a cor dos campos de entrada. |
| Borda do campo | Clique no seletor de cores para alterar a cor das bordas do campo. |
| Cantos | Use essa opção para deixar os cantos dos campos de entrada arredondados ou quadrados. O raio do canto é definido em pixels. |
Campos
A caixa "Campos" permite personalizar a aparência dos campos do seu formulário. As opções de personalização de campos incluem:
| Opções de personalização de campos | Descrição |
|---|---|
| Cor da fonte do cabeçalho | Clique no seletor de cores para alterar a cor da fonte do cabeçalho. |
| Estilo do texto do cabeçalho | Selecione um estilo e tamanho de fonte para o cabeçalho e se deseja que o texto seja negrito, itálico ou sublinhado. |
| Cor do parágrafo | Clique no seletor de cores para alterar a cor da fonte do parágrafo. |
| Estilo de texto do parágrafo | Selecione o estilo e o tamanho da fonte do parágrafo e se deseja que o texto seja negrito, itálico ou sublinhado. |
Botão
A caixa "Botão" permite personalizar a aparência do botão de envio do seu formulário. As opções de personalização do botão incluem:
| Opções de personalização de botão | Descrição |
|---|---|
| Plano de fundo do layout | Altere a cor de fundo do botão de envio. |
| Texto do layout | Altere a cor do texto do botão. |
| Espaçamento do layout | Use esta opção para ajustar o espaçamento do seu botão. O espaçamento é definido em pixels. |
| Largura do layout | Altere a largura do botão de envio. |
| Cor das bordas | Clique no seletor de cores para alterar a cor da borda do botão. |
| Borda e contorno |
Use esta opção para adicionar uma borda ao seu botão. As bordas são definidas em pixels. Você pode aumentar ou diminuir a borda, alterar a cor da borda e selecionar entre quatro tipos diferentes de borda: Sólida, Pontilhada, Tracejada e Dupla. Clique em "Personalizado" para escolher uma largura e um estilo diferentes para cada borda do formulário. |
| Borders Corner | Use essa opção para deixar os cantos do seu botão arredondados ou quadrados. O raio do canto é definido em pixels. |
Alterar o texto do botão "Enviar"
Você pode alterar o texto do botão "Enviar" em qualquer formulário.
- Na página Formulários, clique no botão "Editar design" do formulário que deseja atualizar.
- Clique no botão "Enviar" no criador de formulário.
- O menu à direita 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 de estilo Advanced
Cada tipo de formulário no ActiveCampaign tem uma opção de CSS personalizado disponível. Este recurso é para usuários Advanced que já conhecem CSS e se sentem confortáveis em utilizá-lo.
Observe que o CSS envolve uma implementação Advanced que pode ser complexa para quem não tem familiaridade com programação. A equipe de Experiência do Cliente não consegue solucionar problemas relacionados a código CSS, por isso recomendamos entrar em contato com um desenvolvedor para obter ajuda com a implementação.
A opção de CSS personalizado fica na aba "Estilo" de cada formulário e pode ser usada para adicionar mais modificações a qualquer elemento do formulário. Por exemplo, você pode usar essa opção para:
- Ajustar a largura e a altura dos campos de entrada
- Ajuste a largura e a altura do botão de envio
- Ajustar tamanho da fonte
- Ajuste o tipo de fonte para elementos individuais. Por exemplo, você pode usar isso para deixar a fonte do texto do botão diferente do restante do formulário
Para usar a opção de CSS personalizado:
- No criador de formulário, no canto superior direito, clique para ativar o botão "Editor de código".
- Um editor HTML aparecerá na parte inferior do Criador de Formulário. Digite o CSS nessa caixa.
O CSS adicionado ao formulário será salvo automaticamente.
Desativar o branding da ActiveCampaign
Se você está em um plano Plus, Professional ou Enterprise, pode remover o branding da ActiveCampaign do seu formulário. Usuários do plano Starter não podem desativar o branding.
Para desativar o branding da ActiveCampaign:
- No criador de formulário, clique na aba "Estilo".
- Role a página para baixo até o final da seção "Geral".
- Clique no botão de alternância do branding da AC para definir a posição como "Desativado".
Essa configuração será salva automaticamente.
Saiba mais sobre o branding da ActiveCampaign em formulários.
Opções adicionais de personalização
As opções de personalização em "Opções" permitem que você personalize quando os formulários Modal, Caixa Flutuante e Flutuante aparecem no seu site, como as mensagens são exibidas após o envio do formulário, as ações do formulário e as configurações do formulário. Esta seção explica como usar as opções de personalização na aba "Opções".
Se precisar atualizar o tamanho de um formulário em um dispositivo móvel, você pode fazer isso com CSS e media queries.
Observe que o CSS envolve uma implementação avançada que pode ser complexa para quem não tem familiaridade com programação. A equipe de Experiência do Cliente não consegue solucionar problemas relacionados a código CSS, por isso recomendamos entrar em contato com um desenvolvedor para obter ajuda com a implementação.
Personalização adicional para formulários Modal, Caixa Flutuante e Barra Flutuante
Esses tipos de formulário oferecem opções de personalização adicionais que determinam quando e como o formulário aparece para os visitantes do site. Essas configurações estão localizadas em "Opções" > "Efeito de pop-up" no menu direito do criador de formulário.
| Tipo de formulário | Opções |
| Modal |
|
| Caixa flutuante |
|
| Barra flutuante |
|
Recursos adicionais para a aba "Opções":
- Saiba mais sobre "Ao enviar"
- Saiba mais sobre "Ação do formulário"
- Saiba mais sobre "Configurações do formulário"