O Contact Form 7 é um dos plugins de formulário mais populares do Wordpress. A SharpSpring só pode integrar com a versão 4.8 ou superior.

Se você estiver usando uma versão anterior, atualize para a versão mais recente do Form 7, antes de se integrar à SharpSpring.

Este artigo detalha o processo de integração de um Form 7 com a SharpSpring.

Informações Iniciais

Este artigo detalha um método de conexão de formulários do tipo Contact Form 7, utilizando código JavaScript. É importante que você tenha utilize a versão mais atual dó plugin para o correto funcionamento.

Será necessária a realização de edições, tanto no código gerado pela Sharp quanto no código gerado pelo Wordpress. Realizar ajustes ao código é uma parte bem importante do processo de integração.

Ainda, o método padrão de envio Ajax do Form 7 deve ser usado para integrar via JavaScript. Se você tiver qualquer outro código, plugin ou tema que desabilite o envio Ajax por parte do formulário, a integração não irá funcionar.

Importante: a integração de formulário é um processo que envolve diferentes etapas. Para obter sucesso, você precisa seguir cada uma delas na sequência apresentada.

Gerando os códigos e realizando as edições necessárias

  1. Em uma guia do navegador, faça o login no Wordpress.
  2. Crie seu Formulário Contact Form 7 no Wordpress
  3. Crie um novo Formulário Nativo, dentro da SharpSpring.
  4. Copie o código incoporado que é gerado pela SharpSpring.

     5. Cole o código, na aba Texto, da sua página no Wordpress.  

6. Adicione html_id="XXXX" ao fim do código do Contact Form 7, onde XXXX é o valor do html_id. Este valor pode ser o que você quiser. Abaixo, um exemplo de código com valor html_id:

[contact-form-7 id = "331" title = "Meu Formulário de Contato SharpSpring 7" html_id="formulario"]

 7. Copie o snippet abaixo e cole ele diretamente abaixo do shortcode do Form 7.

<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. Substitua o XXXX em jQuery('#XXXX'), pelo valor do seu atributo html_id. Não substitua o símbolo # hashtag.

Nota: o valor null no script fornecido pode ser substituído por uma função callback, mas funciona como null também. Se algo está acionando uma mudança de página, seria melhor executar essa função no lugar do valor null . Dessa forma, você pode garantir que o código SharpSpring tenha terminado antes que a página mude, no caso de remoção de formulário ou algo semelhante. 

9. No código do formulário nativo, altere a valor endpoint para form.

10. Logo após o valor form, acrescente o seu atributo html_id (definido no passo 6). Exemplo:

__ss_noform.push(['form', 'formulario', '05d63487-0c10-4426-8cc2-25b055d495e4']);

  11. Adicione a seguinte linha de código, no código do formulário nativo, logo abaixo da linha do código editado no passo anterior:

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

  12. Copie a string de caracteres fornecida pelo código incorporado do formulário nativo. Essa string está na linha de código igual ao exemplo abaixo:

__ss_noform.push(['form', 'formulario', '05d63487-0c10-4426-8cc2-25b055d495e4']);

   13. Cole os caracteres no shortcode do Form 7, editado no passo 7.  O shortcode deve ficar, após as duas edições necessárias, assim:

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

   14. Salve a página do Wordpress ou publique.
   15. Realize um preenchimento de teste, direto no formulário da página.
   16. Mapeie os campos de formulário para a SharpSpring.

Observação: se você estiver fazendo essa alteração em um formulário que você já configurou com a SharpSpring, será necessário remover o código on_sent_ok das Configurações Adicionais no formulário do Wordpress.

Exemplo de Código

O código a seguir é um exemplo apenas de um snippet de código completo que irá integrar a SharpSpring com o Contact Form 7. Após todas as edições realizadas neste artigo, a estrutura do código na página do Worpress deve ser a seguinte:

[contact-form-7 id="418" title="Contact Form 7 Test (non-required email)" html_id="formulario"]

<script>var wpcf7Elm = jQuery('#formulario').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', 'formulario', '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>

Nota: no exemplo acima, o ID de formulário usado como exemplo o "formulario". É importante garantir que 

Encontrou sua resposta?