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.

Antes de começar, certifique-se de que o JavaScript no site da Klaviyo (Klaviyo.js) esteja instalado em todas as páginas em que você adicionar o botão. Verifique se os formulários de registro estão ativados no seu site.

Criar um novo botão

This content requires Functional cookies to be enabled.

Update Cookie Settings

Antes de adicionar um novo botão ao seu site, configure seu formulário de registro no Klaviyo:

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. Selecione Editar estilos no editor de formulários. Defina Tipo de formulário como Pop-up, flyout, página inteira ou banner. Formulários incorporados não podem ser acionados quando um botão é clicado.
3. Selecione Segmentação e comportamento > Exibição. Em Temporização, defina Mostrar formulário como Somente em um acionador personalizado.

Gatilhos personalizados ignoram as regras de segmentação, dispositivo e frequência do formulário. Se você precisar limitar quem pode abrir o formulário, aplique essas condições ao botão do seu site ou ao código personalizado.

1. Quando você estiver satisfeito com o design e o conteúdo do seu formulário, clique em Publicar ou agendar, selecione a opção Publicar agora e, em seguida, clique em Publicar agora para colocar o formulário no ar.
2. Copie o código abaixo:

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

1. 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.

Se você adicionar vários botões à mesma página, dê a cada botão um nome de classe exclusivo (por exemplo, klaviyo_form_trigger1, klaviyo_form_trigger2), mesmo que eles abram o mesmo formulário de registro. O snippet de JavaScript abaixo é anexado apenas ao primeiro botão com uma classe correspondente. Adicione um snippet correspondente para cada botão.

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

This content requires Functional cookies to be enabled.

Update Cookie Settings

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>

1. Cole o snippet de código diretamente abaixo do código do botão que você adicionou ao seu site na última seção.
2. No snippet que você acabou de colar, substitua FORM_ID pelo ID do seu formulário de registro.
   • Para encontrar o ID do seu formulário, volte para o Klaviyo e abra o editor de formulários do seu formulário de registro. Copie o ID imediatamente após /forms/ no URL. O ID pode conter letras e números; mantenha as maiúsculas e minúsculas exatamente como aparecem ao substituir FORM_ID no seu snippet.
     

3. 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:
     

1. 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.

Recursos adicionais