Javascript event listener on CF7 integration

Resolved

(@funkwarrior)

Hi,

I’m using this code in a Google Tag Manager custom trigger:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

But I can’t see the mailchimp acceptance checkbox response (some info redacted):

{
  event: "cf7submission",
  gtm: {
    uniqueEventId: 102,
    priorityId: 6,
    start: 1695247683423,
    triggers: "134832263_103",
    element: "HTMLInputElement: html > body.page-template-default.page" +
             ....
             ....
                    "kb-button-width-full",
    elementId: "",
    elementTarget: "",
    elementUrl: ""
  },
  developer_id: {xxxxxxx: true},
  url_passthrough: false,
  ads_data_redaction: true,
  eventCallback: "Function",
  formId: 3044,
  response: [
    {name: "nome", value: "John"},
    {name: "cognome", value: "Doe"},
    {name: "your-email", value: "johndoe@gmail.com"},
    {name: "Messaggio", value: "Message"},
    {name: "privacy", value: "1"}
  ]
}

Which event listener can i use to trigger newsletter subscription?

Thank you

This topic was modified 1 year, 2 months ago by funkwarrior.

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Contributor

Lap

(@lapzor)

1 year, 2 months ago

The CF7 inputs array indeed doesn’t seem to include the checkbox value.

Here is how I did it:

<script>
document.addEventListener( 'wpcf7submit', function( event ) {
console.log(document.getElementsByName('_mc4wp_subscribe_contact-form-7')[1].checked)

}, false );</script>

That will return true if checked or false if not checked.

For for example:

<script>
document.addEventListener( 'wpcf7submit', function( event ) {

if(document.getElementsByName('_mc4wp_subscribe_contact-form-7')[1].checked) {
//do stuff if box was checked
} 
else {
//do stuff if box wasn't checked
}

}, false );</script>

Hope that helps. If you have any questions, please let me know!

Thread Starter

funkwarrior

(@funkwarrior)

1 year, 2 months ago

Thank you for your reply!

Using your suggestion I changed my code like this:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {

  var newsletter = document.getElementsByName('_mc4wp_subscribe_contact-form-7')[1].checked || false;
  
  window.dataLayer.push({
    "event" : "cf7submission",
    "formId" : event.detail.contactFormId,
    "response" : event.detail.inputs,
    "newsletter": newsletter
  });

}); 
</script>

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Javascript event listener on CF7 integration’ is closed to new replies.

Tags