Como usar CSS personalizado em formulários de registro

Saiba como usar o CSS personalizado para estilizar seus formulários de registro da Klaviyo além do que está disponível no editor de formulários. O CSS personalizado oferece controle refinado sobre propriedades como altura da linha, espaçamento entre letras e espaçamento entre elementos, para que seus formulários correspondam exatamente à sua marca.

Antes de começar

Observe o seguinte antes de usar o CSS personalizado:

• O CSS personalizado está disponível somente em planos pagos da Klaviyo. Esse recurso está sendo implementado gradualmente, portanto, talvez você ainda não o veja em sua conta.
• O suporte da Klaviyo não pode solucionar problemas de código personalizado. Problemas causados pelo CSS personalizado (por exemplo, layouts quebrados, campos ocultos, problemas de renderização) são de sua responsabilidade para depurar e corrigir. Se um formulário com CSS personalizado não estiver sendo exibido ou não estiver se comportando corretamente, desative o CSS personalizado primeiro para verificar se seu código é a causa.
• O CSS personalizado aplica apenas o estilo. Você não pode adicionar ou editar o HTML do seu formulário ou seus blocos por meio desse recurso.
• Teste antes de publicar. O CSS personalizado pode afetar a usabilidade do formulário (por exemplo, ocultar acidentalmente um campo obrigatório pode impedir inscrições). Sempre visualize e teste seu formulário antes de publicá-lo.

Habilitar CSS personalizado

Para habilitar o CSS personalizado em um formulário:

1. Navegue até Formulários de registro e abra seu formulário no editor.
2. Selecione a aba Estilos.
3. Role até a seção CSS personalizado na parte inferior do painel.
4. Ativar CSS personalizado.
5. Revise a mensagem de aviso. Ao habilitar o CSS personalizado, você reconhece que o Suporte da Klaviyo não pode ajudar com problemas causados pelo seu código personalizado.

Uma vez habilitado, um editor de CSS aparece onde você pode escrever CSS personalizado para seu formulário. O CSS personalizado está habilitado por formulário; ativá-lo para um formulário não afeta seus outros formulários.

Definir nomes de classes em componentes de formulário

Quando o CSS personalizado está habilitado, cada componente no seu formulário recebe um campo de classe CSS, visível na parte inferior da barra lateral do componente quando você o seleciona. O nome da classe usa como padrão o nome do componente, e você pode substituí-lo pelo seu para facilitar o acesso.

Use esses nomes de classe como seletores no seu CSS. Definir os nomes das suas próprias classes é a maneira mais confiável de segmentar os elementos do formulário, pois eles permanecem estáveis e legíveis.

Se você desativar o CSS personalizado mais tarde, os nomes das suas classes serão mantidos e reaparecerão se você reativá-lo.

Escreva seu CSS

O editor CSS começa vazio, pois não mostra os estilos atuais do formulário, pois eles são gerados quando o formulário é renderizado no seu site. Para segmentar elementos, use qualquer uma dessas abordagens:

• Use os nomes das suas classes. Consulte os nomes das classes que você definiu nos componentes do formulário (recomendado).
• Inspecione seu formulário ativo. Abra o formulário publicado no seu site e use as ferramentas de desenvolvedor do navegador (clique com o botão direito do mouse > Inspect) para identificar os seletores que deseja segmentar.

Evite segmentar os nomes de classes gerados automaticamente pela Klaviyo. Eles são internos, podem incluir valores hash e podem ser alterados sem aviso prévio, o que silenciosamente quebraria seu CSS. Use seus próprios nomes de classe.

Exemplo

Suponha que você defina o nome da classe form-headline no bloco do seu título e email-input no bloco de entrada de e-mail:

.form-headline {
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.email-input {
  margin-bottom: 12px;
}

O CSS personalizado também desbloqueia estilos que não estão disponíveis no editor, como texto da direita para a esquerda:

.form-headline {
  direction: rtl;
  text-align: right;
}

Visualizar e publicar

Depois de escrever seu CSS:

1. Use o editor de visualização para verificar a aparência do formulário.
2. Verifique seu formulário em desktop e celular, pois o CSS personalizado pode afetar cada um de forma diferente.
3. Publique seu formulário em uma página não pública para validar como ele aparece no site.
4. Envie um teste de registro no seu formulário publicado para confirmar que todos os inputs e botões ainda funcionam.
5. Publique seu formulário publicamente.

Desabilitar CSS personalizado

Para remover o estilo personalizado, desative o CSS personalizado na aba Estilos. Seu formulário retorna imediatamente ao estilo padrão do editor. Essa também é a maneira mais rápida de verificar se um problema de exibição é causado pelo seu código personalizado. Seu código CSS anterior será salvo se você optar por reativar o CSS personalizado.

Solução de problemas

Meu CSS não está sendo aplicado.
Confirme se o CSS personalizado está ativado, se seus seletores correspondem aos nomes das classes definidos em seus componentes e se você publicou a versão mais recente do formulário. Os estilos no seu site também podem entrar em conflito ou substituir os estilos de formulário; use as ferramentas de desenvolvedor do navegador para verificar quais regras estão ganhando.

Meu formulário parece quebrado ou parou de coletar inscrições.
Desabilite o CSS personalizado para confirmar a causa e, em seguida, revise seu código. Verifique especialmente as regras que ocultam ou reposicionam entradas e botões.

Não vejo a seção CSS personalizado.
O CSS personalizado só está disponível em planos pagos e está sendo implementado gradualmente. Se você estiver em um plano pago e ainda não o vir, verifique novamente em breve.

Os estilos de tipografia em uma classe personalizada não estão sendo aplicados.

Se estilos de layout como margin funcionarem, mas estilos de texto como letter-spacing ou line-height não, é provável que a classe personalizada esteja anexada ao wrapper externo, enquanto o texto visível é renderizado em um elemento filho aninhado. Nesse caso, direcione também os elementos filhos, por exemplo: .form-headline, .form-headline * { ... }.

Perguntas frequentes

Posso adicionar HTML personalizado ao meu formulário?
Não. Você não pode adicionar elementos HTML a um formulário ou editar o HTML de blocos existentes. O CSS personalizado só altera o estilo dos componentes existentes do formulário.

O CSS personalizado funciona em todos os meus formulários?
O CSS personalizado está habilitado por formulário para formulários exibidos no seu site. Ative-o individualmente em cada formulário que deseja personalizar.

O suporte da Klaviyo me ajuda a escrever ou corrigir meu CSS?
Não. O suporte da Klaviyo não pode escrever, revisar ou solucionar problemas de código personalizado. Se um formulário com CSS personalizado tiver um problema, será solicitado que você desative o CSS personalizado para descartá-lo antes que o Suporte possa investigar mais.

O que acontece com meu CSS se eu desativar o recurso?
Seu formulário é revertido para o estilo padrão. Os nomes das classes dos componentes são salvos e restaurados se você reativar o CSS personalizado.