Conectando WPForms

Informações Importantes Sobre Scripts de Formulário Nativo

O script de Formulário Nativo que o Lead Gen & CRM fornece não deve ser colocado na sua página. Ele é usado apenas para completar os procedimentos deste documento.

O script fornecido é utilizado apenas como referência, e não deve estar na página ao conectar WPForms através deste método. O código .PHP do WordPress modificado substitui o que o script de Formulário Nativo do Lead Gen & CRM normalmente faria. Se ambos estiverem presentes, seu formulário não funcionará como pretendido.

Antes de Você Conectar

Os procedimentos neste artigo assumem que você fez o seguinte:

• Possui as versões pagas do WPForms, pois a versão gratuita não é compatível
• Instalou o WPForms no WordPress
• Adicionou um WPForm a pelo menos uma página do WordPress
• Inseriu o código de rastreamento do site em cada página do WordPress que você deseja rastrear

Criando Formulários Nativos

Antes de conectar o WPForms ao Lead Gen & CRM, você precisa criar um formulário nativo. Para criar formulários nativos, faça o seguinte:

1. Clique Formulários  na barra de ferramentas à esquerda.
2. Clique Criar Formulário.

   

3. Insira um nome para o formulário.
4. Clique no botão de opção Formulário Nativo .
5. Clique no botão de opção apropriado para determinar como os contatos que preencherem o formulário devem ser atribuídos.
6. Opcionalmente, clique na caixa de seleção Permitir que um lead ou registro de contato seja criado mesmo que um endereço de e-mail não seja enviado .
   Nota: Você pode optar por permitir que um lead ou registro de contato seja criado mesmo que um endereço de e-mail não seja enviado. Marcar esta opção permitirá que registros duplicados sejam criados, uma vez que o endereço de e-mail é o identificador único no Lead Gen & CRM.
7. Clique Continuar.

   

O formulário nativo criado abrirá uma página com um código de incorporação. Mantenha esta janela de código de incorporação aberta. Você precisará do código de incorporação mais tarde.

Código de Formulário Nativo Exemplo

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

<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 Código de Incorporação baseURI ao WPForms

Uma vez que você tenha criado um formulário nativo no Lead Gen & CRM, você pode começar a conectar o WPForms.

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

Essas informações vêm do código de incorporação gerado pelo formulário nativo criado no Lead Gen & CRM.

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

1. Abra outra nova aba no seu navegador.
2. Faça login no WPForms nessa aba do navegador.
3. Crie ou edite um WPForm.
4. Crie um campo oculto.
   Nota: Para melhores resultados, faça esses campos ocultos os primeiros campos do seu formulário.
5. Clique no campo oculto.
6. Clique em Geral.
7. Mude o valor do r>Campo Label para base uri.
   Nota: O valor do Campo Label base uri é sensível a maiúsculas e minúsculas.
8. Copie a URL na linha baseURI no código de incorporação na aba do navegador do código de incorporação do Lead Gen & CRM.
   Nota: Ao copiar a string baseURI, não inclua as aspas simples.
9. Cole a URL baseURI copiada no campo de texto Valor Padrão na aba do navegador do WPForms.

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

Código de exemplo usado:

Adicionando Código de Incorporação Endpoint ao WPForms

Uma vez que você tenha adicionado informações de baseURI ao WPForms, você precisará adicionar informações de endpoint.

Essas informações vêm do código de incorporação gerado pelo formulário nativo criado no Lead Gen & CRM.

Para adicionar informações de endpoint ao WPForms, faça o seguinte:

1. Crie outro campo oculto no WPForm modificado.
   Nota: Para melhores resultados, faça esses campos ocultos os primeiros campos do seu formulário.
2. Clique no campo oculto.
3. Clique em Geral.
4. Mude o valor do Campo Label para endpoint.
   Nota: O valor do endpoint Campo Label é sensível a maiúsculas e minúsculas.
5. Copie a string alfanumérica de números e traços na linha endpoint no código de incorporação na aba do navegador do código de incorporação do Lead Gen & CRM.
   Nota: Ao copiar a string endpoint, não inclua as aspas simples.
6. Cole a string endpoint copiada no campo de texto Valor Padrão na aba do navegador do WPForms.
7. Atualize o WPForm modificado.

Código de exemplo usado:

Adicionando Código .PHP ao WPForms

Uma vez que você tenha adicionado informações de baseURI e endpoint ao WPForms, você precisará adicionar código .PHP ao WordPress.

Há certas coisas a considerar ao adicionar código .PHP ao WordPress, no entanto:

