Como fazer o formulário de opt-in do Bloom aparecer ao clicar em um botão

É difícil imaginar a internet sem formulários de opt-in hoje em dia. Nós os usamos em nosso website por duas razões principais em particular; obter assinantes ou gerar leads.

Encontrar a maneira certa de abordar seu público com formulários de aceitação pode ser um verdadeiro desafio. Algumas pessoas querem jogar pelo seguro e não querem que seus visitantes sintam que estão 'invadindo' a bolha da Internet com formulários de opt-in indesejados. Geralmente é o momento em que as pessoas optam por um formulário de opt-in que aparece depois de clicar em algum lugar específico do site, ou como o chamamos; 'Trigger On Click'.

No tutorial de hoje, mostraremos como exatamente você pode usar esses gatilhos de clique em algumas das partes mais importantes do seu site. Depois de conseguir incluir a opção de clique no gatilho, não se esqueça de medir os resultados que ela traz para ver se o ajuda a fazer progressos.

Quando usar um formulário de aceitação após um clique

Basicamente, você pode fazer com que qualquer coisa em seu site acione um formulário de aceitação. Mas usá-lo nos lugares errados pode rapidamente se voltar contra você. As pessoas estão acostumadas a clicar aleatoriamente em um site o tempo todo; quando estão lendo algo, por exemplo. Ou mesmo quando estão olhando ao redor, muitas vezes clicam em algum lugar do site sem um propósito.

Agora imagine que você é o visitante; com cada clique aleatório, você pode ser confrontado com um formulário de aceitação inesperado devido a uma ação que você realizou sem um propósito. Isso sem dúvida terá um efeito negativo porque, no momento certo, você sentirá que não tem nenhum controle ao visitar aquele site.

Colocar um formulário opt-in de gatilho de clique em lugares onde as pessoas voluntariamente escolhem clicar ou não clicar (como botões ou apelos à ação em geral) é outra história. Estamos acostumados a clicar em um CTA (call to action), então isso não nos assusta. Estamos escolhendo deliberadamente a próxima etapa. Se não estivermos curiosos para ver o que está por trás de um CTA, simplesmente não clicaremos. Mas se quisermos, podemos. Essa 'escolha' que os visitantes têm faz com que eles se sintam mais à vontade quando um formulário de opt-in eventualmente aparece e aumenta as chances de eles realmente se inscreverem no seu boletim informativo.

Como fazer o formulário de opt-in do Bloom aparecer ao clicar em um botão

Inscreva-se no nosso canal no Youtube

Crie seu formulário de aceitação

Fazer as pessoas clicarem no seu CTA é uma forma de arte. Fazer com que as pessoas se inscrevam ou se tornem um lead por meio de um formulário de opt-in após clicar no CTA é a apreciação da arte. Você tem que experimentar e encontrar a maneira certa de abordar seu público-alvo para que ambos os lados fiquem satisfeitos no final.

Vamos mostrar como fazer um gatilho de clique para dois botões diferentes em seu site, onde você pode se beneficiar desse tipo de formulário de opt-in; o Módulo de botão e o botão Cabeçalho de largura total. A maneira de trabalhar é a mesma, mas vê-la em diferentes cenários pode ajudá-lo a entender a lógica. Depois disso, você também pode usá-lo para outros módulos.

Agora, antes de mostrarmos como vincular os formulários de opt-in a um CTA, veremos as configurações de um formulário de opt-in. Neste post, não forneceremos nenhum design específico, mas apenas a lógica. Existem algumas configurações necessárias para garantir que o acionador de clique funcione.

Escolha o tipo de formulário de aceitação

Ao adicionar um novo formulário de opt-in, a primeira escolha com a qual você se deparará é o tipo de formulário de opt-in que deseja usar. Para criar o efeito de gatilho ao clicar, você pode usar dois dos tipos: pop-up e pop-up. O que você provavelmente escolherá é o pop-up. Mas se você quiser ser um pouco mais sutil, também pode usar a mosca.

Guia Configurar

Comece nomeando seu formulário de opt-in na guia Setup do formulário de opt-in que você está criando. Em seguida, conecte seu formulário a um provedor de e-mail. Sem o provedor de e-mail, conta e lista de e-mail, o formulário ficará inativo.

Guia Design

Na guia Design, você pode definir o estilo do formulário que usará. Neste post, não vamos fazer isso. Vamos selecionar um formulário padrão de aceitação sem modificações, apenas para ver se funciona. Você pode, mais tarde, sempre voltar ao formulário de opt-in que criou para fazer alterações.

Guia Configurações de exibição

Esta é a guia que vincularemos o formulário de inscrição a um dos botões. Para garantir que os resultados funcionem, você deve ter certeza de que o formulário de opt-in pode ser exibido na página em que deseja que funcione. Se você for usar o mesmo formulário em todo o site, poderá habilitar facilmente o formulário para tudo, conforme mostrado na imagem abaixo.

Além disso, queremos usar o formulário de inscrição apenas para gatilhos com clique. É por isso que vamos desabilitar todas as outras opções e habilitar apenas o 'Trigger on Click'. Você verá que o campo Seletor CSS aparecerá imediatamente. Posteriormente nesta postagem, usaremos este campo para vincular nossos botões ao formulário de aceitação que estamos criando. Deixe esta página aberta em sua guia para que você possa acessá-la imediatamente mais tarde.

