Como funcionam estilos de formulários de registro

O que você vai aprender

Saiba como usar o criador de formulário de registro da Klaviyo para criar seu formulário editando as configurações de design disponíveis na seção Estilos. As configurações de estilo se aplicam a todo o seu formulário de registro, inclusive em todas as etapas do formulário e na mensagem de sucesso.

Mantenha o design do seu formulário de registro simples. Ele deve ser claro, organizado e ter 1 objetivo principal. Além disso, você vai querer que ele seja fácil de ler e de acompanhar.

Antes de começar

Antes de estilizar seu formulário de registro, acesse a guia Formulários de registro > Criar formulário de registro. Você pode personalizar um modelo pronto da biblioteca de formulários ou criar um modelo de formulário de registro totalmente novo. Adicione quaisquer blocos de conteúdo e de entrada que você queira incluir antes de aplicar o estilo.

Se você estiver criando um formulário de registro somente para dispositivos móveis, consulte o básico: design de formulário para dispositivos móveis.

Tipos de formulário

Na parte superior da seção Estilos, você pode escolher um tipo de formulário: popup, página inteira, flyout ou incorporado:

• Pop-ups aparecem no meio da janela do navegador. Um pop-up chama a atenção e é melhor usado para ofertas importantes ou mensagens críticas. Os pop-ups têm a maior taxa de conversão entre todos os tipos de formulário.
• Flyouts deslizam para dentro da janela do navegador a partir de qualquer direção que você selecionar. Esses, assim como pop-ups, podem ser usados para fazer alguém realizar alguma ação ou redirecioná-lo, mas, como é uma opção menos invasiva, você pode usá-los para coletar informações sobre seus visitantes de forma passiva.
• Os formulários incorporados aparecem onde você cola o snippet de código fornecido no seu site. Os formulários incorporados são o formulário de registro menos intrusivo e normalmente são usados no rodapé de um site para coletar endereços de e-mail.
• Os formulários de página inteira são exibidos em toda a janela do navegador, capturando a atenção total dos seus compradores. Esses formulários têm alta conversão, pois não podem ser facilmente ignorados; porém, isso também os torna mais intrusivos, já que os compradores precisam interagir com o formulário para fechá-lo.
  • Considere usar um formulário de página inteira como landing page para aumentar sua lista de assinantes.
• Banners aparecem como uma barra na parte superior ou inferior de uma página da web. Eles são menos intrusivos do que pop-ups ou formulários de página inteira, oferecendo visibilidade contínua e um design compatível com dispositivos móveis que se integra perfeitamente ao seu site. Você pode configurar o banner para rolar com a página ou ficar fixo, adicionar blocos de conteúdo ou campo de dados diretamente no banner ou configurar o banner para que, quando alguém clicar nele, seja acionada a abertura de um formulário diferente da sua conta.
  • Para acionar a exibição de um formulário diferente quando um cliente clicar no banner, clique no botão na prévia e defina a Ação como Abrir outro formulário, depois escolha o formulário ativo que você quer exibir. Observe que isso não é possível para formulários incorporados.

Imagens de fundo e imagens laterais

Para adicionar imagens personalizadas ao seu formulário de registro, use uma imagem lateral ou uma imagem de fundo. As imagens laterais aparecem à esquerda ou à direita do conteúdo do formulário, enquanto as imagens de fundo são exibidas atrás dos campos do formulário.

Ao usar uma imagem em um formulário, há alguns pontos para ter em mente:

• Há muitos tipos de formatos de imagem para escolher. Os JPEGs equilibram bem qualidade e tamanho para imagens coloridas, enquanto os PNGs mantêm imagens transparentes ou logotipos com boa nitidez.
  • Procure manter o tamanho do arquivo em 50–100 KB para imagens laterais e em menos de 200 KB para imagens de fundo, para garantir imagens de alta qualidade sem deixar o tempo de carregamento do seu site mais lento.
• Como acontece com todas as imagens vistas na web, arquivos maiores levam a tempos de carregamento mais lentos.
  • Observe que uma imagem de largura total a 72dpi geralmente terá mais de 1 MB, e reduzir o tamanho da imagem pode reduzir sua qualidade. Considere o equilíbrio entre a qualidade da imagem e o tempo de carregamento ao escolher imagens.
• Use uma imagem de qualidade razoavelmente alta para obter os melhores resultados.
  
  • Na web, usar a resolução de 72 dpi é uma boa prática. Para equilibrar a qualidade da imagem e a velocidade de carregamento, tente manter suas imagens entre 600 e 1.000 px de largura e com menos de 2.000 px de altura para imagens em largura total. Imagens que não ocupam toda a largura do e-mail podem ser menores que 600 px.
    
    • Observe que, se você estiver usando um formulário de registro de página inteira, será necessária uma imagem maior e de alta resolução (por exemplo, uma largura mínima de 1980px) para se adequar ao formulário em tamanho maior. No entanto, tenha em mente que isso ainda pode afetar o tempo de carregamento.
