Pular para o conteúdo principal

Como Conectar WPForms

Fernanda Matias
Atualizado

O WPForms é um construtor de formulários avançado para sites WordPress e pode ser colocado no arquivo functions.php do Wordpress.

Esses formulários podem se integrar aos formulários da SharpSpring.

Este artigo detalha como conectar o WPForms à SharpSpring.

 

Usuários com acesso:

• Administradores

 

Informações importantes sobre scripts de formulários nativos

O formulário nativo que a SharpSpring oferece não deve ser adicionado a sua página. Ele é usado apenas para completar os procedimentos presentes neste artigo.

Mais especificamente, o script fornecido é usado apenas para referência e não deve estar na página ao conectar o WPForms utilizando esse método. O código Wordpress .PHP modificado substitui a função que o script de formulário nativo da SharpSpring normalmente faria. Se ambos estiverem presentes, seu formulário não funcionará conforme o esperado.

 

 

Antes de você se conectar

Os procedimentos neste artigo pressupõem que você já fez o seguinte:

  • Possui a versão paga do WPForms, já que a versão gratuita não é compatível.

  • Instalou o WPForms no Wordpress.

  • Adicionou o WPForm em pelo menos uma página do Wordpress.

  • Inseriu o código de rastreamento de site em cada página Wordpress que você deseja rastrear.

 

 

Criando formulários nativos

Antes de conectar o WPForms à SharpSpring, você precisa criar um formulário nativo. Para criar formulários nativos, faça o seguinte:

  1. Abra uma nova guia no seu navegador.

  2. Efetue login na SharpSpring.

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

  4. Clique em Criar formulário.

  5. Digite um nome para o formulário no campo A que se destina o seu formulário.

  6. Clique no botão de opção Formulário nativo na lista Que tipo de formulário é.

  7. Selecione a opção de atribuição de lista desejada na lista Todos os novos leads devem ser atribuídos como.

  8. Opcionalmente, clique na caixa de seleção Permitir que um registro de um lead ou contato seja criado mesmo que um endereço de e-mail não seja enviado.

  9. Clique em Continuar.

O formulário nativo criado abrirá uma página com um código incorporado. Mantenha a janela contendo o código incorporado aberta, pois você precisará do código posteriormente.

 

 

Exemplo de código de formulário nativo

A seguir, é apresentado um exemplo de código de incorporação de formulário nativo. Esteja ciente de que o seu código e seus valores individuais serão diferentes do exemplo:

<script type="text/javascript">



    var __ss_noform = __ss_noform || [];



    __ss_noform.push(['baseURI', 'https://app-3QN7QJRNDE.marketingautomation.services/webforms/receivePostback/MzawMDE1tTA2BQA/']);



    __ss_noform.push(['endpoint', 'ea960f18-cd20-4c6c-acab-4e6b6a959260']);



</script>



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

 

 

Adicionando o código incorporado baseURI a WPForms

Depois de criar um formulário nativo na SharpSpring, você poderá começar a conectar o WPForms.

O processo de conexão requer que você adicione informações do baseURI e do endpoint nos formulários conectados.

Tais informações são provenientes do código incorporado gerado pelo formulário nativo criado na SharpSpring.

Para adicionar informações de baseURI aos WPForms, faça o seguinte:

  1. Abra uma nova guia no seu navegador.

  2. Efetue login no WPForms.

  3. Crie ou edite um WPForm.

  4. Crie um campo oculto.

  5. Clique no campo oculto.

  6. Clique em Geral.

  7. Altere o valor do rótulo do campo para: baseURI.

  8. Na guia do navegador onde o código incorporado da SharpSpring ficou aberto, copie a URL presente na linha do baseURI do código.

  9. Na guia do navegador WPForms, cole a URL do baseURI copiada no campo de texto Valor Padrão.

Esteja ciente de que as informações endpoint ainda são necessárias para concluir o processo de conexão.

Notas:

  • O valor do rótulo do campo baseURI é case-sensitive, ou seja, diferencia maiúsculas de minúsculas.

  • Ao copiar a URL da baseURI , não inclua aspas simples.

  • Para melhores resultados, faça desses campos ocultos os primeiros campos no seu formulário.

 

 

Adicionando código de incorporação de endpoint a WPForms

Depois de adicionar informações do baseURI aos WPForms, você precisará adicionar informações de endpoint.

Essas informações são provenientes do código incorporado gerado pelo formulário nativo criado na SharpSpring.

