WP Contact Form 7 Submit

Data collection and tags
1

Hello,

I’m trying to tag a popular WordPress form ‘Contact Form 7.’ I can do it on click submit, however that would also fire if errors happen such as not entering a required field.

To fire it only if successful, there is a post-submission confirmation message when inspecting looks as follows:

<div class="wpcf7-response-output" aria-hidden="true">Thank you for your message. It has been sent.</div>

And I can access in console web browser tools the text to place it in a variable:

let output_text = document.querySelector("#wpcf7-f20-p19977-o1 > form > div.wpcf7-response-output").innerText

then place the value in a custom js variable

function() {

let outputText = document.querySelector("#wpcf7-f20-p19977-o1 > form > div.wpcf7-response-output").innerText
return outputText;

}

then I set the condition of the trigger to fire if output_text contains ‘Thank you for your message’ but it isn’t firing. Any thoughts?

For reference how it tracks on GTM:

Uses a listener that perhaps is needed since looks like the class I’m using may not be part of the initial click. Since I have the same ‘dataLayer’ data layer name, wondering what changes I need to make (if any) to the below code that is meant for GTM.


<script>

document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs

})

});

</script>

Thanks in advance.

Rafael S

2

Hi Rafael!

One question first, before we get to the code you provided - have you tried using our built-in form submission trigger? If yes, was there anything wrong with it?

3

Hi Sara,

I think I gave one attempt to the form method you suggest and wasn’t able, unfortunately can’t recall the scenario.

Looks like I was able to make it work using the listener above and fire the event when CF7 pushed cf7submission which is when the form is sent.

Thanks for the reply.

1 Like
4

I believe when testing Form Submission trigger is not grabbing Form ID, shows as " ", Form Name is undefined…

Also, looks like the built in trigger (at least as described in the how-to) seems to fire even if the form didn’t get through ie when the user didnt enter email and the form is asking to fix errors.

The listener method is working fine so far. It could be a workaround specific for CF7 that was originally meant for GTM and is working also in Piwik.

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.