Configurações

Formulários

Como incluir um campo do tipo Radio ou Checkbox em um formulário

Siga os passos abaixo para incluir um campo do tipo Radio (Checkbox) em um formulário do tipo Wordpress ou Landing page.


Criando o campo de tipo valores únicos com os dois valores de opções


Primeiramente é preciso criar o campo do tipo Valores únicos em sua lista. Para isso, clique no link abaixo para visualizar o passo a passo:


Como criar campos do tipo lista de valores únicos


Criando o formulário com o campo de valor único


Agora você precisa criar o seu formulário, seja ele para o seu site, wordpress ou Landing page.


Como criar um formulário para o seu site


Como criar um formulário Wordpress - MKT2Easy


Como criar um formulário Wordpress - Mail2Easy PRO


Criando a Landing Page - Mail2Easy Pro


Criando a Landing Page - MKT2Easy


Como incluir no Google Tag Manager o código


Agora é necessário acessar o seu GTM para criar o código.


Dentro do GTM, crie uma nova Tag:



Selecione o tipo da tag: HTML personalizado;

Abaixo insira o código personalizado do tipo de campo radio;


O código para criação de botão do tipo radio é este abaixo. É necessário alterar o código do campo que em nosso exemplo está cmp36. Em vermelho estão as variáveis que precisam ser substituídas.


<script>

    var sp = document.createElement("SPAN");

    sp.innerHTML = '<input type="radio" id="opcaosim" name="cmp36" value="Sim" checked=""><label for="sim">Sim </label><input type="radio" id="opcaonao" name="cmp36" value="Não"><label for="não">Não </label>'; 

  

    var chl = document.getElementsByName("cmp36")[0]; 

    var par = chl.parentElement;

 

    par.removeChild(chl)  

    par.appendChild(sp);

</script>


Para utilizar um botão do tipo checkbox, utilize o código abaixo, alterando apenas as variáveis em vermelho ou inserindo alguma informações a mais que você deseje:


<script>

    var sp = document.createElement("SPAN");

    sp.innerHTML = '<input type="checkbox" id="news" name="cmp27" value="Subscribe"><label for="news"  style="color:white">Subscribe to NewsLetter</label>'; 


    var chl = document.getElementsByName("cmp27")[0];

    var par = chl.parentElement;

    par.removeChild(chl)

    par.appendChild(sp);

</script>


Na parte inferior, adicione um Acionador.



Neste novo Acionamento, escolha o tipo de acionador: DOM pronto;


Selecione a opção Alguns eventos DOM prontos;


E abaixo, nas configurações de disparador, selecione Page URL > contém > Informe o trecho da URL em que está o seu formulário.


Por exemplo: http://lojalegalteste.com.br/receba-nossa-newsletter/ 


No acionador coloque: Page URL > contém: /receba-nossa-newsletter/


Ou seja, este disparador será acionado somente na página  que tenha o texto no seu site: /receba-nossa-newsletter/, como no exemplo abaixo:




Abaixo um exemplo de como ficará o botão do tipo Radio em um formulário do Wordpress:



Abaixo um exemplo de como ficará o botão do tipo Checkbox em uma Landing page:



Clique aqui para ver como incluir o código do Google Tag Manager em sua Landing Page.