Iubenda logo
Crie Agora

Documentação

Tabela de conteúdos

Como usar a Consent Solution com WordPress e Contact Form 7 (método JavaScript)

Este tutorial usa o Contact Form 7, um plugin WordPress comum, para ilustrar como você pode integrar a Consent Solution com seus formulários WordPress. Se você estiver usando outro plugin, você ainda pode se referir a este tutorial, pois a abordagem de implementação é geralmente a mesma.

Alternativamente, você pode usar nosso plugin WordPress, compatível com o Contact Form 7, formulários WP, comentários do WordPress e formulários de checkout do WooCommerce.

Para implementar nossa Consent Solution com o Contact Form 7, você pode usar o método JavaScript para a implementação.

Em resumo, esse processo envolve:

  • a integração do código da Consent Solution;
  • a criação (ou modificação) do seu CF7 de maneira que inclua as tags de identificação necessárias; e, finalmente
  • o envio dos dados de consentimento para APIs da iubenda.

1. Integrar o código da Consent Solution

Para começar, copie o código encontrado em Consent Solution > Integrar > JavaScript.

Código da Consent Solution

Agora cole esse código dentro do head de todas as suas páginas (no WordPress, você pode facilmente editar as seções head e footer para todas as páginas do seu editor temático ou simplesmente usar um plugin do editor temático se você não estiver confortável editando arquivos temáticos).

2. Criar ou modificar seu formulário CF7

Depois de incluir o nosso código no head, acesse seu dashboard do WordPress e crie um formulário usando o plugin Contact Form 7 (se você já tiver um formulário CF7 ativo em seu site, basta ir até a página de panorama dos formulários de contato e clicar em editar sob o formulário que deseja integrar com a Consent Solution).

Contact Form 7 + Consent Solution

Usando um exemplo básico (nome, e-mail, mensagem e assinatura do newsletter) seu formulário será semelhante ao seguinte:

<label> Your name (required)
    [text* your-name] </label>

<label> Your email (required)
    [email* your-email] </label>

<label> Your message (required)
    [textarea* your-message] </label>

[acceptance generic] I agree to the processing of my personal data to receive a response to this contact request [/acceptance]

[acceptance newsletter optional] Send me information about products, services, deals or recommendations by email (optional) [/acceptance]

[submit "Send"]

<p>See our <a href="/privacy-policy">privacy policy</a> for more information on how we process your data.</p>

Agora temos que modificar o código do formulário para mapear as várias entradas do formulário, para que a Consent Solution possa realmente identificar e puxar as informações que seus usuários digitam nas várias entradas.

Para fazer o mapeamento podemos usar os atributos data-cons-, tais como:

  • data-cons-subject="first_name"
  • data-cons-subject="last_name"
  • data-cons-subject="full_name"
  • data-cons-subject="email"
  • data-cons-preference="privacy_policy" (para caixas de seleção, neste caso “privacy_policy”, mas você pode chamá-la como preferir, ao contrário das teclas anteriores, first_name, last_name, full_name e email)
  • data-cons-exclude (para excluir certos campos, como o da senha)

Como você não pode adicionar atributos data-cons- às entradas geradas com o Contact Form 7, você terá que usar a função load (ou submit) com o objeto map.

Para que a função load/submit funcione, você precisará de:

  • um id para o elemento form;
  • um id para o elemento submit; e
  • nomes diferentes para todos os inputs (entradas) subject e preferences.

Embora o CF7 permita adicionar nomes diferentes aos seus campos de entrada durante o processo de edição do formulário, você tem que adicionar manualmente os ids para o elemento form e o elemento submit.

Então você precisará modificar o botão submit de:

[submit "Send"]

para:

[submit id:cf7_submit "Send"]

Observação: adicionar o id antes do rótulo “Enviar”.

Com um atributo id também adicionado às outras entradas, seu código se tornará:

<label> Your name (required)
    [text* your-name id:cf7_name] </label>

<label> Your email (required)
    [email* your-email id:cf7_email] </label>

<label> Your message (required)
    [textarea* your-message id:cf7_message] </label>

