Como usar o bloco de HTML personalizado em formulários de registro

O que você vai aprender

Aprenda a usar o bloco de HTML personalizado para adicionar sua própria marcação a formulários de registro do Klaviyo, além dos blocos disponíveis no editor de formulários. O bloco de HTML oferece controle detalhado sobre conteúdo e layout — títulos personalizados, texto formatado, listas, tabelas, imagens e links — para que seus formulários correspondam exatamente à sua marca e à sua mensagem.

Por segurança, o bloco de HTML só oferece suporte a um conjunto específico de tags e atributos. Tudo o que estiver fora desse conjunto é removido automaticamente quando o formulário é renderizado, então nem todo o HTML que você escrever vai aparecer no site. As seções abaixo listam quais tags e atributos têm suporte e quais são sempre removidos.

Antes de começar

Observe o seguinte antes de usar HTML personalizado:

• O bloco de HTML personalizado está disponível apenas nos planos pagos da Klaviyo. Esse recurso está sendo lançado gradualmente, então talvez você ainda não o veja na sua conta.
• Seu HTML é automaticamente sanitizado por segurança. O bloco de HTML mantém apenas tags e atributos compatíveis e remove todo o restante — incluindo scripts e manipuladores de eventos — quando o formulário é renderizado. Isso protege os visitantes do seu site contra código malicioso. Como resultado, parte do HTML que você escrever pode não aparecer no site se não for compatível. Consulte a lista de tags compatíveis abaixo.
• O bloco de HTML personalizado adiciona apenas conteúdo novo. O bloco de HTML permite que você adicione seus próprios elementos a um formulário. Você não pode usá-lo para editar o HTML dos blocos existentes do seu formulário.
• O suporte da Klaviyo não pode solucionar problemas de código personalizado. Problemas causados por HTML personalizado (por exemplo, layouts quebrados, conteúdo que não é renderizado, problemas de estilo) são sua responsabilidade para depurar e corrigir. Se um formulário com HTML personalizado não estiver sendo exibido ou não estiver funcionando corretamente, remova primeiro o bloco de HTML para verificar se o seu código é a causa.
• Teste antes de publicar. O HTML personalizado pode afetar o layout e a usabilidade do formulário. Sempre visualize e teste seu formulário no desktop e no celular antes de publicar.

Adicione um bloco de HTML ao seu formulário

Para adicionar HTML personalizado a um formulário:

1. Acesse Formulários de registro e abra seu formulário no editor.
2. No painel de blocos, encontre o bloco HTML e arraste-o para o formulário, no local em que você quer que o conteúdo personalizado apareça.

3. Selecione o bloco de HTML para abrir as configurações dele. Um editor de código aparece na barra lateral do bloco.

O bloco HTML funciona como qualquer outro bloco no editor de formulários — você pode adicionar mais de um, reposicioná-los e excluí-los. O HTML personalizado fica contido no próprio bloco, então não afeta o restante da estrutura do seu formulário.

Escreva seu HTML

O editor de código começa vazio. Insira seu HTML diretamente, usando apenas tags e atributos compatíveis. Tags e atributos não compatíveis são removidos automaticamente quando seu formulário é renderizado.

Exemplo

<h2 class="promo-heading">Join our list</h2>
<p>Sign up for <strong>15% off</strong> your first order, plus:</p>
<ul>
  <li>Early access to new drops</li>
  <li>Members-only offers</li>
</ul>
<p><a href="https://www.example.com/terms" target="_blank">See terms and conditions</a></p>

Para estilizar seu HTML, adicione seus próprios nomes class aos elementos e direcione-os com CSS personalizado. Por exemplo, defina class="promo-heading" no seu cabeçalho e, em seguida, estilize .promo-heading no editor de CSS personalizado. Consulte Como usar CSS personalizado em formulários de registro para saber como ativar e escrever CSS personalizado.

Tags e atributos HTML compatíveis

Por segurança, o bloco de HTML oferece suporte às seguintes tags e atributos. Qualquer tag ou atributo que não esteja nesta lista é removido quando o seu formulário é exibido.

Atributos globais — são permitidos em todas as tags compatíveis: id, class, dir, lang, role e aria-* (atributos de acessibilidade).

As tabelas abaixo listam atributos adicionais permitidos em tags específicas, além dos atributos globais acima.

Texto e formatação

Títulos

Listas

Tabelas

Mídia e links

Esquemas de URL permitidos

Links (href) e origens de imagens (src) podem usar apenas estes esquemas de URL: http, https, mailto, tel e caminhos relativos ou âncoras #fragment. URLs que usam qualquer outro esquema (como javascript: ou data:) são removidas. Quando um link usa target="_blank", rel="noopener noreferrer" é aplicado automaticamente para manter o link seguro.