• Adicione texto alternativo à sua imagem para promover a acessibilidade para todos os usuários que interagem com seus formulários.

Como os formulários de registro são renderizados em navegadores (ao contrário dos e-mails, que são renderizados em ESPs), há menos recomendações sobre como formatá-los e ajustá-los. Os navegadores podem renderizar imagens de todos os tipos e tamanhos; portanto, em geral, use imagens em alta resolução, com tamanhos de arquivo gerenciáveis, e teste a aparência em cada tipo de dispositivo.

Adicionar uma imagem lateral

Para adicionar uma imagem lateral:

1. Vá para a seção Estilos e role até as configurações de Imagem lateral.
2. Selecione Imagem à esquerda ou Imagem à direita, dependendo de onde você quer que a imagem apareça.
   

3. Selecione uma imagem. Por padrão, os formulários com imagens laterais têm 780px de largura e tamanho médio; no entanto, isso pode ser ajustado na seção Imagem lateral da aba Estilos, dependendo do tamanho do formulário ou se você quiser que a imagem apareça menor ou maior.

Observe que as imagens laterais são definidas no nível da etapa, então você pode definir imagens separadas para cada etapa do seu formulário de registro. Para mais informações sobre opções de exibição para imagens laterais, consulte nosso artigo como adicionar imagens laterais em formulários de registro.

Adicionar uma imagem de fundo

Para adicionar uma imagem de fundo:

1. Ative a configuração Imagem de fundo em Fundo do formulário.
2. Faça upload da sua imagem usando o botão Procurar.
3. Ajuste as configurações de exibição conforme sua preferência.
   

Se você adicionar uma imagem lateral ou de fundo ao seu formulário, visualize todas as etapas do formulário, incluindo a mensagem de sucesso, selecionando cada etapa na barra de menu superior. Por padrão, a altura do seu formulário se ajusta com base no conteúdo e nos campos do formulário em cada etapa, então algumas etapas podem ser mais altas ou mais baixas do que outras. Quando seu formulário inclui uma imagem, parte do conteúdo da imagem pode ser cortada em etapas de tamanho menor. Para evitar isso, defina uma altura mínima em Tipo de formulário na seção Estilos.

Opções de cor e espaçamento

Use as configurações de Estilos de formulário e Estilos de campo de dados para definir cores, cores da borda, preenchimento e margens. Essas configurações se aplicarão a todas as etapas do seu formulário, a menos que você aplique configurações conflitantes (por exemplo, para texto ou cores) nas configurações de estilo de um bloco de conteúdo específico.

Fontes e estilos de texto

Edite o texto (por exemplo, fonte, tamanho, cor etc.) dos seus blocos de conteúdo (por exemplo, um campo de e-mail ou número de telefone) em Estilos de texto do campo de dados.

Edite o texto de um bloco de conteúdo específico clicando no bloco na prévia do formulário e usando o menu de opções Texto que aparece. O editor de formulários da Klaviyo usa o padrão de codificação UTF-8, ou seja, é compatível com caracteres latinos, emojis, caracteres de byte duplo e muito mais.

Seu formulário de registro pode usar as fontes seguras para a web nativas dos editores da Klaviyo, uma das nossas fontes personalizadas hospedadas na Klaviyo ou você pode adicionar suas próprias fontes personalizadas. Saiba como usar fontes personalizadas nos seus formulários de registro.

Ícones "Fechar"

Você pode ajustar o tamanho, a cor e o estilo do ícone de fechar do seu formulário (o X no canto superior direito). Clique no ícone X no editor de formulários e, em seguida, ajuste as configurações no editor à esquerda. Saiba mais sobre como estilizar o ícone de fechar de um formulário.

Se você selecionou usar um formulário de página inteira, a única forma de seus clientes dispensarem o formulário é clicando no ícone de fechar. Isso ajuda a capturar a atenção deles; mas, garanta que o ícone de fechar esteja claro e visível para que os compradores não fiquem frustrados com a interrupção do seu formulário de página inteira.

HTML e CSS personalizados

No momento, o editor de formulários de registro do Klaviyo não oferece suporte a conteúdo personalizado de HTML ou CSS. Para obter dicas e inspiração sobre como personalizar seu formulário usando o editor do Klaviyo, acesse o fórum do Community.

Resultado

Agora você aprendeu como ajustar várias configurações de estilo no editor de formulários para criar seu formulário de registro.

Próximas etapas

Depois de estilizar seu formulário de registro, saiba como configurar os comportamentos do formulário, incluindo quais visitantes devem ver o formulário e quando ele deve aparecer. Acesse nosso artigo como escolher a segmentação de formulários e as configurações de comportamento.

Depois de publicar seu formulário de registro, personalize seu e-mail de confirmação de inscrição, caso a inscrição em duas etapas esteja ativada para sua lista. Em seguida, crie uma série de boas-vindas para entregar a oferta do seu formulário (por exemplo, um desconto ou frete grátis no primeiro pedido) e apresentar sua marca a novos assinantes.

Recursos adicionais