Como fazer um formulário de registro aparecer quando um botão é clicado

O que você vai aprender

Saiba como fazer com que um formulário de registro apareça no seu site quando um visitante clicar em um determinado botão. Este guia mostrará como ajustar seu formulário para ser exibido por meio de um acionador personalizado, criar e adicionar um novo botão ao seu site e colar um snippet de código curto no HTML do seu site para que, ao clicar no botão, o formulário de registro seja acionado.

Se você é desenvolvedor(a) e quer criar um gatilho personalizado para o seu formulário de registro, acesse nosso recurso para desenvolvedores sobre como acionar um formulário popup ou flyout com um gatilho personalizado.

Para colar esse código é preciso ter acesso ao HTML e à plataforma de e-commerce do seu site. Por isso, nossa equipe de suporte não consegue oferecer assistência prática. Se você não tem um desenvolvedor na sua equipe e não se sente à vontade para adicionar o código por conta própria, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.

Criar um novo botão

Primeiro, crie um novo botão no seu site que fará o formulário de registro aparecer quando ele for clicado. Você precisa garantir que seu formulário de registro esteja configurado corretamente no Klaviyo antes de adicionar o botão ao seu site. Para isso:

1. Crie um novo formulário de registro para aparecer quando o botão for clicado ou escolha um formulário que você já criou.
2. Na guia Estilos, o Tipo de formulário deve estar definido como Popup, flyout ou Página inteira. Formulários incorporados não podem ser acionados quando um botão é clicado.
3. Na aba Segmentação e comportamentos , selecione Mostrar apenas no acionador personalizado em Tempo.
   
4. Quando você estiver satisfeito(a) com o design e o conteúdo do seu formulário, clique em Publicar.
5. Em seguida, abra o editor do seu formulário e escolha as seguintes configurações
6. Copie o código abaixo:
   

   <button class="klaviyo_form_trigger">Click here</button>

7. Cole o código no HTML de qualquer página do seu site em que você queira que o botão apareça. Este botão usará os estilos padrão do modelo do seu site. Se você quiser personalizar ainda mais a aparência do botão, consulte seu desenvolvedor ou um parceiro Klaviyo.

Observe que, se você adicionar vários botões ao seu site e cada um acionar formulários de registro diferentes, você precisará usar um nome exclusivo para classificar cada botão (por exemplo, klaviyo_form_trigger1, klaviyo_form_trigger2).

Defina o botão para acionar seu formulário de registro

Agora que você adicionou um novo botão ao seu site, o próximo passo é configurar o acionador para que seu formulário de registro apareça quando ele for clicado. Configure o acionador adicionando um pequeno snippet de JavaScript personalizado ao seu site:

1. Copie o snippet de código abaixo:
   

   <script type="text/javascript">
   	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
   		window._klOnsite = window._klOnsite || []; 
   		window._klOnsite.push(['openForm', 'FORM_ID']);
   	});
   </script>

2. Cole o snippet de código diretamente abaixo do código do botão que você adicionou ao seu site na última seção.
3. No snippet que você acabou de colar, substitua FORM_ID pelo ID do seu formulário de registro.
   
   • Para encontrar o ID do formulário, volte para o Klaviyo e abra o editor de formulários do seu formulário de registro. Copie o código de 6 dígitos no fim do URL para adicionar ao seu snippet de código; esse é o ID do formulário.
   
4. O código final deve incluir o código do novo botão e o acionador do formulário de registro com seu ID de formulário exclusivo. Certifique-se de colar isso em todas as páginas em que você adicionou o código do botão.
   
   • Veja um exemplo do código concluído em um editor de páginas da Shopify:
   

   Se você ajustou a classe do botão na última etapa (isto é, substituiu klaviyo_form_trigger por outro texto ou adicionou um número), não se esqueça de atualizar este código com o texto que você usou.

5. Salve as mudanças.

Teste seu botão

Depois de salvar todas as alterações no código do seu site, acesse seu site e clique no novo botão. Quando você fizer isso, o formulário de registro vai aparecer.

Está tendo problemas? Acesse o Community Forum da Klaviyo para receber orientações de outros usuários da Klaviyo.