Form tracking with Woopra Analytics

Question

I am trying to set up a form tracking with Woopra on my WordPress website but it does not work.

Below my HTML form :

<form id="subForm" class="af-form-wrapper wpcf7-form" action="http://campaign.clever-age.com/t/r/s/kuuhpd/" method="post" data-mautic-form="conferencemonitoringecp16">
     <input id="fielddrhhqlu" class="text" name="cm-f-drhhqlu" required="" type="text" placeholder="Nom ( obligatoire )" />
     <input id="fielddrhhqo" name="cm-f-drhhqo" required="" type="text" placeholder="Prenom (obligatoire)" />
     <input id="fielddrhhqn" name="cm-f-drhhqn" required="" type="text" placeholder="Société (obligatoire)" />
     <input id="fielddrhhqb" name="cm-f-drhhqb" required="" type="tel" placeholder="Téléphone (obligatoire)" />
     <input id="fieldEmail" name="cm-kuuhpd-kuuhpd" required="" type="email" placeholder="Adresse E-mail (obligatoire)" />
     <button id="mauticform_input_magento114form_submit" name="mauticform[submit]" type="submit">Recevoir le guide </button>
</form>

I would like to track name, company and email data only. Below my JS script :

<script>
    woopra.call('trackForm', 'Magento2', 'subForm', {
        identify: function(form) {
            return {
                Name: form.cm-f-drhhqlu,
                Company: form.cm-f-drhhqn,
                Email: form.cm-kuuhpd-kuuhpd
            };
        },
    });
</script>

Any help is greatly appreciated ! :-)

Answer 1

Below my solution.

HTML :

<form id="subForm" class="af-form-wrapper wpcf7-form" action="http://campaign.clever-age.com/t/r/s/kuuhpd/" method="post" data-mautic-form="conferencemonitoringecp16" onsubmit="identify()">
    <input id="fielddrhhqlu" class="text" name="cm-f-drhhqlu" required="" type="text" placeholder="Nom ( obligatoire )" />
    <input id="fielddrhhqo" name="cm-f-drhhqo" required="" type="text" placeholder="Prenom (obligatoire)" />
    <input id="fielddrhhqn" name="cm-f-drhhqn" required="" type="text" placeholder="Société (obligatoire)" />
    <input id="fielddrhhqb" name="cm-f-drhhqb" required="" type="tel" placeholder="Téléphone (obligatoire)" />
    <input id="fieldEmail" name="cm-kuuhpd-kuuhpd" required="" type="email" placeholder="Adresse E-mail (obligatoire)" />
    <button id="mauticform_input_magento114form_submit" name="mauticform[submit]" type="button" onclick="identify();">Recevoir le guide </button>
</form>

JS :

<script type="text/javascript"><!--

$(function() {
    woopra.call('trackForm', 'Magento', '#subForm', {
    });
});

function identify() {
    var emailField = document.getElementById('fieldEmail').value;
    var nameField = document.getElementById('fielddrhhqo').value  + " " + document.getElementById('fielddrhhqlu').value;
    var companyField = document.getElementById('fielddrhhqn').value;
    woopra.identify({
        email: emailField,
        name: nameField,
        company: companyField
    }).push(submitForm); 
}

function submitForm() {
    var form = document.getElementById("subForm");
    form.submit();
}

--></script>

Hope it helps if someone is facing the same issue.