Para adicionar informações do endpoint aos WPForms, faça o seguinte:

  1. Crie outro campo oculto no WPForm modificado.

  2. Clique no campo oculto.

  3. Clique em Geral.

  4. Altere o valor do rótulo do campo para: endpoint.

  5. Na guia do navegador contendo código incorporado da SharpSpring, copie a sequência alfanumérica de números e hífens na linha que contém o endpoint do código incorporado.

  6. Na guia do navegador aberta no WPForms, cole a sequência do endpoint copiada no campo de texto Valor Padrão .

  7. Atualize o WPForm modificado.

Notas:

  • O valor do rótulo do campo endpoint é case-sensitive, ou seja, diferencia maiúsculas de minúsculas.

  • Ao copiar a sequência de endpoint, não inclua aspas simples.

  • Para melhores resultados, faça desses campos ocultos os primeiros campos no seu formulário.

 

 

Adicionando código .PHP ao WPForms

Depois de adicionar informações do baseURI e do endpoint ao WPForms, você precisará adicionar o código .PHP no Wordpress. Ao fazer isso, existem alguns pontos que precisam ser considerados:

  • Você precisa adicionar o código .PHP apenas uma vez. Se você adicionar esse código para cada formulário, isso causaria vários problemas. Além disso, as principais vantagens de adicionar código ao Wordpress são que você só precisa adicionar o código uma vez, sem precisar editar o código .PHP futuramente. Assim, ao adicionar formulários adicionais, você só precisará criar um novo formulário nativo na SharpSpring e adicionar os dois campos ocultos ao seu formulário WPForm.

  • Você deve adicionar o código .PHP a um tema filho do Wordpress, se possível. A modificação do código funciona melhor com um tema filho do Wordpress. A modificação de um tema filho permite modificar o Wordpress sem interromper sua funcionalidade.

Para modificar o código .PHP do Wordpress, faça o seguinte:

  1. Abra uma nova guia no seu navegador.

  2. Efetue login no Wordpress.

  3. No menu esquerdo, em Aparência , clique em Editor.

  4. No menu à direita, clique no arquivo functions.php.

  5. Copie e cole o seguinte bloco de código na parte inferior do arquivo functions.php:

function wpf_dev_process_complete( $fields, $entry, $form_data, $entry_id ) {

    $body = [];
    $submitToSharpSpring = false;

    $entry = wpforms()->entry->get( $entry_id );
    $new_json = str_replace("\\n", "\\" . "\\n", "$entry->fields");
    $entry_fields = json_decode( $new_json, true );

    function dupeCheck($fieldName, $bodyData) {
        $cleanLabel = substr(preg_replace("/[^a-zA-Z0-9]+/", "", $fieldName), 0, 24);
        for ($x = 0; $x <= 20; $x++) {
        if(array_key_exists($cleanLabel, $bodyData)) {
            $cleanLabel = $cleanLabel . $x;
        } else { break; }
        } 
        return $cleanLabel;
 }

    foreach($entry_fields as $formField):

        $fieldName = $formField["name"];

        // handle checkboxes
        if ($formField["type"] == "checkbox") {
           $body[dupeCheck($fieldName, $body)] = str_replace("\\n", ",", $formField["value"]);

        // Handle WP Forms Fancy name field
        } elseif ($formField["type"] == "name") {
           $body[dupeCheck(($fieldName . "FieldFirstName"), $body)] = $formField["first"];
           $body[dupeCheck(($fieldName . "FieldMiddleName"), $body)] = $formField["middle"];
           $body[dupeCheck(($fieldName . "FieldLastName"), $body)] = $formField["last"];

        // Handle WP Forms Fancy address field
        } elseif ($formField["type"] == "address") {
           $body[dupeCheck(($fieldName . "FieldAddress1"), $body)] = $formField["address1"];
           $body[dupeCheck(($fieldName . "FieldAddress2"), $body)] = $formField["address2"];
           $body[dupeCheck(($fieldName . "FieldCity"), $body)] = $formField["city"];
           $body[dupeCheck(($fieldName . "FieldState"), $body)] = $formField["state"];
           $body[dupeCheck(($fieldName . "FieldPostalCode"), $body)] = $formField["postal"];
           $body[dupeCheck(($fieldName . "FieldCountry"), $body)] = $formField["country"];

        // Convert Date/Time data to SharpSpring format
        } elseif ($formField["type"] == "date-time") {
            if ($formField["time"] != "") {
                $body[dupeCheck($fieldName, $body)] = str_replace(array("T", "Z"), array(" ", ""), gmdate("Y-m-d\TH:i:s\Z", $formField["unix"]));
            } else {
                $body[dupeCheck($fieldName, $body)] = str_replace(array("T", "Z"), array(" ", ""), gmdate("Y-m-d", $formField["unix"]));
            }    

        // Capture endpoint data and handle other hidden fields
        } elseif ($formField["type"] == "hidden") {
            if ( $fieldName == "base uri" ) {
                $base_uri = $formField["value"];
            } else if ( $fieldName == "endpoint") {
                $endpoint = $formField["value"];
                $submitToSharpSpring = true;
            } else {
                $body[dupeCheck($fieldName, $body)] = $formField["value"];

            } 

        } else {
            $body[dupeCheck($fieldName, $body)] = $formField["value"];
        }        

    endforeach;

    $body["trackingid__sb"] = $_COOKIE["__ss_tk"]; //DO NOT CHANGE THIS LINE... it collects the tracking cookie to establish tracking
    if ($submitToSharpSpring) {
        $post_url = $base_uri . $endpoint;

        $request = new WP_Http();
        $response = $request->post( $post_url, array( "body" => $body ) );
    }
}
add_action( 'wpforms_process_complete', 'wpf_dev_process_complete', 10, 4 );