• Você precisa adicionar o código .PHP apenas uma vez. Se você adicionar esse código para cada formulário, isso causaria uma série de 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 editá-lo e não modificar o código .PHP de outra forma. Assim, ao adicionar formulários adicionais, você só precisará criar um novo formulário nativo no Lead Gen & CRM e adicionar os dois campos ocultos ao seu WPForm.
• Você deve adicionar o código .PHP a um tema filho do WordPress, se possível. Modificar o código funciona melhor com um tema filho do WordPress. Modificar um tema filho permite que você modifique o WordPress sem quebrar sua funcionalidade.

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

Importante: Mudanças no functions.php do WordPress podem resultar na queda do seu site. Certifique-se de ter acesso FTP para fazer backup e reverter para seu antigo functions.php se necessário.

1. Abra outra nova aba no seu navegador.
2. Faça login no WordPress nessa aba do navegador.
3. Clique em Editor, localizado em Aparência no menu à esquerda.
4. Clique no arquivo functions.php no menu à direita.
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"];

        // lidar com caixas de seleção
        if ($formField["type"] == "checkbox") {
           $body[dupeCheck($fieldName, $body)] = str_replace("\n", ",", $formField["value"]);

        // Lidar com o campo de nome Fancy do WP Forms
        } 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"];

        // Lidar com o campo de endereço Fancy do WP Forms
        } 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"];

        // Converter dados de Data/Hora para o formato SharpSpring
        } 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"]));
            }    

        // Capturar dados de endpoint e lidar com outros campos ocultos
        } 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"]; //NÃO MUDAR ESTA LINHA... ela coleta o cookie de rastreamento para estabelecer o rastreamento
    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. Atualize o formulário na aba do navegador do WPForms.
8. Preencha o formulário.
9. Envie o formulário uma vez.

Mapeando Formulários Nativos

Uma vez que você tenha criado um formulário nativo, adicionado código de incorporação de formulário nativo e modificado o arquivo functions.php do WordPress, você pode mapear os campos no formulário nativo. O mapeamento dos campos do formulário fornece ao Lead Gen & CRM informações sobre a que esses campos do formulário se referem. Para mapear formulários nativos, faça o seguinte:

1. Clique em Atualizar esta Página na aba do navegador do código de incorporação do Lead Gen & CRM.
2. Clique em um menu suspenso de campo na página Mapeamentos de Campo que aparece.
3. Selecione a opção que mais se aproxima do campo.
4. Repita conforme necessário para cada campo do formulário.
5. Clique em Salvar Mapeamentos.

Sempre que você preencher o formulário pela primeira vez, você gera dados de mapeamento. Assim, não espere que o lead apareça no sistema até depois da primeira entrada. A segunda pessoa a preencher o formulário será importada como um lead.

Considerações Especiais para WPForms

Ao mapear campos e conectar WPForms, considere o seguinte:

• Certos campos não funcionarão. Campos de Upload de Arquivo não funcionarão com formulários nativos, incluindo WPForms.
• Você pode ver alguns campos que não estão no seu formulário. Por exemplo, se você estiver usando o campo Nome padrão do WPForms, seu formulário pode mostrar apenas os campos Primeiro Nome e Último Nome. No entanto, este campo tem opções para incluir outros campos, como Sufixo ou Nome do Meio. Pule 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 múltiplos campos dentro deles. O Lead Gen & CRM coleta apenas o que é 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 campo do seu WPForm for Qual é a sua cor favorita?, a tela de mapeamento mostrará Qualéasuacorfavorita. Isso aparece apenas na tela de mapeamento. Uma vez que o mapeamento é salvo, isso não será visto em outro lugar.
• Mudar informações do formulário nativo ou do WPForm exigirá remapeamento. Por exemplo, se você mudar o rótulo de um campo do seu WPForm após o mapeamento, você precisará redefinir o mapeamento e remapear o formulário usando o novo nome do campo.
• Se múltiplos campos no seu formulário tiverem o mesmo rótulo, todas as cópias subsequentes após a primeira terão um número seguindo o nome do campo. Por exemplo, a segunda cópia terá 0 seguindo o nome do campo, seguida por 1 na terceira, e assim por diante. Isso pode incluir campos ocultos, e isso garante que seus dados sejam transmitidos se houver um campo oculto com o mesmo nome.
• Os nomes dos campos mostrarão apenas os primeiros 24 caracteres ao mapear. Isso ajuda a evitar problemas com campos do WPForms que têm nomes longos.
• Os campos no seu formulário devem ter rótulos para serem coletados pelo Lead Gen & CRM. Se você não quiser que os campos tenham rótulos visíveis, marque os rótulos dos campos como ocultos dentro do WPForms.

Baixar o Plugin