[acceptance generic] I agree to the processing of my personal data to receive a response to this contact request [/acceptance]

[acceptance newsletter optional] Send me information about products, services, deals or recommendations by email (optional) [/acceptance]

[submit id:cf7_submit "Send"]

<p>See our <a href="/privacy-policy">privacy policy</a> for more information on how we process your data.</p>

Agora salve suas modificações.

Se você estiver modificando um formulário já existente em seu site, pule para a seção abaixo, caso contrário (se você acabou de criar o formulário) siga o método padrão para integrar seu formulário CF7 — copie o shortcode do formulário gerado pelo CF7:

Contact Form 7 + Consent Solution

Cole-o em uma página vazia (por exemplo, “Fale conosco”):

Contact Form 7 + Consent Solution

Agora, você precisa adicionar um id ao formulário. Para fazer isso, você precisará editar o shortcode gerado pelo Formulário de Contato 7. Então, por exemplo, se o seu shortcode era:

[contact-form-7 id="10" title="Contact"]

Deve se tornar:

[contact-form-7 id="10" title="Contact" html_id="cf7_form"]
Contact Form 7 + Consent Solution

Agora que seu formulário está pronto, você precisa ter certeza de que ele envia as informações para a Consent Solution quando o usuário preenche e envia o formulário. Existem dois jeitos de fazer isso:

  • o método load permite enviar os dados de Consentimento para APIs da iubenda assincronamente;
  • o método submit permite enviar os dados do Consentimento para APIs da iubenda sincronizadamente.

Método de carregamento

A função load permite vincular campos do objeto consent aos campos de entrada do seu <form> e registrar automaticamente o consentimento, configurando um trigger function sob submitElement: ou programaticamente através de um acionador. Por padrão, este método é escrito no localStorage para proteger contra qualquer perda de dados caso uma nova página for carregada antes que o JavaScript termine de executar.

Observação: a função load deve ser apenas invocada depois da declaração do objeto form (como pode ser visto no exemplo abaixo).

Aqui está a função load com o objeto do mapa.

<script type="text/javascript">
    _iub.cons_instructions.push(["load", {
        submitElement: document.getElementById("cf7_submit"),
        form: {
            selector: document.getElementById("cf7_form"),
            map: {
                subject: {
                    first_name: "your-name",
                    email: "your-email"
                },
                preferences: {
                    generic: "generic",
                    newsletter: "newsletter"
                }
            }
        },
        consent: {
            legal_notices: [{
                    identifier: "privacy_policy",
                },
                {
                    identifier: "cookie_policy",
                }
            ],
        }
    }])
</script>

No código acima, observe:

  • os ids cf7_submit e cf7_form;
  • o first_name e email subject mapeamento (lembre-se que você tem quatro opções não editáveis: first_name, last_name, full_name e email);
  • as preferências da caixa de seleção, onde você está livre para usar as chaves que você gosta (no nosso caso, generic e newsletter);
  • o legal_notices, podem ser automatizados se você sincronizar seus documentos legais da iubenda com a Consent Solution (basta usar os identificadores padrão privacy_policy e cookie_policy).

Certifique-se de incluir o método load DEPOIS do formulário (por exemplo, no rodapé da sua página de contato), e pronto!

Uma vez que você tenha coletado os consentimentos, você poderá classificar e analisar seus dados de consentimento do usuário no Dashboard da Consent Solution.

Leia a documentação JS para mais informações sobre o método load.

Método submit

O método submit permite enviar os dados do Consentimento para APIs da iubenda sincronizadamente.

Atenção

Observe que este método não funcionará se houver um redirecionamento após o envio do formulário.

