Como acionar um formulário de inscrição para aparecer quando um botão é clicado

O que você vai aprender

Saiba como acionar um formulário de inscrição para aparecer em seu site quando um visitante clicar em um determinado botão. Este guia o orientará no ajuste do formulário para ser exibido em um acionador personalizado, criando e adicionando um novo botão ao site e colando um pequeno trecho de código no HTML do site para que o clique no botão acione o formulário de inscrição. 

Se o senhor for um desenvolvedor e quiser codificar de forma personalizada um acionador para o seu formulário de inscrição, acesse nosso recurso para desenvolvedores sobre como acionar de forma personalizada um formulário pop-up ou flyout. 

Criar um novo botão 

Primeiro, crie um novo botão em seu site que acionará o formulário de inscrição a ser exibido quando ele for clicado. O senhor precisa se certificar de que o formulário de inscrição está configurado corretamente no Klaviyo antes de adicionar o botão ao seu site. Para isso:

1. Crie um novo formulário de inscrição para ser exibido quando o botão for clicado ou escolha um formulário que o senhor já tenha criado.
2. Na guia Styles (Estilos ), o Form Type (Tipo de formulário ) deve ser definido como Popup, Flyout ou Full Page (Página inteira). Os formulários incorporados não podem ser acionados quando um botão é clicado.
3. Na guia Targeting & Behaviors , selecione Only show on custom trigger (Mostrar somente no acionador personalizado ) em Timing (Tempo).
   
4. Quando o senhor estiver satisfeito com o design e o conteúdo do formulário, clique em Publish (Publicar ). 
5. Em seguida, abra o editor de seu formulário e escolha as seguintes configurações
6. Copie o código abaixo:

   <button class="klaviyo_form_trigger"> Clique aqui</button>

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

Observe que, se adicionar vários botões ao seu site que acionam diferentes formulários de inscrição, será necessário 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 inscrição

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

1. Copie o trecho 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 o senhor acabou de colar, substitua FORM_ID pelo ID do seu formulário de inscrição.
   • Para encontrar o ID do formulário, volte para o Klaviyo e abra o editor de formulários do seu formulário de inscrição. Copie o código de 6 dígitos no final do URL para adicionar em seu snippet de código; esse é o ID do formulário.
     
4. O código preenchido deve incluir o novo código do botão e o acionador do formulário de inscrição com seu ID de formulário exclusivo. Certifique-se de colar esse código em todas as páginas em que o senhor adicionou o código do botão.
   • Aqui está um exemplo do código concluído em um editor de página do Shopify: 
     
     

     Se você ajustou a classe do botão na última etapa (ou seja, substituiu klaviyo_form_trigger por algum outro texto ou adicionou um número), certifique-se de atualizar esse código com o texto que usou. 

5. Salve suas alterações.

Teste seu botão 

Depois de salvar todas as alterações no código do site, acesse o site e clique no novo botão. Quando o senhor fizer isso, o formulário de inscrição será exibido. 

O senhor está tendo problemas? Acesse o Fórum da comunidade do Klaviyo para obter orientação de outros usuários do Klaviyo. 

Recursos adicionais

• Introdução aos formulários de inscrição
• Como acionar um formulário pop-up ou flyout de forma personalizada
• Como escolher a segmentação de formulários e as configurações de comportamento
• Curso: Certificação do produto Klaviyo