Como integrar a SharpSpring com o Contact Form 7

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 desse plugin.

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.

Usuários com acesso:

• Administradores

• Gerentes da Empresa

• Gerentes de Marketing

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 ressaltar que:

• Esse método exige que você utilize a versão mais atual do Contact Form 7. Versões antigas não são compatíveis com o método utilizado nesse artigo.

• Será necessário realização de edições no código para que esse procedimento funcione. Configurar o código de geração e configurar os valores do Contact Form 7 é apenas parte do processo.

• O método padrão de envio Ajax para o Contact Form 7 deve ser usado para integrações via JavaScript. Se você tiver qualquer outro código, plugin ou tema que desabilite o envio do formulário Ajax, essa integração não irá funcionar. Após configurar o Contact Form 7, necessário fazer as alterações nos códigos de incorporação de formulários nativos da SharpSpring.

• Essa integração exige que o jQuery seja instalado em sua página. O jQuery deve ser inserido na página a cima desses scripts para estar disponível para eles. Esteja ciente de que o jQuery é instalado por padrão nas configurações do Wordpress e geralmente não precisa ser configurado. Se você não conseguir utilizá-lo ou colocá-lo acima do código do formulário, você deve conectar seus formulários através do .PHP.

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.

Nota: a SharpSpring oferece serviços profissionais para ajudar com a customização de códigos.

Realizar as edições necessárias no Contat Forms 7

Antes de você integrar o Contact Forms 7 com a SharpSpring, você precisará gerar um código apropriado e gerar uma série de valores. Para isso faça o seguinte:

1. Em uma guia do navegador, faça o login no Wordpress.

2. Crie seu Formulário Contact Form 7 no Wordpress. 

3. Copie o código gerado para o seu formulário

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

5. 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="XXXX"]

6. Copie o texto abaixo e cole ele diretamente abaixo do shortcode do Contact 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>

7. Substitua o XXXX, pelo valor do seu atributo html_id. Não substitua o símbolo # hashtag.

Esteja ciente de que o restante do script que inclui xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXxc será modificado em uma próxima etapa.

O valor null no script fornecido pode ser substituído por uma função callback, mas também funciona como null. 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. 

Colocar códigos de incorporação de formulários nativos

Somente depois de criar o código necessário do Contact Form 7 e definir os valores, você pode começar a integrar o Contact Form 7 com a SharpSpring. Para isso, faça o seguinte:

1. Em uma guia do navegador, faça o login na SharpSpring.

2. Na barra de ferramentas superior da SharpSpring, clique em Marketing > Conteúdo > Formulários.

3. Crie ou edite um formulário nativo.

4. Clique no ícone de três ponto para ir em Ações > Incorporar Código.

5. Copie o código de incorporação do formulário nativo

6. Cole o código de incorporação diretamente abaixo do script do Contact Form 7 no Wordpress.

Editar os códigos de incorporação de formulários nativos

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

Para combinar os códigos de incorporação do formulário nativo da SharpSpring e os códigos do Contact Form 7 Wordpress, faça o seguinte:

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

2. Logo após o valor form, adicione o valor XXXX com vírgula.

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

3. Substitua o valor XXXX agregado e a vírgula pelo html_id que você deu ao seu formulário 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 de caracteres fornecida na linha form do código incorporado do formulário nativo.

6. Cole a string de caracteres sobre os caracteres xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx na linha de código __ss_noform.push do Contact Form 7.

7. Salve a página do Wordpress ou publique.

8. Realize um preenchimento de teste, direto no formulário da página.

9. Mapeie os campos de formulário para a SharpSpring.

Nota: 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:

[contact-form-7 id="418" title="Teste do Formulário de Contato 7 (e-mail 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 type="text/javascript" src="https://koi-3QNEGVSSPC.marketingautomation.services/client/noform.js?ver=1.24" ></script>