<script>
    document.getElementById("cf7_submit").onclick = function() {
        sendToConsentSolution()
    };

    function sendToConsentSolution() {
        var inputName = document.getElementById("cf7_name").value;
        var inputEmail = document.getElementById("cf7_email").value;
        var inputMessage = document.getElementById("cf7_message").value;
        var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-');
        _iub.cons_instructions.push(["submit", {
            form: {
                selector: document.getElementById("cf7_form"),
                map: {
                    subject: {
                        first_name: "your-name",
                        email: "your-email"
                    },
                    preferences: {
                        generic: "generic",
                        newsletter: "newsletter"
                    }
                }
            },
            consent: {
                subject: {
                    id: subjectId
                },
                legal_notices: [{
                        identifier: "privacy_policy"
                    },
                    {
                        identifier: "cookie_policy"
                    }
                ]
            }
        }])
    }
</script>

No código acima, observe:

  • os ids cf7_submit e cf7_form;
  • o first_name e email subject mapeamento (lembre-se que você tem quatro opções não editáveis: first_name, last_name, full_name e email);
  • as preferências da caixa de seleção, onde você está livre para usar as chaves que você gosta (no nosso caso, generic e newsletter);
  • o legal_notices, automatizados se você sincronizar seus documentos legais da iubenda com a Consent Solution (basta usar os identificadores padrão privacy_policy e cookie_policy);
  • opcional: em vez de deixá-lo ser gerado automaticamente, podemos customizar o subjectId com o endereço de e-mail – por exemplo – do assunto, tudo minúsculo e com o símbolo “-” em vez de “.” e “@” (desta forma para john.doe@iubenda.com o subjectId se tornaria john-doe-iubenda-com).

Opcional: para um output mais suave, você pode editar manualmente a prova de consentimento. Usando o exemplo acima, o resultado final seria:

<script>
    document.getElementById("cf7_submit").onclick = function() {
        sendToConsentSolution()
    };

    function sendToConsentSolution() {
        var inputName = document.getElementById("cf7_name").value;
        var inputEmail = document.getElementById("cf7_email").value;
        var inputMessage = document.getElementById("cf7_message").value;
        var subjectId = inputEmail.toLowerCase().replace(/\W/g, '-');
        _iub.cons_instructions.push(["submit", {
            form: {
                selector: document.getElementById("cf7_form"),
                map: {
                    subject: {
                        first_name: "your-name",
                        email: "your-email"
                    },
                    preferences: {
                        generic: "generic",
                        newsletter: "newsletter"
                    }
                }
            },
            consent: {
                subject: {
                    id: subjectId
                },
                legal_notices: [{
                        identifier: "privacy_policy"
                    },
                    {
                        identifier: "cookie_policy"
                    }
                ],
                proofs: [{
                    content: "{" +
                        "\"user_name\": \"" + inputName + "\"," +
                        "\"user_email\": \"" + inputEmail + "\"," +
                        "\"user_message\": \"" + inputMessage + "\"," +
                        "}",
                    form: "<form id=\"cf7_form\">" +
                        "<label>Your name (required)<br>" +
                        "<input type=\"text\" name=\"your-name\" id=\"cf7_name\">" +
                        "</label><br>" +
                        "<label>Your email (required)<br>" +
                        "<input type=\"email\" name=\"your-email\" id=\"cf7_email\">" +
                        "</label><br>" +
                        "<label>Your message (required)<br>" +
                        "<textarea name=\"your-message\" cols=\"40\" rows=\"10\" id=\"cf7_message\"></textarea>" +
                        "</label><br>" +
                        "<input type=\"checkbox\" name=\"generic\"> I agree to the processing of my personal data to receive a response to this contact request<br>" +
                        "<input type=\"checkbox\" name=\"newsletter\"> Send me information about products, services, deals or recommendations by email (optional)<br>" +
                        "<input type=\"submit\" value=\"Send\" id=\"cf7_submit\">" +
                        "<p>See our <a href=\"/privacy-policy\">privacy policy</a> for more information on how we process your data.</p>" +
                        "</form>"
                }]
            }
        }])
    }
</script>

Certifique-se de incluir o método submit DEPOIS do formulário (por exemplo, no rodapé da sua página de contato), e pronto!

Uma vez que você tenha coletado seus consentimentos, você poderá classificar e analisar seus dados de consentimento do usuário no Dashboard da Consent Solution.

Leia a documentação JS para mais informações sobre o método submit.

Veja também