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

Para implementar nossa Consent Database 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 Database;
• 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 Database

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

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 Database).

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

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

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"]

3. Enviar os dados de consentimento para os APIs da iubenda

Agora que seu formulário está pronto, você precisa ter certeza de que ele envia as informações para a Consent Database 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 Database (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 Database.

Método submit

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

<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 Database (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 Database.

Veja também

• Consent Database – introdução e métodos
• Consent Database – Documentação JS
• Consent Database – guia de instalação do plugin WordPress