My contact form has this Format:
<div class="col-md-12">[text* text-813 placeholder "Name:"]</div>
<div class="col-md-12">[email* email-597 placeholder "EMail:"]</div>
<div class="col-md-12">[tel* tel-345 placeholder "Tel:"]</div>
</p>
[checkbox checkbox-770 id:Personal use_label_element "Personal"]
[checkbox checkbox-771 id:Buisness use_label_element "My Buisness"]
</div>
[textarea textarea-552 placeholder "Ask about anything!"]</div>
[submit "Submit"]</div>
And I want to enable GA tracking for their respective fields when one or more of the checkbox inputs are checked.
Here is the code I have tried so far:
document.addEventListener( 'wpcf7submit', function( event ) {
jQuery(function($) {
if ($('input').is(':checked')) {
dataLayer.push({
'event': 'Form_Submission'
'Interest': 'Business'
});
}
if ($('input').is(':checked')) {
dataLayer.push({
'event': 'Form_Submission'
'Interest': 'Personal'
});
}
});
}, false );
But it doesn't work, I get no errors as a result. Can anyone help me figure this out? Thanks in Advance.
You need to use the event.detail.inputs that is passed by wpcf7submit
document.addEventListener( 'wpcf7submit', function( event ) {
let inputs = event.detail.inputs;
for ( let i = 0; i < inputs.length; i++ ) {
if ( 'checkbox-770[]' == inputs[i].name ) {
dataLayer.push({
'event': 'Form_Submission',
'Interest': 'Personal'
});
} else if ('checkbox-771[]' === inputs[i].name ){
dataLayer.push({
'event': 'Form_Submission',
'Interest': 'Business'
});
}
}
}, false );