Tags e atributos removidos por segurança

Para proteger seu site e seus visitantes, o bloco HTML remove automaticamente tudo o que poderia executar código ou sequestrar seu formulário — uma classe de ataque conhecida como cross-site scripting (XSS). Os itens a seguir são sempre removidos, mesmo sendo comuns em HTML:

• Scripts: <script> e <noscript>
• Atributos de manipulador de evento: qualquer atributo cujo nome comece com on (por exemplo, onclick, onload, onerror, onmouseover)
• Frames e incorporações: <iframe>, <frame>, <frameset>, <object>, <embed>, <applet>, <portal>
• Tags de vetor e de linguagem de marcação: <svg>, <math>
• Tags de documento e de recursos: <base>, <meta>, <link> e a tag <style>
• Esquemas de URL perigosos em links ou fontes: javascript:, vbscript:, data:, filesystem:
• Atributos de substituição de envio de formulário: formaction, formmethod, formtarget, formenctype
• Tags legadas ou obsoletas: <marquee>, <bgsound>, <keygen>, <isindex>, <xmp>, <listing>, <plaintext>, <template>, <noembed>

Se parte do seu código desaparecer quando o formulário for renderizado, é provável que ele tenha usado uma tag ou um atributo que não está na lista de compatibilidade acima.

Visualizar e publicar

Depois de escrever seu HTML:

1. Use a prévia do editor para verificar a aparência do seu formulário.
2. Verifique seu formulário tanto no desktop quanto no celular, já que o HTML personalizado pode afetar cada um deles 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 registro de teste no seu formulário publicado para confirmar que todos os campos e botões ainda funcionam.
5. Publique seu formulário publicamente.

Edite ou remova o HTML personalizado

Para editar seu HTML, selecione o bloco de HTML e atualize o código nas configurações dele.

Para remover o HTML personalizado, selecione o bloco HTML e exclua-o. Isso remove o bloco e o conteúdo dele do seu formulário; o restante do seu formulário não é afetado. Remover o bloco também é a maneira mais rápida de verificar se um problema de exibição é causado pelo seu código personalizado.

Solução de problemas

Parte do meu HTML não aparece.
O bloco de HTML remove qualquer tag ou atributo que não seja compatível quando seu formulário é renderizado. Verifique seu código em relação às tags e aos atributos compatíveis acima e confirme se você não está usando uma tag ou um atributo que é removido por segurança.

Meu formulário parece estar com problema.
Revise seu HTML para ver se há tags não fechadas ou incompatíveis e regras de layout que reposicionam ou sobrepõem outros blocos. Como seu código fica em seu próprio bloco, você pode excluir o bloco HTML para confirmar se ele é a causa, depois adicioná-lo novamente e testar alterações menores.

Meu estilo não está sendo aplicado ao meu HTML.
Confirme se os nomes de class no seu HTML correspondem aos seletores no seu CSS personalizado, se o CSS personalizado está ativado e se você publicou a versão mais recente do formulário. Veja Como usar CSS personalizado em formulário de registro.

Não vejo o bloco HTML.
O HTML personalizado está disponível apenas em planos pagos e está sendo disponibilizado gradualmente. Se você estiver em um plano pago e ainda não o vir, confira novamente em breve.

Perguntas frequentes

Posso editar o HTML dos blocos existentes do meu formulário?
Não. O bloco de HTML permite adicionar um novo conteúdo personalizado a um formulário. Ele não altera o HTML dos blocos existentes do seu formulário.

Por que parte do meu código foi removida?
Por segurança, o bloco de HTML mantém apenas as tags e os atributos compatíveis e remove todo o resto — como scripts e manipuladores de eventos — para impedir que códigos maliciosos sejam executados no seu site. Veja a lista de tags e atributos removidos por segurança acima.

Posso adicionar um <script> ou outro JavaScript ao meu formulário?
Não. Scripts e atributos de manipuladores de eventos são sempre removidos para proteger os visitantes do seu site. Isso não pode ser desativado.

Posso estilizar meu bloco HTML?
Sim. Adicione seus próprios nomes class aos seus elementos HTML e direcione-os com CSS personalizado. Consulte Como usar CSS personalizado em formulário de registro.

O suporte da Klaviyo vai me ajudar a escrever ou corrigir meu HTML?
Não. O suporte da Klaviyo não pode escrever, revisar nem solucionar problemas de código personalizado. Se um formulário com HTML personalizado tiver algum problema, você vai precisar remover o bloco de HTML para descartá-lo antes que o suporte possa investigar mais a fundo.