Integrando Lead Gen & CRM com Contact Form 7 Usando JavaScript

Usando esta Informação

Este artigo detalhará um método para conectar formulários do Contact Form 7 usando código JavaScript.

Ao usar esta informação, esteja ciente do seguinte:

• Este método requer que você tenha atualizado para a versão mais recente do Contact Form 7. Versões mais antigas são incompatíveis com este método e não funcionarão.
   
• Você precisará gerar código e definir certos valores para que este procedimento funcione. Mais do que isso, gerar código e definir valores do Contact Form 7 é apenas parte do processo.
   
• O método de envio Ajax padrão para o Contact Form 7 deve ser utilizado para integrar via JavaScript. Se você tem algum código, plugin ou tema que desabilita o envio Ajax do formulário, esta integração não funcionará. Assim que você terminar de definir os valores do Contact Form 7, você precisará obter, colocar e editar os códigos de incorporação de formulário nativo do Lead Gen & CRM. 
   
• Esta integração requer que jQuery esteja instalado em sua página. jQuery deve ser carregado na página acima desses scripts para estar disponível para eles. Esteja ciente de que jQuery é instalado por padrão em muitas configurações do WordPress, e muitas vezes não precisa ser configurado. Se você não conseguir usar jQuery ou não conseguir colocá-lo acima do código do formulário, você precisará conectar seus formulários usando .PHP em vez disso.

Configurando Valores do Contact Form 7

Antes de integrar os Formulários do Contact Form com o Lead Gen & CRM, você precisará gerar um código apropriado do Contact Form 7 e gerar uma série de valores.

Para gerar um código do Contact Form 7 e definir valores, faça o seguinte:

1. Abra uma nova aba em seu navegador web.
2. Faça login no WordPress nessa aba do navegador.
3. Crie seu Formulário do Contact Form 7 no WordPress. 
4. Copie o código exclusivo que é gerado para seu formulário. 
5. Cole o código na seção Texto da página ou post do WordPress desejado.
6. Adicione html_id="XXXX" ao final do seu código, onde XXXX é o valor de html_id. O valor do html_id pode ser o que você quiser.

   O seguinte é um exemplo de script com um valor de html_id:

   [contact-form-7 id="331" title="Meu Formulário de Lead Gen & CRM" html_id="XXXX"]

7. Copie o seguinte script:

   <script>
   var wpcf7Elm = jQuery('#XXXX').closest('.wpcf7')[0];
   wpcf7Elm.addEventListener( 'wpcf7mailsent',
   function( event )
   { __ss_noform.push(['submit', null, 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']); },
   false );
   </script>

8. Cole o script diretamente abaixo do shortcode do Contact Form 7.
9. Substitua XXXX pelo html_id do seu formulário. Não substitua o símbolo # hashtag.

Esteja ciente de que o restante do script que inclui xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx será modificado em uma etapa posterior.

O valor null no script fornecido pode ser substituído por uma função de callback, mas funciona bem como null. Se algo estiver acionando uma mudança de página, seria melhor realizar essa função em vez do valor null para garantir que o código do Lead Gen & CRM tenha terminado antes da mudança de página, no caso de remoção do formulário, ou similar.
 

Colocando Códigos de Incorporação de Formulário Nativo

Somente após você ter criado o código necessário do Contact Form 7 e definido valores você pode começar a integrar o Contact Form 7 com o Lead Gen & CRM.

Para colocar códigos de incorporação de formulário nativo do Lead Gen & CRM no WordPress, faça o seguinte:

1. Abra outra nova aba em seu navegador web.
2. Faça login no Lead Gen & CRM nessa aba do navegador.
3. Clique em Formulários na barra lateral esquerda.
4. Crie ou edite um formulário nativo.
5. Clique    Ações > Código de Incorporação.
6. Copie o código de incorporação do formulário nativo.
7. Cole o código de incorporação diretamente abaixo do script do Contact Form 7 no WordPress.

Editando Códigos de Incorporação de Formulário Nativo

Após você ter colocado o código de incorporação no WordPress, você pode editá-lo conforme necessário.

Para combinar códigos de incorporação de formulário nativo do Lead Gen & CRM e códigos do Contact Form 7 no WordPress, faça o seguinte:

1. Altere endpoint para form no código de incorporação colado.

2. Adicione um valor XXXX com uma vírgula após ele depois de form:

    __ss_noform.push(['form', 'XXXX', 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']);

3. Substitua o valor e a vírgula XXXX adicionados pelo html_id que você deu ao seu formulário do Contact 7.

4. Adicione a seguinte linha de código diretamente abaixo do código de incorporação editado acima:

    __ss_noform.push(['submitType', 'manual']);

5. Copie a string alfanumérica de caracteres na linha form do código de incorporação do formulário nativo.
6. Cole a string de caracteres sobre os xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx caracteres na linha __ss_noform.push do código do Contact Form 7.
7. Salve a página ou post do WordPress.
8. Preencha o formulário na página do WordPress.
9. Mapeie os campos do formulário no Lead Gen & CRM.

Se você estiver fazendo essa alteração em um formulário que já estava configurado com o Lead Gen & CRM, você precisará remover o código on_sent_ok das Configurações Adicionais no formulário no WordPress.
 

Código de Exemplo

O seguinte código é um exemplo de um trecho de código completo que integrará o Lead Gen & CRM com o Contact Form 7:
 

[contact-form-7 id="418" title="Teste do Contact Form 7 (email não obrigatório)" html_id="XXXX"]

<script>var wpcf7Elm = jQuery('#XXXX').closest('.wpcf7')[0];wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {__ss_noform.push(['submit', null, '05d63487-0c10-4426-8cc2-25b055d495e4']);}, false );</script>

<script type="text/javascript">
 var __ss_noform = __ss_noform || [];
 __ss_noform.push(['baseURI', 'https://app-3QNEGVSSPC.marketingautomation.services/webforms/receivePostback/MzawMDEzNzc2AQA/']);
 __ss_noform.push(['form', 'XXXX', '05d63487-0c10-4426-8cc2-25b055d495e4']);
 __ss_noform.push(['submitType', 'manual']);
</script>

<script type="text/javascript" src="https://koi-3QNEGVSSPC.marketingautomation.services/client/noform.js?ver=1.24" ></script>