Vamos começar

Embora a lógica por trás da adição de um formulário opt-in do acionador de clique em módulos diferentes seja a mesma, vamos explicá-la em dois exemplos; o Button Module e o Fullwidth Header Button. Sem entender a lógica, você pode simplesmente seguir as etapas nesta postagem para que isso aconteça.

No entanto, se quiser que o acionador de clique funcione em outros lugares além dos explicados abaixo, você terá que fazer uma pequena modificação. A única coisa que vai mudar é a classe que estamos usando, pois esta sempre é diferente. Se você quiser que esse gatilho de clique aconteça para qualquer outra parte do seu site, basta seguir os mesmos passos que mostraremos a seguir e alterar a classe CSS de acordo com o que você está usando.

Conecte o módulo do botão para abrir o formulário de aceitação

O primeiro exemplo que o guiaremos é o Módulo de botão. O bom de criar um gatilho de clique para um Módulo de botão é que as possibilidades são infinitas. Você pode fazer qualquer tipo de seção ou linha que contenha um Módulo de botão e ser tão criativo quanto desejar.

Sem mais tarefas, vamos começar a criar um gatilho de clique para o botão. Temos duas maneiras de fazer isso; usando a classe CSS ou criando um ID CSS atribuído ao módulo.

Usando CSS Class

Abra a página ou crie a página onde deseja que o acionador de clique funcione. Em seguida, adicione um Módulo de botão ou abra as configurações do Módulo de botão do botão em que deseja que ele funcione.

Vá para a guia Avançado e role para baixo. Clique no campo Elemento principal e observe a classe CSS atribuída ao botão aparecer. Copie a classe CSS, vamos precisar dela imediatamente.

Em seguida, vá para a guia Configurações de exibição do formulário de aceitação que você está criando. Na parte anterior, já mostramos onde a mágica vai acontecer. Habilitamos 'Trigger On Click' e desabilitamos todas as outras possibilidades mencionadas. Logo abaixo de 'Trick On Click', você terá que colar a seguinte linha:

*.et_pb_button_0.et_pb_button.et_pb_module

Como você pode ver, é simplesmente um símbolo '*' seguido pela classe que você copiou antes desta etapa.

Ao usar esse método, há uma coisa que você deve ter em mente; a classe CSS do botão difere para cada botão na mesma página, mas assim que você adicionar um botão a outra página, ela começará do '0' imediatamente. Isso significa que cada primeiro Módulo de botão em cada página irá acionar o formulário de opt-in se o seu formulário de opt-in estiver disponível para todas as páginas e postagens.

Se quiser evitar isso, você pode usar fazer com que o acionador de clique aconteça por meio de um ID CSS. Mas nos casos em que você atribui um ID CSS específico ao módulo completo, a maneira mais fácil de fazer isso acontecer é por meio da classe CSS.

Você pode determinar em quais páginas um determinado formulário de opt-in pode aparecer nas Configurações de exibição do seu formulário de opt-in. Ao fazer isso, você estará no controle e saberá exatamente em quais páginas o formulário de opt-in aparecerá após clicar no botão que está atribuído a ele.

Usando CSS ID

O segundo método é usando um ID CSS. Abra o Módulo de botão, vá para a guia Avançado e atribua a ele um ID CSS. Nesse caso, usaremos 'pop-up'.

Continue indo para a guia Conteúdo do Módulo de Botão e escrevendo o símbolo “#” seguido por qualquer coisa que você quiser. Ao fazer isso, você garantirá que o visitante permaneça no mesmo lugar na página ao clicar no botão.

Continuando, volte às configurações do formulário de aceitação e adicione “um # pop-up” ao campo Trigger On Click. Você deve sempre escrever “um #” seguido pelo ID CSS atribuído ao Módulo de Botão.

a#popup

Conecte os botões de cabeçalho de largura total ao formulário de aceitação

O outro exemplo em que mostraremos como fazer um formulário de ativação de Acionar ao clicar é o botão Fullwidth Header. A única possibilidade que temos aqui é usar a classe CSS do botão. Não podemos atribuir um ID CSS por meio do construtor Divi ao botão em particular.

Usando CSS Class

Crie um cabeçalho de largura total ou abra o cabeçalho de largura total onde deseja adicionar o formulário de opt-in Trigger On Click. Vá para a guia Avançado do cabeçalho Fullwidth e role para baixo até encontrar o 'Botão Um'. Clique no campo e copie a classe CSS atribuída ao botão.

Em seguida, vá para a guia Conteúdo e digite o símbolo “#” seguido por qualquer outra coisa no campo URL do Botão # 1.

Por fim, vá para a guia Configurações de exibição do seu opt-in e digite o símbolo “*” seguido pela classe que você copiou atribuída ao botão.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Pensamentos finais

Este tutorial deve ajudá-lo a começar a usar gatilhos no clique e o formulário de inscrição do Bloom. Pode até fazer você reconsiderar a maneira como está tentando ganhar assinantes ou leads. Se você tiver dúvidas ou sugestões; sinta-se à vontade para deixar um comentário na seção de comentários abaixo. E enquanto você está lá; diga-nos em quais casos você usaria o formulário de ativação do Trigger On Click.

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por BarsRsind / shutterstock.com