Contact Form 7 Documentation: https://contactform7.com/dom-events/
Full GTM Container Download: https://measureschool.com/wp-content/uploads/2019/02/ContactForm7.json
🎓 Learn more from Measureschool: http://measureschool.com/products
🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/
📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books
📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear
In this video, I’m going to show you how you can connect a Contact Form 7 to Google Tag Manager so you can successfully track a form submission and forward this on to your Facebook Pixel, Google Analytics, or Google Ads. All and more, coming up.
Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And on this channel, we do marketing tech tips, tutorials, and tips and tricks just like this one. So if you haven’t yet, consider subscribing. Today, I want to talk about how you can connect a Contact Form 7 to Google Tag Manager. And then we can track our form submissions, and also the different form fields that go into that and forward this all on to our Facebook Pixel to Google Analytics or to Google Ads. Now, we got lots to cover so let’s dive in.
Now, this part just listens to the contact form and pushes data into the data layer if the right event happens. So we can deploy this on all pages, no problem. Or you could also narrow this down to only the pages where you have a contact form installed. So let’s try this out. Let’s go into our preview and debug mode. And let’s go over to our Contact Form reload that. Let’s close the developer tools here. And we get all familiar Google Tag Manager debug console. And we have our event listener deployed. Now let’s go ahead and fill out a test again, send this off. And you might have seen in the debug console that we now have a form submit right here in our Google Tag Manager debug console. When we click on that, we can actually look at the data layer and see what information has been transferred. And we have the event, form submit, we have our form ID, and we have our different fields that were submitted as well. So this is really useful if you want to pull out and put this into a tag. Now, how do you build a tag deployment out of this? Since this pushes data into the data layer, we, first of all, would need to build a trigger of that every time a form submit happens in the data layer. So let’s go ahead in Google Tag Manager and go into our triggers, and then build a custom trigger for our form submit.
We’ll choose our custom event, as the event is custom to our data layer. And we’ll put in our form Submit. And that’s already it, we can now click on Save, and have built a trigger based on the successful form Submit. Now let’s build some variables. Because we want to pull out some data here, for example, the form ID or the fields menu 597 with the product name here with the interest of the user, what are you interested in. So we can use that in our tag deployment as well. Let’s go over to Google Tag Manager and build new variables. And these are data layer variables. So a data layer variable for our form ID, and we simply need to use data layer variable here and right, the right key in here, in this case, it would be form ID, all right. And let’s also build a data layer variable for our interest here.
And in this case, it’s a bit tricky because we need to actually get into this fields array, and then choose the right number here, in order to pull out the right value in our case would be 012345 starts at zero. So the last number of this array is the number five. And then we want to get to the value of this data layer of this object. So we’ll get to the product. Let’s try this out. First of all, we want to get fields, and then a dot, the number five and the value. Let’s save this and refresh, just so we can see how everything is filled.
Let’s try this out. And this time, I’m going to use service here. Let’s send this off. We get our form submit in the data layer. And in the variables we should now see our dlv form interest is service. So this was correctly changed. And then our form ID is the form ID of our form that was submitted. Now that we have the data that we want to transfer over to our tags available. Let’s build some tags.
First of all, let’s start out building a Google Analytics tag. In this case, it would be useful to use a Google Analytics event tag for form Submit. And we’ll choose Universal Analytics. And as a track type we’ll choose event. And here we’re gonna type in our category in our case would be always the same. And let’s transfer over the actual contact form ID. I’m going to fill this out with our variable as well. And then as the label, let’s put in the interest. So we have that available as well. So that should be filled out dynamically based on what the user has entered. Now, you might be asking, why isn’t he sending over the other details, for example, the name or the email that’s actually considered personal identifiable information. And it’s prohibited by the terms of service of Google Analytics to be sent over. So don’t make the mistake of sending any kind of personal identifiable information over. With our interests, that is fine. So we would be able to know how many people have first of all submitted the form but then also be able to segment or to filter down on the specific interests that the user have. The other day can be left the same. If you have a settings variable, you can utilize that here. If you don’t have a settings variable, you can enter your tracking ID, let’s see, here’s the tracking ID, put it in here. And then as a trigger will choose our contact custom form submit trigger. Let’s save this and refresh. And let’s try this out again.
This time I choose consultation. Let’s send this off. We see our form submit happened, our Google Analytics event form submit happened. And in our Google Analytics, real-time reporting, we should see a new event. Yes, they’re just an new event that happened a form submit of the form ID 771. And if you click on that you see the interest was consultation. So everything is working from this part. And we could go ahead and deploy this to allow users, I want to show you how you can also connect the same data to a Facebook event. So here I have a Facebook event form submission. If I click on it, you can enter something like this, this will check a form submit an event called form submit, and then we can enter the interest. And again here we can utilize our variable with the two curly brackets and choose dlv form nterest in the drop down menu. And this will then be transferred over to Facebook that’s attached to the right trigger and save this.
And the same is true for a Google Ads conversion tag that you might want to fire upon this form Submit. And here I have a conversion ID from my account the conversion label from my account. And I simply want to fire this on our custom form submit. Let’s save this and try out these new events. So let’s fill this out again. And I’m going to service, send this off.
We have a form submit here we see our Facebook event five or Google Ads event fired and our Google Analytics event fired. You can also see that in our tag assistant, we have our Google Ads conversion tracking that fired and our Google Analytics event hit. Then we have our facebook pixel as well. A form submit was transferred with a custom parameter interest of service. And so you could for example, retarget or build an audience of users who have chosen service in your form and send that off. Don’t forget at the end, this is not yet live. It’s just happening in your browser. You still need to submit this as a version so it goes live to all your users.
All right, so there you have it. This is how you can connect your contact from seven to Google Tag Manager and then forward this on to the tags that you choose. If you found this interesting, then please give us a thumbs up and if you have any more questions, leave them in the comments down below. And if you haven’t yet, consider subscribing right over there. And I’ll see you in the next one. My name is Julian. Till next time.