6. Clique em Salvar.

7. Na guia do navegador WPForms, atualize o formulário.

8. Preencha o formulário.

9. Envie o formulário uma vez.

Importante: Alterações no arquivo functions.php no Wordpress podem resultar no travamento do seu site. Certifique-se de ter acesso ao FTP para fazer backup e reverter para o seu antigo arquivo functions.php, caso necessário.

 

 

Mapeando formulários nativos

Após criar um formulário nativo, adicionar o código incorporado do formulário nativo e modificar o arquivo functions.php do Wordpress, você pode mapear os campos no formulário nativo. O mapeamento de campos do formulário fornece à SharpSpring informações sobre a que se referem cada um dos campos do formulário. Para mapear formulários nativos, faça o seguinte:

  1. Na guia do navegador contendo o código incorporado da SharpSpring, clique em Atualizar esta página.

  2. Clique no menu suspenso, na página Mapeamentos de Campos que aparecer.

  3. Selecione a opção que mais se aproxima do campo.

  4. Repita conforme necessário para todos os campos do formulário.

  5. Clique em Salvar Mapeamentos.

Sempre que você preenche o formulário pela primeira vez, dados de mapeamento são gerados. Sendo assim, não espere que o lead apareça no sistema logo de cara. Somente a segunda pessoa a preencher o formulário será importada como lead.

 

 

 

Considerações especiais sobre o WPForms

Ao mapear campos e conectar o WPForms, considere o seguinte:

  • Certos campos não funcionarão. Os campos Upload de arquivos não funcionarão com formulários nativos, incluindo o WPForms.

  • Você pode ver alguns campos que não estão no seu formulário. Por exemplo, se você estiver usando o campo padrão Nome dos WPForms, seu formulário poderá mostrar apenas os campos Nome e Sobrenome. No entanto, esse campo possui opções para incluir outros campos, como Sufixo ou Nome do Meio. Ignore o mapeamento desses campos se eles não estiverem no seu formulário. Isso se aplica a qualquer um dos campos do WPForms que contenham vários campos dentro de si. A SharpSpring apenas coleta o que está mapeado.

  • Os nomes dos seus campos aparecerão iguais aos do WPForms, mas quaisquer caracteres não alfanuméricos serão removidos. Por exemplo, se o seu campo WPForm for Qual é a sua cor favorita? a tela de mapeamento mostrará qualeasuacorfavorita. Isso aparece apenas na tela de mapeamento. Depois que o mapeamento é salvo, isso não será visto em outro lugar.

  • Alterar o formulário nativo ou as informações do WPForm exigirá remapeamento. Por exemplo, se você alterar o rótulo em um campo do WPForm após o mapeamento, será necessário redefinir o mapeamento e remapear o formulário usando o novo nome do campo.

  • Se vários campos no seu formulário tiverem o mesmo rótulo, todas as cópias subsequentes após a primeira terão um número após o nome do campo. Por exemplo, a segunda cópia terá 0 após o nome do campo, seguido por 1 na terceira e assim por diante. Isso pode incluir campos ocultos e garante que seus dados sejam recebidos se houver um campo oculto com o mesmo nome.

  • Campos de nomes irão mostrar apenas os primeiros 24 caracteres mapeados. Isso ajuda a prevenir erros com os campos WPForms que tenham nomes longos

  • Os campos em seu formulário devem ter rótulos para serem coletados pela SharpSpring. Se você não quiser que os campos tenham rótulos visíveis, marque os campos de rótulos como ocultos no WPForms.

Artigos relacionados

Comentários

0 comentário

Artigo fechado para comentários.