Compreensão de estilos para um formulário de inscrição

O que você vai aprender

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

Mantenha o design do seu formulário de inscrição simples. Ele deve ser claro, organizado e ter um objetivo principal. Além disso, o senhor deve facilitar a leitura e o acompanhamento. 

Antes de começar

Antes de estilizar o formulário de inscrição, navegue até a guia Sign-up forms (Formulários de inscrição) > Create sign-up form (Criar formulário de inscrição ).O senhor pode personalizar um modelo pré-criado da biblioteca de formulários ou criar um modelo de formulário de inscrição totalmente novo. Adicione qualquer conteúdo e blocos de entrada que o senhor queira incluir antes de estilizar. 

Se estiver criando um formulário de inscrição somente para celular, consulte noções básicas: design de formulários para celular.

Tipos de formulário

Na parte superior da seção Styles (Estilos ), é possível escolher um tipo de formulário: pop-up, página inteira, flyout ou incorporado:

• Os popups 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 popups têm a maior taxa de conversão de todos os tipos de formulário. 
• Os flyouts deslizam para dentro da janela do navegador a partir de qualquer direção que o senhor selecionar. Esses, assim como os pop-ups, podem ser usados para fazer com que alguém realize algo ou redirecioná-lo, mas, como é uma opção menos intrusiva, o senhor pode usá-la para coletar informações sobre seus navegadores de forma passiva.
• Os formulários incorporados aparecem onde o senhor cola o snippet de código fornecido em seu site. Os formulários incorporados são os formulários de inscrição menos intrusivos 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 toda a atenção dos compradores. Esses são formulários de alta conversão, pois não podem ser facilmente ignorados, mas isso também os torna mais intrusivos, pois os compradores precisam interagir com o formulário para fechá-lo.
  • Considere o uso de um formulário de página inteira como uma página de destino para aumentar sua lista de assinantes. 
• Os banners aparecem como uma barra na parte superior ou inferior de uma página da Web. Eles são menos intrusivos do que popups 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. O senhor pode configurar o banner para rolar com a página ou permanecer fixo, adicionar blocos de conteúdo ou campos de entrada diretamente ao banner ou configurar o banner para que, quando alguém clicar nele, seja aberto um formulário diferente da sua conta. 
  • Para acionar um formulário diferente a ser exibido quando um comprador clicar no banner, clique no botão na visualização e defina a Ação como Abrir outro formulário e, em seguida, escolha o formulário ativo que deseja 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 inscrição, 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 aspectos que o senhor deve ter em mente:

• Há muitos tipos de formatos de imagem para escolher. Os JPEGs equilibram bem a qualidade e o tamanho para imagens coloridas, enquanto os PNGs podem manter imagens transparentes ou logotipos com aparência nítida. 
  • Procure ter um tamanho de arquivo de 50-100 KB para imagens laterais e menos de 200 KB para imagens de fundo para garantir imagens de alta qualidade sem diminuir o tempo de carregamento do site.
• Como acontece com todas as imagens visualizadas na Web, os tamanhos de arquivo maiores levam a tempos de carregamento mais lentos.
  • Observe que uma imagem de largura total a 72 dpi geralmente terá mais de 1 MB, e a redução do tamanho da imagem pode reduzir sua qualidade. Considere o equilíbrio entre a qualidade da imagem e o tempo de carregamento ao escolher as imagens.
• Certifique-se de usar uma imagem de qualidade razoavelmente alta para obter melhores resultados. 
  
  • Na Web, a prática recomendada é usar a resolução de 72 dpi. Para equilibrar a qualidade da imagem e a velocidade de carregamento, tente manter suas imagens entre 600 e 1000 px de largura e menos de 2000px de altura para imagens de largura total. As imagens que não ocupam toda a largura do e-mail podem ser menores que 600px.
    
    • Observe que, se estiver usando um formulário de registro de página inteira, o senhor precisará de uma imagem maior e de alta resolução (por exemplo, uma largura mínima de 1980px) para caber no formulário de tamanho maior. Lembre-se, porém, de 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 inscrição 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, mantenha imagens de alta resolução, 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á até a seção Styles (Estilos ) e role até as configurações de Side Image (Imagem lateral ).
2. Selecione Left image (Imagem esquerda ) ou Right image (Imagem direita), dependendo de onde o senhor deseja que a imagem apareça.
   
3. Selecione uma imagem. Por padrão, os formulários com imagens laterais são definidos com 780 px de largura e tamanho médio; no entanto, isso pode ser ajustado na seção Side Image (Imagem lateral ) da guia Styles (Estilos ), dependendo do tamanho do formulário ou se o usuário deseja que a imagem apareça menor ou maior.

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

Adicionar uma imagem de fundo

Para adicionar uma imagem de fundo:

1. Ative a configuração Background Image (Imagem de fundo ) em Form Background (Fundo do formulário).
2. Faça upload de sua imagem usando o botão Browse.
3. Ajuste as configurações de exibição de acordo com sua preferência.
   

Se o senhor adicionar uma imagem lateral ou de fundo ao formulário, visualize todas as etapas do formulário, inclusive a mensagem de sucesso, selecionando cada etapa na barra de menu superior. Por padrão, a altura do formulário se ajusta com base no conteúdo e nos campos do formulário em cada etapa, portanto, algumas etapas podem ser mais altas ou mais baixas do que outras. Quando o formulário inclui uma imagem, o conteúdo de algumas imagens pode ser cortado em etapas de tamanho menor. Para evitar isso, defina uma altura mínima em Form Type (Tipo de formulário ) na seção Styles (Estilos ). 

Opções de cor e espaçamento

Use as configurações Form Styles (Estilos de formulário ) e Input Field Styles (Estilos de campo de entrada ) para definir cores, cores de borda, preenchimento e margens. Essas configurações serão aplicadas em todas as etapas do formulário, a menos que o senhor 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 blocos de conteúdo (por exemplo, um campo de e-mail ou número de telefone) em Input Field Text Styles (Estilos de texto do campo de entrada).

Edite o texto de um bloco de conteúdo específico clicando no bloco na visualização do formulário e usando o menu de opções de texto que aparece. Klaviyousa o padrão de codificação UTF-8, o que significa que ele suporta caracteres latinos, emojis, caracteres de byte duplo e muito mais.

Seu formulário de inscrição pode usar as fontes seguras para a Web nativas dos editores do Klaviyo, uma de nossas fontes personalizadas hospedadas pelo Klaviyo ou o senhor pode adicionar suas próprias fontes personalizadas. Saiba como usar fontes personalizadas em seus formulários de inscrição. 

Fechar ícones

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

Se o senhor optou por usar um formulário de página inteira, a única maneira de os clientes descartarem o formulário é clicando no ícone de fechar. Isso é útil para captar a atenção deles; mas certifique-se de que o ícone de fechar esteja claro e visível para que os compradores não fiquem frustrados com a interrupção do formulário de página inteira.

HTML e CSS personalizados

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

Resultado

O senhor já aprendeu a ajustar várias configurações de estilo no editor de formulários para criar seu formulário de registro.

Próximas etapas

Depois de criar o estilo do formulário de inscrição, saiba como configurar o comportamento do formulário, inclusive quais visitantes devem ver o formulário e quando ele deve aparecer. Consulte nosso artigo sobre como escolher as configurações de comportamento e segmentação de formulários.

Depois de publicar o formulário de inscrição, personalize o e-mail de confirmação de opt-in, se o opt-in duplo estiver ativado em 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 aos novos assinantes.

Recursos adicionais

• Introdução aos formulários de inscrição
• Como fazer um teste A/B em um formulário de inscrição
• Curso: Criar formulários de inscrição estratégicos